Freigeben über

Portable Class library, MVVM and other pretty things

  • Artikel

When developers want to create a navigation architecture on Windows Phone Apps they need to take care about how they want to link the pages with the Business Logic and the Data.

One of the most extended programming methodologies on Windows Phone 8 and Windows 8 is MVVM (Model – View - ViewModel) where you can separate the Entities from the Business Logic (your ViewModel) and the UI (your View).

When I’m developing an app for Windows 8 and Windows Phone 8 what I do is create a Portable Class Library (not available on VS2012 Express version but in higher ones) and write inside my Models and ViewModels adding a reference to my project later on and just implement the Views on the W8 or WP8 project. Here an example:

 

image

 

First to understand what I have inside MyPlayersLibrary:

The Model

  • image PlayerClass: I have a simple player class with 3 string properties and is inheriting from BindableBase class. This class will help me to implement the INotifyPropertyChanged interface in every property, just like this:

    private string description; public string PlayerDescription      {          get { return description; }          set { this.SetProperty(ref description, value); }      }

Once I have the PlayerClass, I can create my collection of Players on my ViewModel, and use this ViewModel as DataContext and the Collection as my ItemsSource for my GridView, ListView or FlipView on Windows 8 or my ListBox or LongListSelector on Windows Phone 8.

The View Model

The second thing to understand is the ViewModel, where I have my collections:

public class PlayersViewModel {     private ObservableCollection<Player> barcelonaPlayers = new ObservableCollection<Player>()     {            new Player{PlayerName="Muniesa", PlayerImage=@"Assets/Players/1.jpg", PlayerDescription="Lorem ipsum"},          new Player{PlayerName="Abidal", PlayerImage=@"Assets/Players/2.jpg",PlayerDescription="Lorem"},          new Player{PlayerName="Adriano", PlayerImage=@"Assets/Players/3.jpg",PlayerDescription="Lorem"},          new Player{PlayerName="Alexis", PlayerImage=@"Assets/Players/4.jpg",PlayerDescription="Lore"},          new Player{PlayerName="Alves", PlayerImage=@"Assets/Players/5.jpg",PlayerDescription="Lorem"},          new Player{PlayerName="Bartra", PlayerImage=@"Assets/Players/6.jpg",PlayerDescription="Lorem "},          new Player{PlayerName="Busquets", PlayerImage=@"Assets/Players/7.jpg",PlayerDescription="Lorem"},          new Player{PlayerName="Cuenca", PlayerImage=@"Assets/Players/8.jpg",PlayerDescription="Lorem"},          new Player{PlayerName="Dos Santos", PlayerImage=@"Assets/Players/9.jpg",PlayerDescription="Lorem"},          new Player{PlayerName="Fabregas", PlayerImage=@"Assets/Players/10.jpg",PlayerDescription="Lorem"},        new Player{PlayerName="Iniesta", PlayerImage=@"Assets/Players/11.jpg",PlayerDescription="Lorem"},        new Player{PlayerName="Jordi Alba", PlayerImage=@"Assets/Players/12.jpg",PlayerDescription="Lorem"},        new Player{PlayerName="Mascherano", PlayerImage=@"Assets/Players/13.jpg",PlayerDescription="Lorem"},        new Player{PlayerName="Messi", PlayerImage=@"Assets/Players/14.jpg",PlayerDescription="Lorem"},        new Player{PlayerName="Montoya", PlayerImage=@"Assets/Players/15.jpg",PlayerDescription="Lorem"},        new Player{PlayerName="Pedro", PlayerImage=@"Assets/Players/16.jpg",PlayerDescription="Lorem"},        new Player{PlayerName="Pinto", PlayerImage=@"Assets/Players/17.jpg",PlayerDescription="Lore"},        new Player{PlayerName="Pique", PlayerImage=@"Assets/Players/18.jpg",PlayerDescription="Lorem"},        new Player{PlayerName="Puyol", PlayerImage=@"Assets/Players/19.jpg",PlayerDescription="Lorem"},

    };

    public ObservableCollection<Models.Player> BarcelonaPlayers     {         get { return barcelonaPlayers; }     } }

The View

My Favorite Players W8 is just a Windows Store project based on XAML, where I’ve defined the main UI with a GridView that is using as DataContext my PlayersViewModel and as ItemsSource the RealMadridPlayers collection I have on my PlayersViewModel.

My Favorite Players Windows Phone 8 project is based on XAML as well and I have a LongListSelector using as DataContext my PlayersViewModel and as ItemsSource the BarcelonaPlayers collection that I have on my PlayersViewModel.

 

image image

 

Just to have this experiences what I have to do is open one of the templates I have on Visual Studio (here I’m using Split Template for W8 and Panorama Template for Windows Phone 8) and perform the next steps:

  1. Add a reference to your portable class library on both projects.
  2. Click on the list (GridView or LongListSelector)
  3. Go to properties and click on new DataContext on the properties tab
  4. Select PlayersViewModel as new DataContext
  5. Go to the properties tab again and click on the small white square that you will see just on the right of the ItemsSource property and in the context menu that will appear select CreateDataBinding, just like this:
 image

image

Just to finish the app, what I do is to modify the ItemTemplate for the UIElements on the list:

  1. Right click on the GridView (or LongListSelector on Windows Phone 8)
  2. Select Edit Additional Template –> Edit Item Template –> Edit a copy
  3. Create the copy
  4. Begin binding every element on the template with every property on the Collection Items.

 

Here you can find the complete solution

Interesting links:

Happy coding Smile

Eduardo Ortega – Technical Evangelist
Visit our community Windows8Warriors
Visit our page Windows8Warriors