HelloWorld.ViewModel

A few folks asked me to provide a ViewModel sample of some sort. I thought this was a great idea, since I don’t know that I had seen a straight-forward ViewModel sample yet. So here it is: HelloWorld.ViewModel!

Click the image to view the Silverlight sample live.

Let’s start out by looking at the code for the ViewModel class, since that’s the file that I authored first.

        1: using System;

       2: using System.ComponentModel;

       3:  

       4: namespace HelloWorldViewModel

       5: {

       6:     public class HelloWorldModel : INotifyPropertyChanged

       7:     {

       8:         private string _name;

       9:         private bool _isHavingGoodDay = true;

  

        /// <summary>

        /// The user's name

        /// </summary>

        public string Name

        {

            get { return this._name; }

            set

            {

                if (this._name != value)

                {

                    this._name = value;

                    this.RaisePropertyChanged("Name");

                    this.RaisePropertyChanged("Greeting");

                }

            }

        }

  

        /// <summary>

        /// Whether or not the user is having a good day

        /// </summary>

        public bool IsHavingGoodDay

        {

            get { return this._isHavingGoodDay; }

            set

            {

                if (this._isHavingGoodDay != value)

                {

                    this._isHavingGoodDay = value;

                    this.RaisePropertyChanged("IsHavingGoodDay");

                    this.RaisePropertyChanged("Greeting");

                }

            }

        }

  

        /// <summary>

        /// A greeting for the user

        /// </summary>

        public string Greeting

        {

            get

            {

                if (!string.IsNullOrEmpty(this.Name))

                {

                    if (this.IsHavingGoodDay)

                    {

                        return string.Format("Awesome; glad to see you {0}", this.Name);

                    }

  

                    return string.Format("Sorry to hear that, {0}.  I hope things turn around.", this.Name);

                }

  

                return "Hello World!";

            }

        }

  

        /// <summary>

        /// Support Binding

        /// </summary>

        public event PropertyChangedEventHandler PropertyChanged;

  

        /// <summary>

        /// Helper method for raising the PropertyChanged event

        /// </summary>

        /// <param name="propertyName"></param>

        private void RaisePropertyChanged(string propertyName)

        {

            if (this.PropertyChanged != null)

            {

                this.PropertyChanged(this, new PropertyChangedEventArgs(propertyName));

            }

        }

    }

}

The takeaways from this class:

It’s a POCO
It implements System.ComponentModel.INotifyPropertyChanged so that we can bind to its properties
That’s it
Oh yeah, no UI knowledge – That’s important!

Now for the other side of the coin, the View.

       1: <UserControl x:Class="HelloWorldViewModel.Page"

       2:              xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 

       3:              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

       4:              xmlns:app="clr-namespace:HelloWorldViewModel">

       5:     <UserControl.Resources>

       6:         <app:VisibilityConverter x:Key="VisibilityConverter" />

       7:     </UserControl.Resources>

       8:     <UserControl.DataContext>

       9:         <app:HelloWorldModel />

    </UserControl.DataContext>

    <Grid x:Name="LayoutRoot" Background="Black">

        <Image Source="Smiley.jpg"

               HorizontalAlignment="Stretch"

               VerticalAlignment="Stretch"

               Visibility="{Binding IsHavingGoodDay, Converter={StaticResource VisibilityConverter}}" />

        <Image Source="Sad.jpg"

               HorizontalAlignment="Stretch"

               VerticalAlignment="Stretch"

               Visibility="{Binding IsHavingGoodDay, Converter={StaticResource VisibilityConverter}, ConverterParameter=Collapsed}" />

        <Border Width="800"

                HorizontalAlignment="Center"

                VerticalAlignment="Top"

                CornerRadius="0,0,125,125"

                Background="#AABEBEFF">

            <TextBlock Grid.Row="3"

                       Text="{Binding Greeting}"

                       HorizontalAlignment="Center"

                       FontSize="24" />

        </Border>

        <Border Width="500"

                HorizontalAlignment="Center"

                VerticalAlignment="Bottom"

                CornerRadius="125,125,0,0"

                Background="#AABEBEFF">

            <Grid Width="300"

                  VerticalAlignment="Top"

                  HorizontalAlignment="Center"

                  Margin="10,20,10,0">

                <Grid.RowDefinitions>

                    <RowDefinition />

                    <RowDefinition />

                    <RowDefinition />

                </Grid.RowDefinitions>

                

                <TextBlock Grid.Row="0" Text="Enter your name:" />

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

                

                <CheckBox Grid.Row="2"

                          Content="I'm having a good day"

                          IsChecked="{Binding Path=IsHavingGoodDay, Mode=TwoWay}" />

            </Grid>

        </Border>

    </Grid>

</UserControl>

What the View exhibits:

