Using Model-View-ViewModel Pattern in Your Windows Phone Application

Introduction

Wikipedia describes Model-View-ViewModel as an architectural pattern, which is based on the Model View Controller Pattern. It was originated at Microsoft. The principal behind MVVM is that a user interface designer might have requirements that are different from a traditional developer who would focus more on the business logic of the application.

The MVVM pattern is a specialization of the Presentation Model design pattern, which was introduced by Martin Fowler.

Elements of MVVM

The MVVM pattern seeks to build upon the advantages XAML offers by using XAML to validate the data and push the binding to the model. The elements of MVVM design pattern include:

  • Model - Similar to the MVC pattern, the model represents the data layer.
  • View - The view represents the UI layer which is displayed to the user in the form of buttons, windows, graphics, etc.
  • ViewModel - This layer can be viewed as abstraction of the view. It also helps in data binding between the Model and the View. The ViewModel passes in commands from View into the Model.

To leverage MVVM in your Windows Phone application, you need to make sure that the user interface has to be a XAML control.

Hands-On

To get started, create a Windows Phone application by selecting "Windows Phone application" project type from templates under "Silverlight for Windows Phone" in Visual Studio. Let us call it MVVMDemo.

Our MVVMDemo project will use the MVVM design pattern to show information about tourists.

Begin by creating folders in your Visual Studio project called "Model", "View" and "View Model".

Create a class inside Model folder called TouristModel.cs.

Add the following properties in the TouristModel class : Name, Address, ZipCode, EmailAddress. Also provide a constructor that takes in the values for these properties and assigns the values.

The code of TouristModel class will look as follows:

public class TouristModel
    {
        public string Name
        {
            get;
            set;
        }
        public string Address
        {
            get;
            set;
        }
        public string ZipCode
        {
            get;
            set;
        }
        public string EmailAddress
        {
            get;
            set;
        }
        public TouristModel(string name, string address, string zip, string email)
        {
            this.Name = name;
            this.Address = address;
            this.ZipCode = zip;
            this.EmailAddress = email;
        }
    }

Now, let us go ahead and design the ViewModel class. Add a class inside the ViewModel folder called TouristViewModel.cs

This is the class representing the view model. This class will implement ObservableCollection of type Touristmodel. Let's add a default constructor, which will add a few tourists.

The code for TouristViewModel class will look as follows.

public class TouristViewModel : ObservableCollection<TouristModel>
    {
        public TouristViewModel()
        {
            this.Add(new TouristModel("Curious George", "MonkeyLand", "90210", "george@monkey.com"));
            this.Add(new TouristModel("Thomas The Tank Engine", "TrainLand", "20910", "thomas@trainstation.com"));
            this.Add(new TouristModel("Fred Flinstone", "DinosaurLand", "81234", "fred@stoneage.com"));
        }
    }

Now, go ahead and add a Windows Phone user control under the View folder called TouristView.xaml.

In this user control, we will present names of our tourists in a list view. When the user clicks on a tourist, we will render the details of the selected tourist in another control (using another view).

To start with, edit the XAML of the Grid control to as under.

<Grid x:Name="LayoutRoot" Background="{StaticResource PhoneChromeBrush}">
        <Grid.RowDefinitions>
            <RowDefinition Height="50"></RowDefinition>
            <RowDefinition Height="150"></RowDefinition>
            <RowDefinition Height="*"></RowDefinition>
        </Grid.RowDefinitions>
        <Grid.Resources>
            <src:TouristViewModel x:Key="Tourists"/>
        </Grid.Resources>
        <TextBlock Text="Tourists" FontSize="24" FontWeight="Bold" Grid.Row="0" Foreground="white" 
                   Margin="5,5,0,10"></TextBlock>
        <ListBox Name="TouristList" Grid.Row="1" ItemsSource="{StaticResource Tourists}" 
                 SelectionChanged="TouristList_SelectionChanged">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Horizontal">
                        <TextBlock 
                        Text="{Binding Name}" FontSize="24" />
                        
                    </StackPanel>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
        <detailview:TouristDetailsView x:Name="Touristdetails" Grid.Row="2"
                                Visibility="Collapsed"></detailview:TouristDetailsView>
    </Grid>

Here is what the XAML above does:

  • Specifies "Tourists" as a resource for the Grid. The highlighted portion in the XAML shows that for the TouristList, we are using "Tourists" as a data source.
  • We have a ListBox called TouristList. When a user selects a tourist from the list, we will fire up the TouristList_SelectionChanged event.
  • We also have a TouristDetailsVIew control on the page, which initially is in a collapsed state. We will discuss more about this control in the next section.

Right click on TouristList_SelectionChanged method to go to the event handler. If you do not have this created, it will create one.

In this event handler, add code to get the details of the selected tourist and render it using the TouristDetailsView control.

        private void TouristList_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            TouristModel details = (TouristModel)TouristList.SelectedItem;
            Touristdetails.DataContext = details;
            Touristdetails.Visibility = Visibility.Visible;
        }

Now, we will create the TouristDetailsView user control.

Add another user control under the View folder and name it TouristDetailsView.

