If you are building a Windows Phone 7 application it is very likely that you are going to incorporate either the Panoramic or Pivot layouts in your app.  In most cases when you are building these your panels/pivots are fairly static.  However, what do you do when the number of panels/pivots needs to changed based on environmental setting (ie data or user preferences)?

One solution is to use the code behind and manually create your panels/pivots.  However, I personally feel this method is clunky and fugly.  I would rather stay as close to the MvvM pattern as possible as well as harness the power of Binding to build my UI on the fly based on values inside my view model.  In this post we are going to take a look at how simple it is to bind your View Model to your UI and have your panels/pivots built for you.

Create the View Model’s to Bind to the UI

Main View Model – This is the one bound directly to the UI

    public class DashboardViewModel : ViewModelBase
    {
        // This is an internal class and does not change the implementation...
        private readonly IDashboardService _dashboardService;

        public DashboardViewModel( IDashboardService dashboardService )
        {
            _dashboardService = dashboardService;
        }


        public string Title 
        {
            get { return _dashboardService.DashboardTitle; } 
            set 
            { 
                _dashboardService.DashboardTitle = value;
                RaisePropertyChangedEventImmediately( "Title" );
            }
        }

        public ObservableCollection PanelCollection
        {
            get { return _dashboardService.PanelItems; }
            set
            {
                _dashboardService.PanelItems = value;
                RaisePropertyChangedEventImmediately( "PanelCollection" );
            }
        }
    }

In the class above there are 2 properties we need to know about. 

1. Title – This is the property in the VM which will create the actual title for the entire Panorama control
2. PanelCollection – This is the property in the VM which contains the list of items which will be used to generate each panel/pivot in the UI

Panel View Model – These are the ones which will build each panel/pivot

    public interface IDashboardPanelItemViewModel
    {
        DashboardPanelType DashboardPanelType { get; set; }

        string DashboardTitle { get; set; }

        ObservableCollection<IDashboardPanelListItemViewModel>: PanelListItems { get; set; }
    }

In the class (actually it is an interface) above there are 3 properties we need to worry about

1. DashboardPanelType – This really does not change how the panels are bound to the UI but rather is used to determine how the actual panel data is displayed (future post on this)
2. DashboardTitle – This is the property which will create the text title for the panel/pivot
3. PanelListItems – This is the property which will contain the individual data points which will be displayed on the created panel/pivot

Create the xaml to hookup the binding

When binding the Main View Model (the first class above) to the UI we need to do 2 things

1. Need to bind our main View Model to the Panorama (or PIvot)
   
2. Need to bind the individual list item from the element in PanelCollection to the panel
   

When looking at the 2 snippets above you want to pay attention to the ItemsSource Property in both.

The End Result (bit fugly, but this is for demo only)

As you can using Binding to create your panels/pivots based on the data in your view model is super simple and requires NO code behind code to accomplish.  Please be aware though that you should NOT generate too many panels/pivots as that is a massive UI design smell.

Till next time,