Instantiates a VisibilityConverter for later use
Instantiates the ViewModel declaratively, using the <app:HelloWorldModel /> tag; and assigns this ViewModel instance to be the DataContext of the UserControl (and all child controls)
Declares 2 images, Smiley.jpg and Sad.jpg, and binds their Visibility properties to the IsHavingGoodDay property on the ViewModel. Notice the VisibilityConverter use and the ConverterParameter. This allows a single boolean to drive 2 different controls, with opposite behavior. The VisibilityConverter is a custom IValueConverter I wrote. I’ll do a post on it later.
Binds a TextBlock to the Greeting property on the ViewModel.
Binds the textbox and the checkbox to the ViewModel using TwoWay binding.

Now, let’s look at the code-behind for the View. This is by far the most important part of this sample.

       1: using System;

       2: using System.Windows.Controls;

       3:  

       4: namespace HelloWorldViewModel

       5: {

       6:     public partial class Page : UserControl

       7:     {

       8:         public Page()

       9:         {

      10:             InitializeComponent();

      11:         }

      12:     }

      13: }

Yep, (essentially) no code in the code-behind. And yes, that is the most important part of the ViewModel pattern. You can have your View bound to your ViewModel using 1-way and 2-way binding, with logic in your ViewModel and not a lick of logic in your View’s code-behind.

As I mentioned in my ViewModel Pattern introductory post, it’s important to disallow any view-specific behavior from leaking into the ViewModel. The visibility of the two images in this sample are perfect examples of this point. The ViewModel exposes a boolean, not a Visibility property. The View can then do whatever it wants with that boolean. For all the ViewModel knows, the View doesn’t do anything with it, but in this case, there are 2 images that are toggled based on the value.

In future posts, I’ll talk about more ViewModel details that go beyond Hello World type applications. Most notably, I’ll be writing about service references and how a ViewModel should get data from services to be exposed to the View. Keep in mind that this pattern can be applied in either WPF or Silverlight.

You can download the source code for this application here.

Technorati Tags: ViewModel,WPF,Silverlight,Model-View-ViewModel

Your Comments.

# re: HelloWorld.ViewModel
Jeff, great example!

How can I write a converter so it sets visibility of the panel depending on two properties, not one? Can (or should) the converter access properties in the model class?

Here is the reason: There is a listbox (of persons) on the left side of the window and the 'Add' and 'Update' buttons underneath. When the user selects a row in the listbox, I need to display a read-only panel with the details on the right side of the window. When the user clicks the Update button, I need to hide the read-only panel and display the update panel. Same for the Add button, except I have to clear selected item property first.

Therefore read-only panel visibility depends on two things: 1) item in selected the listbox and 2) it's not the update mode.

I got it to work by using two borders (one for each property) around read-only panel and a lot of extra code. Is there a simpler way? Thanks!

Left by IogannaLang at 6/24/2009 9:44 AM
# re: HelloWorld.ViewModel
I would create a single ViewModel property that represents the combined state that will drive the visibility.

Left by Jeff Handley at 7/17/2009 11:49 PM
# re: HelloWorld.ViewModel
Good Example Jeff

This is really helpfull to Know ViewModel

Left by Sudhir Malireddy at 8/31/2009 5:35 AM
# re: HelloWorld.ViewModel
Good work, keep it up

Left by kunal Rai at 9/22/2009 6:29 AM
# re: HelloWorld.ViewModel
cool, thanks.

Left by jacky chan at 9/30/2009 1:11 AM
# re: HelloWorld.ViewModel
Thanks for this simple example for MVVM architecture

Left by Soonam at 3/29/2010 1:45 AM
# re: HelloWorld.ViewModel
Hello there,

I guess this is not right according to the MVVM concept ...!!

As I can see you only create the MODEL that implements the INotifyPropertyChanged and bind it directly in the xaml to the view.

While you should create the VIEW-MODEL class and bind it to the VIEW ..!!

Regards
Waleed

Left by Waleed at 4/6/2010 2:13 AM
# re: HelloWorld.ViewModel
Waleed,

This is just a very simple example, as when I posted this I had realized that there weren't any ViewModel posts that showed this level of simplicity. Contrived, yes. I would argue though that this example has a ViewModel, but no Model.

-Jeff

Left by Jeff Handley at 4/6/2010 8:34 AM
# re: HelloWorld.ViewModel
Thank for this lovely example ! Not much text, straight to the point ! That's how i like it !

Left by Sebastian at 4/22/2010 3:57 AM
# re: HelloWorld.ViewModel
you should do one of these types of posts on commanding with mvvm with the various controls

Left by dave at 8/5/2010 7:08 PM
# re: HelloWorld.ViewModel
Thanks for taking the time to do this; it was helpful for me

Left by Josh Stodola at 9/21/2010 2:33 PM
# re: HelloWorld.ViewModel
Where is the Model? Am I missing something here?

Left by Walter at 11/2/2010 6:54 AM
# re: HelloWorld.ViewModel
You were doing well until you started adding "VisibilityConverter" and mentioning that you would add more details about it in a future post. So much for a hello world sample. Better luck next time

Left by reader at 4/20/2011 12:33 PM