MVVM WP7 intro with mvvm light toolkit

Posted: 4th August 2011 by Vladimir in .NET
Tags: , , , ,

Mvvm therm stands for “Model View View Model” , an architectural pattern used in any language capable of  data binding.

I’m not going to explain mvvm concept again, because the net is full with articles about it . Furthermore i believe the best “noobish” tutorial explaining  it is found here.

Ok, so let’s get started. Mvvm Light Toolkit is a Collection of templates integrated in Visual Studio 2010 , for .Net 4 library with some little support for older versions, made by this awesome guy named Laurent Bugnion . His toolkit saves you for a lot of work if u wanna mvvm some :) .

To install this toolkit and get started u should click  here.

WP7. With the revolution of .Net 3 and mostly 4, all Silverlight software developers  have become  mobile software developers  by night, that is Windows Phone 7, and now 7.1 (mango renamed) so it’s like really easy for a basic Silverlight developer to write Phone apps , and for that to be complete , mvvm do the job :) .

So, after you’ve installed  the toolkit, and Wp7 developer tools you are ready to go. First thing to do is start VS and create a new project like in the picture below.

 

After you click ok, in Solution Explorer you will see a folder named Model, one Named ViewModel, a MainPage.xaml and App.xaml (note there are more items in solution explorer, but those won’t bother you). Model is empty because this basic “Hello World Application” does not need Models.

 

So, starting with App.xaml because this is the main binding settings file.

Here we find 2 important  declares :

xmlns:vm="clr-namespace:MvvmLight1.ViewModel"

This set your xml namespace to ViewModelfolder

<Application.Resources>
        <vm:ViewModelLocator x:Key="Locator"
                             d:IsDataSource="True" />
</Application.Resources>

This sets all of your bindings root to a property named Locator (this is important). Now if you navigate to ViewModel folder , you will find a class named ViewModelLocator.cs. This class contains declarations of all the ViewModels classes , so through this class you will gain access from views to viewmodels. At start you will only have declaration of the MainViewModel , but using the mvvmlocatorproperty code snippet you can simply add a new property (we will see how that works). Now if you open MainPage.xamlyou will see a bunch of declarations in the top section of the page, the one that do the trick is :

DataContext="{Binding Main, Source={StaticResource Locator}}"

through this you set your DataContext property to a property named Main (from the ViewModelLocator.cs) and you see that the Source is set to a StaticResource named Locator (the one declared in App.xaml). This tells xaml to bind this MainPage.xaml binding root to MainViewModel.cs class. So now that we have this running, you can explore the xaml content, and see 3 TextBlock’s

<TextBlock x:Name="ApplicationTitle"

			           Text="{Binding ApplicationTitle}"

			           Style="{StaticResource PhoneTextNormalStyle}" />

<TextBlock x:Name="PageTitle"

			           Text="{Binding PageName}"

			           Margin="-3,-8,0,0"

			           Style="{StaticResource PhoneTextTitle1Style}" />

	<TextBlock Text="{Binding Welcome}"

			           Style="{StaticResource PhoneTextNormalStyle}"

			           HorizontalAlignment="Center"

			           VerticalAlignment="Center"

			           FontSize="40" />

in the left screen of MainPage.xaml, you see a pretty phone with 3 texts on it.

(MVVM LIGHT, My page, Welcome to MVVM Light).

Now the first question is : WHERE THE $%$# THIS CAME FROM ?

To answer this just go to ViewModel folder and open MainViewModel.cs class. The first thing you’ll see is that the declaration of the class is

public class MainViewModel : ViewModelBase

Remember when i’ve told you this toolkit helps you a lot? Now i can properly answer to this. The ViewModelBase is a base class witch all ViewModels must inherit it. It contains definitions for NotifyPropertyChange , IMessenger and other stuff, that resolve the update bindings and communication between ViewModels. This really saves you for a lot of work.

(if you don’t believe me, you can just right click ViewModelBase and select Go to Definition ;) )

Continue with this class, you see 3 properties :

public string ApplicationTitle
        {
            get
            {
                return "MVVM LIGHT";
            }
        }

        public string PageName
        {
            get
            {
                return "My page:";
            }
        }

        public string Welcome
        {
            get
            {
                return "Welcome to MVVM Light";
            }
        }

I bet you figured out now what this do :) . Note that this are just “getters” properties , because they never change.

In the next tutorial i will show you how to make your application more complex.

That’s it for now .

Happy Coding ;) .