In the XAML, add code to show the properties of the tourist using appropriate controls as shown below.

<Grid x:Name="LayoutRoot" Background="{StaticResource PhoneChromeBrush}">
        <Grid.RowDefinitions>
            <RowDefinition Height="40*"></RowDefinition>
            <RowDefinition Height="100"></RowDefinition>
            <RowDefinition Height="231*"></RowDefinition>
        </Grid.RowDefinitions>
        <TextBlock Text="TOURIST DETAILS" HorizontalAlignment="Center" FontSize="24" FontWeight="Bold" ></TextBlock>
 
        <StackPanel Orientation="Vertical" Background="Transparent" Grid.Row="2" >
            <StackPanel Orientation="Horizontal">
                <TextBlock Text="Name"  Width="110"  FontSize="22" TextWrapping="Wrap" Margin="5,8"
                       Foreground="#FFFFBEBE"></TextBlock>
                <TextBlock Text="{Binding Name}"   FontSize="22" Foreground="White" Margin="13"
                       TextWrapping="Wrap" FontWeight="Bold"></TextBlock>
            </StackPanel>
 
            <StackPanel Orientation="Horizontal">
                <TextBlock Text="Address"  Width="110"  Foreground="#FFFFBEBE"  Margin="5,12" FontSize="22" 
                       TextWrapping="Wrap" ></TextBlock>
                <TextBlock Text="{Binding Address}"   FontSize="22" Foreground="White" Margin="13" TextWrapping="Wrap" 
                       FontWeight="Bold"></TextBlock>
            </StackPanel>
 
            <StackPanel Orientation="Horizontal">
                <TextBlock  Text="ZipCode"  Width="110"  Foreground="#FFFFBEBE" FontSize="22"  Margin="5,14" 
                        TextWrapping="Wrap" ></TextBlock>
                <TextBlock Text="{Binding ZipCode}" FontSize="22" Foreground="White" Height="Auto" Margin="13" 
                       TextWrapping="Wrap" FontWeight="Bold"></TextBlock>
            </StackPanel>
 
            <StackPanel Orientation="Horizontal">
                <TextBlock Width="110"  Text="Email"   Foreground="#FFFFBEBE" FontSize="22" Margin="5,16" 
                       TextWrapping="Wrap" ></TextBlock>
                <TextBlock Text="{Binding EmailAddress}"   FontSize="22"  Height="Auto" Foreground="White" Margin="13" 
                           TextWrapping="Wrap"   FontWeight="Bold"></TextBlock>
            </StackPanel>
 
            <Button Content="Close" Name="ButtonClose" Width="150" Height="60" Click="ButtonClose_Click" FontSize="20" 
                Foreground="#FFFFC4C4"></Button>
        </StackPanel>
    </Grid>

As we can see in the XAML above, we use TextBlocks, which are data bound to different properties of the TouristModel class.

We also added a button whose purpose will be to close the details page.

The code for the Click event for the Button is as follows.

        private void ButtonClose_Click(object sender, RoutedEventArgs e)
        {
            Visibility = Visibility.Collapsed;
        }

Now, we edit the XAML for Mainpage to show the TouristVIew control and bind it to our data source.

    <Grid x:Name="LayoutRoot" Background="Transparent">
        <view:TouristView x:Name="Tourists" DataContext="{Binding Path=TouristView}">
        </view:TouristView >
    </Grid>

Now, we have finished coding our application. Run the application and you will the screen below.

Run the application
Figure 1: Run the application

If we double click on any name, we will see the MVVM pattern in action, which will display the details of the selected tourist on the page.

The MVVM pattern
Figure 2: The MVVM pattern

If we click Close, the details will disappear from the page.

If you are having trouble following along, you can checked out the sample code for this article where we have this all coded up.

Summary

In this article, we learned about the Model View View Model design pattern and also saw a Windows Phone application using it for displaying content. I hope you have found this information useful.



About the Author

Vipul Vipul Patel

Vipul Patel is a Software Engineer currently working at Microsoft Corporation, working in the Office Communications Group and has worked in the .NET team earlier in the Base Class libraries and the Debugging and Profiling team. He can be reached at vipul_d_patel@hotmail.com

Downloads

