Silverlight

Adventures in MVVM – Model-View-ViewModel

Brian Genisio's House Of Bilz — Sat, 23 May 2009 08:52:45 GMT

This post is intended to be a high-level post intended to index all of my “Adventures in MVVM” posts. I will be traveling the region this summer giving talks on the MVVM pattern and these posts are part of me working through the details of the MVVM pattern. These posts will not include the “What”. There are several good articles on the web that do that already. Instead, I will be taking a deeper dive into MVVM and writing on the “How” and “Why” of the MVVM pattern.

Binding to Resources in Silverlight/WPF

Brian Genisio's House Of Bilz — Sun, 15 Mar 2009 14:15:08 GMT

This article is describing how to solve the problem in SIlverlight, but the problem can be solved in WPF using the exact same technique.

So, now it is time to internationalize our application. I want to use the built-in "resx" mechanism for i18n in .net, so I create myself a resource file and start adding strings to the table:

Visual Studio automatically generates the resource class for me, and I am ready to bind to the data in my XAML:

<UserControl.Resources>
    <l:i18n x:Key="i18n" />
</UserControl.Resources>

<StackPanel x:Name="LayoutRoot" Orientation="Horizontal">
    <TextBox />
    <Button Content="{Binding Path=SearchButton, Source={StaticResource i18n}}" />
</StackPanel>

But I run my application and I get this exception: Unhandled Error in Silverlight 2 Application AG_E_PARSER_BAD_TYPE. I get this error message because the resx file is set to create my resource class as an "internal" class. Essentially, the SIlverlight engine doesn't have permission to instantiate a new i18n object, and it dies.

Fortunately, in Visual Studio 2008, they have given us a way to solve this problem. In the Resx editor, you can change the protection of the class it generates from internal to public. So, I do exactly that:

Now my XAML should be able to bind to the resource, right? Wrong: Unhandled Error in Silverlight 2 Application AG_E_PARSER_UNKNOWN_TYPE. This time, it is complaining because the constructor to this public class that Visual Studio generated is internal! The class is public, but the constructor is internal, so the Silverlight/WPF engine still can't instantiate the object.

I searched the interwebs, and I'm not alone with this problem. Most people solve the problem by adding a custom build step that modifies the code. Some even suggest changing the constructor to public by hand every time you update the resource table. I am here to say: THERE IS A BETTER WAY! I just created a public class with a single property that exposes the class:

public class i18nPublic
{
    private readonly static i18n resources = new i18n();
    public i18n Strings { get { return resources; } }
}

By adding this class, I can make a slight modification to the resource type and the binding path and I am now binding directly to the resources.

<UserControl.Resources>
  <l:i18nPublic x:Key="i18n" />
</UserControl.Resources>

<StackPanel x:Name="LayoutRoot" Orientation="Horizontal">
    <TextBox />
    <Button Content="{Binding Path=Strings.SearchButton, Source={StaticResource i18n}}" />
</StackPanel>

My Silverlight 3 Wish List

Brian Genisio's House Of Bilz — Sat, 07 Mar 2009 09:31:34 GMT

I have been developing full time in Silverlight 2 for a few months now. I must say, it is the most fun environment I have ever programmed in. It has been an enabling technology in our product, and I am rather excited to see what comes next. If the pattern continues as I expect it probably will, we will hear all about the features of Silverlight 3 in a few weeks at Mix 09. I will not be attending this conference, but I fully expect to be watching the important sessions virtually. I am hoping for a lot. You see, as much as I like the SIlverlight framework, it is missing some significant features that I can really use.

So, I figured I would publish my Silverlight 3 wish list. Some of these things are more important than others, but all of them are things that would make my "Rich Internet Application" more rich. I don't want this list to sound like I am just a big complainer. I think I am exercising the framework pretty hard, and Microsoft can only make the framework better with this list.

MediaElement frame rate control: The Silverlight media element is missing the ability to control the frame rate. This keeps us from controlling the playback for slow-motion or fast-forward. I have to imagine that the sports domain wants this as well.

MediaElement loop control: The current media element does not support looping of video content. It can be programmed by hooking the "MediaEnded" event, putting the position at zero, and playing again, but this causes a noticeable pause. This pause keeps looping play from being fluid. It would be nice if the media element supported it directly.

