Derik Whittaker



Using Binding to create Panels/Pivots in your WP7 Application

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; } 
                _dashboardService.DashboardTitle = value;
                RaisePropertyChangedEventImmediately( "Title" );

        public ObservableCollection PanelCollection
            get { return _dashboardService.PanelItems; }
                _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,

Posted 04-19-2011 5:19 AM by Derik Whittaker



Tony wrote re: Using Binding to create Panels/Pivots in your WP7 Application
on 05-24-2011 4:55 PM

In the image you are Binding the Telerik control to DashBoardListItems, yet that isn't in your code all all. Did you mean PanelListItems?

About The CodeBetter.Com Blog Network
CodeBetter.Com FAQ

Our Mission

Advertisers should contact Brendan

Google Reader or Homepage Latest Items
Add to My Yahoo!
Subscribe with Bloglines
Subscribe in NewsGator Online
Subscribe with myFeedster
Add to My AOL
Furl Latest Items
Subscribe in Rojo

Member Projects
DimeCasts.Net - Derik Whittaker

Friends of
Red-Gate Tools For SQL and .NET


SmartInspect .NET Logging
NGEDIT: ViEmu and Codekana
NHibernate Profiler
Balsamiq Mockups
JetBrains - ReSharper
Web Sequence Diagrams
Ducksboard<-- NEW Friend!


Site Copyright © 2007 CodeBetter.Com
Content Copyright Individual Bloggers


Community Server (Commercial Edition)