MVVM WP7 intro with mvvm light toolkit

Posted: 4th October 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 . outlet iphone 8 case online 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). iphone 8 case for sale 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 :


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). iphone 8 case outlet uk Now if you navigate to ViewModel folder , you will find a class named ViewModelLocator.cs. iphone 8 case for sale 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). cheap iphone xr case online 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). cheap iphone xr case outlet 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. cheap iphone 8 case online 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 :) .