Native video rendering: Silverlight 2 does not use any hardware capabilities for video playback -- it is all done in software. Therefore, the playback takes a lot of processor power. This is really noticeable when four videos are playing simultaneously. Any more on modern hardware is often choppy. I would like to be able to play as many as nine videos at once.

3D support: Similar to the previous wish, Silverlight 2 does not use the video hardware directly. This means that there is no 3D support. It would be nice to see some 3D capabilities in Silverlight 3 -- preferably handled by hardware.

Direct bitmap manipulation: Silverlight 2 does not support this, and there are certain types of effects and manipulations that are not possible in Silverlight. I would love to see some bitmap manipulation capabilities

Support for other data transports: Currently, only HTTP requests are made available through the SIlverlight plug-in. This limits the use of more sophisticated WCF bindings. At a very minimum, it would be nice to be able to use TCP bindings via WCF.

Better mouse support: Currently, we need to hack in right-click, double-click and scroll-wheel capabilities. It would be nice to have native support.

Support for drag-and-drop: This is another case where I have hacked something together, but it would be great if I were able to rely on the framework.

Native support for the MVVM pattern: As far as I have figured, the MVVM pattern is the most suitable pattern for most large-scale Silverlight development. It allows us to test the majority of our code and keep it out of the view. Unfortunately, I haven't found MVVM to be well supported in the framework.

Commands -- They gave us ICommand, but nothing else. I have hacked something in, but native support would be nice.
See what Silverlight.FX and Cliburn have done. Can we get something like this in the framework?
Some sort of "Inversion of Control" or similar decoupling support? Might MEF or Prism show up in SIlverlight 3?
Stand-alone binding -- As far as I can tell, binding is only available in controls. I can't write tests against controls. I often want to bind data in my model to my view model. I have written my own binder for this, but it would be nice to have some built-in support
Better property notification. INotifyPropertyChanged creates a lot of boiler-plate code in the view model. I have minimized this by using a "property bag", but some utilities that make view models easier to write would be nice.

Interprocess communication: I would like the ability to talk to other non-silverlight processes. This seems like a tall order, but I have some business cases for this.

That is all I have for now. I am sure there is more that I am not thinking of. I come across different needs every day. For most cases, I have been able to hack some sort of support in when I need it. In some cases, like the video playback support, I can't hack my wan out of the limitations.

This list looks like a lot now that I have written it down. I am very curious to know if I will be getting any of these features.

Drag and Drop with Silverlight

Brian Genisio's House Of Bilz — Wed, 11 Feb 2009 09:49:06 GMT

The Problem

I have been developing with Silverlight for a few months now, and I have really been enjoying myself. It has been the enabling technology my project and we have been extremely productive in the environment. Unfortunately, Silverlight is still in version 2.0 and there are some missing capabilities.

One such hole in the framework is "Drag and Drop". There is no support for it directly. There are several blog examples on the web, but I have yet to find a fully encapsulated, generic solution to the "Drag and Drop" problem. For instance, how soon after dragging do you really want to be dragging? You don't want to drag immediately, as that will affect normal clicking on an element. How do you handle drags from one distinct control to another that are not aware of each other? How do you clue the user in that a given control is droppable? How do you add animation to cue the user that the item is being dropped?

Introducing DragNDrop

To answer these questions, I created the DragNDrop class. It is a manager of sorts, and watches a "Drag Source" for the mouse down events. The "Drag Source" implements an interface and the "Drop Spot" implements a complimentary interface. This allows for the "Drag Source" and "Drop Spot" to be blissfully unaware of each other.

Usage

The assumption made with this class is that there is some sort of a payload. This payload is picked up from the "Drag Source" and dropped into the "Drop Spot". The "Drop Spot" can accept a payload of any types that it implements from any "Drag Source" that implements the complementary interface. Lets take a look at the interfaces:

public class DragNDrop<PayloadType>
{
    public interface IThumbnailDragSource
    {
        FrameworkElement DragCursor { get; }
        PayloadType Payload { get; }
    }
    
    public interface IThumbnailDropSpot
    {
        void DragDropEnter();
        void DragDropExit();  
        void ThumbnailDroping(PayloadType dataContext, FrameworkElement cursor, Point cursorPosition);
    }
}

