Data Binding to the Panorama control in WP7

Data Binding to the Panorama control in WP7:
When you build a Windows Phone 7 (soon to be 8) application, one of the screen layouts you can use is the Panorama.  In most cases the number of pages in the panorama is hard defined in code but there is the occasion when you will add pages dynamically  based on binding.  In this post we are going to take a look at how we can do this.
Step 1 – Setup the ItemSource binding
As with all other binding to list items you can setup your ItemSource binding  as below:

ItemsSource="{Binding SportDrills}" 

The SportDrills is simply a property off of my main VM and it contains the needed data for both the header and item template

Step 2 – Setup the Header DataTemplate

When setting up the Panorama it is important to have a header, binding to this header is not too hard and only requires a few lines of xaml

<controls:Panorama.HeaderTemplate>
    <DataTemplate>
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="*" />
                <RowDefinition Height="auto" />
            </Grid.RowDefinitions>
            <TextBlock Text="{Binding SportName}" />
            <TextBlock Grid.Row="1" Text="{Binding DrillCount}" 
                        Margin="15,3"
                        Style="{StaticResource PanaramaHeaderAccentTextBlockStyle}" />
        </Grid>
    v/DataTemplate>
</controls:Panorama.HeaderTemplate>

In the xaml above the important part to pay attention to is the Panorama.HeaderTemplate, this is where you can define you header for the given panel.  In my example I am creating a bit more complex header as i am adding a second level of data.  If you only want a single line of text of course you can skip the grid and just have a TextBlock statement.

Step 3 – Setup the ItemTemplate DataTemplate

Now that we have our header setup it is time to setup the body of the panel.  To do this you will want to do something like below.

<controls:Panorama.ItemTemplate>:               
    <DataTemplate>:
        <Grid>:
            <ListBox Margin="0,0,-12,0" ItemsSource="{Binding Drills}"                          
      telerik:InteractionEffectManager.IsInteractionEnabled="True" 
      ItemContainerStyle="{StaticResource StretchableListBoxItemStyle}">:

                <ListBox.ItemTemplate>:
                    <DataTemplate>:
                        <Grid>:
                            <Border 
       VerticalAlignment="Center"
       HorizontalAlignment="Center"
       Width="36" Height="36">:

                            </Border>:
                            <TextBlock Grid.Column="1" Grid.Row="0" Text="{Binding Name}" TextWrapping="Wrap" Style="{StaticResource ListBoxHeaderStyle}"/>:

                        </Grid>:
                    </DataTemplate>:
                </ListBox.ItemTemplate>:
            </ListBox>:
        </Grid>:
    </DataTemplate>:
</controls:Panorama.ItemTemplate>:

In the XAML above the important part to pay attention to is the Panorama.ItemTemplate, this is where you can defined your content for the panel.  In my example I am simply listing data, but you can of course do anything you want.

As you can see binding to the ItemSource and creating panels on the fly via binding is very simple, yet very powerful

Till next time,

DIGITAL JUICE