MVVM Walk Through for Windows Phone

Today's post is written by Kiran Balijepalli, a Microsoft Technical Evangelist for Windows Phone. He has more than 16 years of global technology leadership experience in desktop, web, cloud and mobile platforms. You can find all of Kiran's Microsoft Student blogs here, and he can be found on Twitter as @KiranKBee.

In the previous blog we understood the concept of MVVM and blendability of Visual Studio family of tools. As a continuation to the previous exercise let us just create one data set for the myDataBoundApp.sln. Right click on the MainPage.xaml and select the “Open in Blend” option from the menu options. This will open the MainPage.xaml in Blend (as illustrated below) if you do not see the“Data“ window as indicated by the yellow arrow click on the window menu item on the top ribbon and select “Data” from the drop-down.

Click on the small add new database and proceed to create a new MyAppDesignData sample as shown in this illustration:

Notice the other options of Sample data creation we will discuss in future as the need arises.

1. Blend creates a list of nodes under the data tab which includes MyAppDesignData and a collection. Click on the MyAppDesignData expansion icon and select the Collection node and rename it as “Albums“ this is nothing but a collection property which will represent the list of Albums that I want to use in myDataBoundApp. Now perform the below 3 steps:
2. Under the Albums go ahead and rename property 1 as “Name.” Click on the far right drop-down Type icon, select Type as String and Format as Name.
3. Rename property2 as Publisher, and select type as string, Format as Company Name. Click on the Top-Right corner + icon to add another Property rename it as Year of Publishing, select format as String and Type as Date.

… to create a design time set of Album objects, each of which has 3 properties: Name, Publisher Company, and Year of Publishing. The next step is to design the layout of the page with this new design time data see you in the next blog.

Explore: Click on the Edit sample values and explore further. In the next blog we will dig deeper into the depth of MVVM.