For instance, if a "Drag Source" wanted to allow dragging with a string payload, it would implement DragNDrop<string>.IThumbnailDragSource. Any "Drop Spot" that wants to accept a string payload would implement DragNDrop<string>.IThumbnailDropSpot. The DragNDrop class is then constructed with an instance of the "Drag Source" and the DragNDrop class handles everything else.

In addition to the payload, the "Drag Source" needs to provide the DragNDrop class with the cursor that will be displayed and dragged across the screen. This can be anything; an image, a user control, a rectangle, etc.

The "Drop Spot" will be notified when the cursor is entering and exiting its space, so it can react appropriately. It will also be notified when the payload is dropped with the instance of the cursor and the absolute position. This is necessary in case the "Drop Spot" wants to animate the drop in any way.

The Demo

I created the Twitter Search Tool to prove out this concept. The idea is that search for a term and it returns a list of tweets. When you find a tweet that you like, you can drop it on to the second list to keep track of it. It is not the most functional app in the world, but it illustrates the usage of the DragNDrop class nicely. Take a moment to try it out.

Now that you have seen it in action, lets take a look at how I use the DragNDrop class. This application uses a small data structure called Tweet. It contains all of the information about a given tweet (user name, user image, text, etc). The Tweet is the payload.

In the Silverlight UI, I created a user control to represent each item in the list called ListItem. The XAML is available in the full source if you are curious.

public partial class ListItem : UserControl, DragNDrop<Tweet>.IThumbnailDragSource
{
    private readonly DragNDrop<Tweet> _dragNDrop;

    public ListItem()
    {
        InitializeComponent();

        _dragNDrop = new DragNDrop<Tweet>(this);
        _dragNDrop.DraggingEnabledDistance = 5.0;
    }

    public FrameworkElement DragCursor
    {
        get
        {
            return new Image
            {
                Width = TweetImage.ActualWidth,
                Height = TweetImage.ActualHeight,
                Source = TweetImage.Source,
                Opacity = 0.5
            };
        }
    }

    public Tweet Payload
    {
        get { return DataContext as Tweet; }
    }
}

This code is pretty straight-forward. The DragCursor returns a new image with the picture of the user. The payload is the actual Tweet. The constructor creates an instance of DragNDrop and passes itself in as the source. It also sets the DraggingEnabledDistance. This is the distance (in pixels) that the user must drag before the dragging really begins. The default is 10 pixels.

Next, lets take a look at the "Drop Spot" code. It is also a user control, TweetDropList, which includes a ListBox control. It also includes an opaque canvas that gives the effect of highlighting when it is made visible.

public partial class TweetDropList : DragNDrop<Tweet>.IThumbnailDropSpot
{
    private readonly ObservableCollection<Tweet> _savedTweets = new ObservableCollection<Tweet>();

    public TweetDropList()
    {
        InitializeComponent();
        DropList.ItemsSource = _savedTweets;
    }

    public void DragDropEnter()
    {
        Highlight.Visibility = Visibility.Visible;
    }

    public void DragDropExit()
    {
        Highlight.Visibility = Visibility.Collapsed;
    }

    public void ThumbnailDroping(Tweet dataContext, FrameworkElement cursor, Point cursorPosition)
    {
        DragDropExit();
        AnimateCursor(cursor, cursorPosition, () => _savedTweets.Add(dataContext));
    }
}

I have left out the AnimateCursor code, but it simply generates a storyboard on the cursor and quickly morphs it down to a size of zero. That code can be found in the source bundle. The rest of this implementation is extremely simple. DragDropEnter and DragDropExit simply hides and shows the highlight layer. ThumbnailDropping will remove the highlighting layer and animate the cursor to give the effect of the item being dropped. When the animation completes, the new tweet is added to the _savedTweets collection, which will cause the user control to display the new tweet.

Thats It!

I designed the DragNDrop class to be as simple to use as possible. I have been using a version of this class in my product and I have had great results. The "Drop Spots" can implement as many versions of IThumbnailDropSpot as it needs to allow different types of items to be dragged. The DragNDrop class can be instantiated as many times as necessary, for every "Drag Source".

Please play with this class and give me feedback. I'd love to hear how it is being used.

DragNDrop Twitter Demo
DragNDrop Twitter Demo Source
DragNDrop.cs
Extensions.cs (a handful of extension methods that DragNDrop uses)