Beginning MVVM: The Basics

WPF and Silverlight experts talk a lot about the new Model-View-ViewModel pattern these days. The powerful databinding support in WPF framework provides the basis for MVVM pattern. In this post, I will be highlighting some points that beginners may need to know to start learning MVVM.

To start with MVVM, you must know the basics of WPF/Silverlight databinding and how to data-bind controls using XAML constructs. The thing to note is that if you data-bind a UI control to an object (using the DataContext dependency property), then all of the public properties of that data-object are available to the child controls. In MVVM, the view (a UI control/page) is data-bound to a ViewModel (a simple C# class). The ViewModel exposes all the data and commands the View needs via properties. The View, then declaratively binds its UI controls to corresponding properties and commands of the ViewModel via XAML constructs.

As concepts are more clarified through examples, I am presenting a very simple example. Lets build a Silverlight MVVM version for this UI:

The Listbox presents a list of persons and the right section presents the details of a selected person. To start with MVVM, we will make a ViewModel class containing two properties: a PersonList property that will be providing list of persons for the Listbox, and a SelectedPerson property that will contain the reference to the selected person. Here’s a crud implementation for the class:

public class PersonViewModel : System.ComponentModel.INotifyPropertyChanged
{
    ObservableCollection<Person> personList;
    Person selectedPerson;

    public PersonViewModel()
    {
        //populate some sample data
        personList = new ObservableCollection<Person>()
        {
            new Person(){Name="Syed Mehroz Alam", Age=10, City="Karachi", Country="Pakistan"},
            new Person(){Name="Zinedine Zidane", Age=20, City="Marseille", Country="France"},
            new Person(){Name="Ronaldinho", Age=30, City="Porto Alegre", Country="Brazil"},
            new Person(){Name="John Smith", Age=40, City="Washington", Country="USA"}
        };
    }

    #region Properties

    public ObservableCollection<Person> PersonList
    {
        get { return personList; }
    }

    public Person SelectedPerson
    {
        get { return selectedPerson; }
        set
        {
            selectedPerson = value;
            RaisePropertyChanged("SelectedPerson");
        }
    }

    #endregion

    #region INotifyPropertyChanged Members

    public event System.ComponentModel.PropertyChangedEventHandler PropertyChanged;
    private void RaisePropertyChanged(string propertyName)
    {
        if (PropertyChanged != null)
            PropertyChanged(this, new System.ComponentModel.PropertyChangedEventArgs(propertyName));
    }

    #endregion
}

Now we have this View-Model ready to be consumed by a View. So in a new UserControl, we will instantiate the ViewModel class through XAML in the resources section and will data-bind the View to it using DataContext property of the main control of the View, in our case, a Grid named LayoutRoot. Since the LayoutRoot is data-bound to the ViewModel class, we can use its public properties as the DataSources of our other controls in the View. For our example, we will assign Listbox’s ItemSource to ViewModel.PersonList property and Listbox’s SelectedItem to ViewModel.SelectedPerson property. The right section will be bound to the SelectedPerson and will contain TextBoxes for displaying details of that person. Here’s the XAML code:

<UserControl x:Class="MVVMExample1.View.PersonView"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:viewmodel="clr-namespace:MVVMExample1.ViewModel"
    >
    <UserControl.Resources>
        <viewmodel:PersonViewModel x:Key="ViewModel" />
    </UserControl.Resources>

    <!-- Databind the root control to the ViewModel class -->
    <!-- This way, all the public properties of ViewModel class become available to us -->
    <Grid x:Name="LayoutRoot" Background="White" DataContext="{StaticResource ViewModel}">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="250" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>

        <!-- The listbox gets its ItemSource from ViewModel.PersonList property -->
        <!-- Also, the SelectedItem is bound to ViewModel.SelectedPerson property -->
        <ListBox Grid.Column="0" Margin="5"
                 ItemsSource="{Binding PersonList}"
                 DisplayMemberPath="Name"
                 SelectedItem="{Binding SelectedPerson, Mode=TwoWay}"
                 />

        <!-- Databind the right section to ViewModel.SelectedPerson property -->
        <Grid x:Name="PersonDetails" Grid.Column="1" DataContext="{Binding SelectedPerson}" Margin="5" >
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="100" />
            <ColumnDefinition Width="150" />
        </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="30" />
                <RowDefinition Height="20" />
                <RowDefinition Height="20" />
                <RowDefinition Height="20" />
                <RowDefinition Height="20" />
            </Grid.RowDefinitions>
            <TextBlock Grid.Row="0" Grid.ColumnSpan="2" Text="Person Details" FontSize="15" />

            <TextBlock Grid.Row="1" Grid.Column="0" Text="Name" />
            <TextBox Grid.Row="1" Grid.Column="1" Text="{Binding Name, Mode=TwoWay}" />

            <TextBlock Grid.Row="2" Grid.Column="0" Text="Age" />
            <TextBox Grid.Row="2" Grid.Column="1" Text="{Binding Age, Mode=TwoWay}" />

            <TextBlock Grid.Row="3" Grid.Column="0" Text="City" />
            <TextBox Grid.Row="3" Grid.Column="1" Text="{Binding City, Mode=TwoWay}" />

            <TextBlock Grid.Row="4" Grid.Column="0" Text="Country" />
            <TextBox Grid.Row="4" Grid.Column="1" Text="{Binding Country, Mode=TwoWay}" />
        </Grid>

    </Grid>
</UserControl>

That’s all, our sample application is ready to be run. Observe how selecting a person updates the person details section. Also observe that the databindings are TwoWay and changing the name of a person in the details section is reflected in the ListBox panel as well.

Note that in Silverlight, we do not have built-in support for commands and triggers like WPF. So in order to execute some code upon a button click, we will either need manual hooking of the button’s Click event, a separate third party extension(e.g. SLExtensions, Prism or SilverlightFX) or make our own implementation. More on this in some later post.

Notice that MVVM seems difficult at first, but as soon as you create your first UI using this pattern, you will find yourself thinking your application in terms of Dependency Properties and IValueConverters. Beware, MVVM is quite addictive. Karl Shifflett presents some great MVVM resources on this page. Be sure to bookmark that page for new MVVM stuff.

The source code for the example UI we discussed can be downloaded here. The file needs to be renamed to .zip for extraction. This is “WordPress File Download Pattern” 🙂

Saving data-objects to Isolated Storage in Silverlight

If you are developing an enterprise Silverlight application you will typically need to cache your business entities in the isolated storage. There are two apparent choices for this:

1. Use the powerful Linq-To-XML API from System.Xml.Linq namespace. This method is to be used when you want to have a fine grain control over serialization (e.g. you want to store some properties of the data objects).

2. Use the built-in DataContractSerializer class. This method is very simple and the only thing it requires is that our business objects need to have the [DataContract] and [DataMember] attributes. In this post, I am going to discuss this second method.

In an enterprise LOB (line of business) application, our business objects will typically be retrieved via WCF service and hence will already have the [DataContract] and [DataMember] attributes marked on them. So we can directly use the built-in DataContractSerializer to store them to, and later retrieve them from, the isolated storage. Here’s a generic class to simplify the process:

public static class IsolatedStorageCacheManager<T>
{
    public static void Store(string filename, T obj)
    {
        IsolatedStorageFile appStore = IsolatedStorageFile.GetUserStoreForApplication();
        using (IsolatedStorageFileStream fileStream = appStore.OpenFile(filename, FileMode.Create))
        {
            DataContractSerializer serializer = new DataContractSerializer(typeof(T));
            serializer.WriteObject(fileStream, obj);
        }
    }
    public static T Retrieve(string filename)
    {
        T obj = default(T);
        IsolatedStorageFile appStore = IsolatedStorageFile.GetUserStoreForApplication();
        if (appStore.FileExists(filename))
        {
            using (IsolatedStorageFileStream fileStream = appStore.OpenFile(filename, FileMode.Open))
            {
                DataContractSerializer serializer = new DataContractSerializer(typeof(T));
                obj = (T)serializer.ReadObject(fileStream);
            }
        }
        return obj;
    }
}

Using the above code is really simple. Just add the class to your project and use it like this:

//for storing and retrieving a single object
Person myPersonObj = GetPerson();
IsolatedStorageCacheManager<Person>.Store("myfile.xml", myPersonObj);
Person myPersonObj2 = IsolatedStorageCacheManager<Person>.Retrieve("myfile.xml");

//for storing and retrieving a collection of objects
List<Person> myPersonList = GetPersonList();
IsolatedStorageCacheManager<List<Person>>.Store("myfile.xml", myPersonList);
List<Person> myPersonList2 = IsolatedStorageCacheManager<List<Person>>.Retrieve("myfile.xml");

Hope you will find this implementation useful.