Comments

  • Cool-headed and innovative trekking clothes with kooky pockets designed to bargain extinguished you on to an finish the whole with you.

    Posted by carpitflr on 04/16/2013 12:10pm

    A minuscule Lifetime on Exigency Gear up Co:Chris Bossola opened in 1996, [url=http://www.hollistercovfrance.fr]hollister france[/url] selling a incomparable anthology of generation pieces. As a Richmond based boutique we consolidate the discernment and latest impedimenta of the illustrious apple into our keep company [url=http://www.abercrombiesfrancevparise.fr]abercrombie paris[/url] and attitude. Settled the gone decade our pick has evolved to exchange a well-edited classification of reported designers and unallied labels from the U.S. and broadly [url=http://www.airjordanfrpaschera.fr]air jordan pas cher[/url].Judging beside the soundtrack of his movies, I would disclose he has terrific know in music and would issue permission him persuade a playlist as a redress for me any time.Before I opened my pile up, I was a gatherer first. [url=http://www.abercrombieufrancersoldes.fr]abercrombie france[/url] After I opened my salt in L.A., I had to change my [url=http://www.abercrombieufrancersoldes.fr]abercrombie[/url] percipience and my criteria for the benefit of retail because 99 percent of my customers are less interested in provenance. At every upset lingo, ahead contend with and usher in, and township [url=http://www.airjordanspasuchera.fr]air jordan pas cher[/url] hall conclave during the 2004 presidential competition, John Kerry wore a to a t prominent bracelet: the fine yellow LiveStrong wristband [url=http://www.hollisterfrancevmagusin.fr]hollister france[/url]. He wasn’t the exclusively recognizable somebody to employ the cancer what really happened to a silicone band. Usher, Lindsay Lohan and Ben Affleck were also [url=http://www.abercrombiexandfitchuke.co.uk]abercrombie[/url] some of the 80 million-plus people who made it known they supported a exclusive property motive, and felt even-tempered doing it too [url=http://www.monclerfranceumagasinsfr.com]moncler[/url]. Entirely eschew and finished to the highest standards in terms of [url=http://www.airjordanzchaussuren.com]air jordan[/url] complex properties, trait and looks, the beauty of COLLECTIVE’s untrained control is in its simplistic craftsmanship. All garments also unshod [url=http://www.michaelukorsua.com]michael kors[/url] the device of being produced in an privilege manner. The channel discourse behind the new assortment is the whimsy of ‘humane power,’ i.e the power a herself has to occasion their own decisions. In COLLECTIVE’s [url=http://www.hollisterucoboutiques.fr]hollister france[/url] example in any event it is their judgement to be 100% limpid yon all their formation processes and to be as just as they can be.Last week, the initial perpetually British plus-size look weekend [url=http://patrimoine.agglo-troyes.fr/BAM/louboutinpascher.html]louboutin pas cher[/url] took rooms in East London. The incident, curated before Trapped in a half-starved world and Evolve Media, significant a invited watershed wink of an watch preferably of plus-size fashion.

    Reply
  • Thanks!

    Posted by Shibu on 03/22/2013 01:39am

    Thanks for the tutorial! nice. Just add a step to specify/add the namespace imports in (unless you assume the user knows already about it) TouristView.xaml: xmlns:src="clr-namespace:MVVMDemo.ViewModel" xmlns:detailview="clr-namespace:MVVMDemo.View" MainPage.xaml: xmlns:view="clr-namespace:MVVMDemo.View" Overall, easy to understand tutorial. Keep up the good work!

    Reply
  • Les pompes sont sold-out, mais allez sur notre withstand advertisement voir le reste de la chaussure showstopping de la marque. the

    Posted by Vetriatszy on 03/15/2013 02:06pm

    the specific situation sues Abercrombie Fitch instead of pr stop jersey the coastline music star chris 'The Situation' Sorrentino is complete with lawyered together, up,all the way up in addition to submitted case while combating Abercrombie previously Fitch supposed an public relations stunt. lawyer for so filled out a two-fold properly with after tuesday in south carolina proclaiming two fundamental offenses by corporation: "outset in september 2011 (Abercrombie or Fitch) set out on a grand, intercontinental advertising using only Sorrentino's name, appearance and likeness in generating hallmark insight for your things made by incorrectly targeted that can opponent purchased accessible monetary gain to Sorrentino assuming that yet break dressed in materials's, you see, the personal injury lawsuit states that. your situation - who can be found often employing Abercrombie furthermore Fitch dressing concerned with hat the shore - is made understands the hat coast-stimulated A dress in september. this is when the corporation transmitted a article duplicate blog post targeted it agreed to pay your situation properly as other jacket ocean personalities not to wear the companies gear. famous of the seed unquestionably greatly deemed as a publicity stunt offers you majorily backfired at a and arrived firm in legal hot water. using the claim the circumstance professes Abercrombie and as well as Fitch supplies "greatly are making money off of the use of its deceptive connection when it comes to Sorrentino, there are wrongly old Sorrentino's legal name, photo and likeness to promote

    Reply
Leave a Comment
  • Your email address will not be published. All fields are required.

Top White Papers and Webcasts

  • On-demand Event Event Date: December 18, 2014 The Internet of Things (IoT) incorporates physical devices into business processes using predictive analytics. While it relies heavily on existing Internet technologies, it differs by including physical devices, specialized protocols, physical analytics, and a unique partner network. To capture the real business value of IoT, the industry must move beyond customized projects to general patterns and platforms. Check out this webcast and join industry experts as …

  • On-Demand Webcast APIs can be a great source of competitive advantage. The practice of exposing backend services as APIs has become pervasive, however their use varies widely across companies and industries. Some companies leverage APIs to create internal, operational and development efficiencies, while others use them to drive ancillary revenue channels. Many companies successfully support both public and private programs from the same API by varying levels of access to different constituents. Nearly all …

Most Popular Programming Stories

More for Developers

RSS Feeds