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:
First to understand what I have inside MyPlayersLibrary:
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
public ObservableCollection<Models.Player> BarcelonaPlayers
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.
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:
Just to finish the app, what I do is to modify the ItemTemplate for the UIElements on the list:
- Right click on the GridView (or LongListSelector on Windows Phone 8)
- Select Edit Additional Template –> Edit Item Template –> Edit a copy
- Create the copy
- Begin binding every element on the template with every property on the Collection Items.
Here you can find the complete solution