Derik Whittaker

Syndication

News


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,


Posted 08-22-2012 1:56 PM by Derik Whittaker
Filed under: , , ,

[Advertisement]

About The CodeBetter.Com Blog Network
CodeBetter.Com FAQ

Our Mission

Advertisers should contact Brendan

Subscribe
Google Reader or Homepage

del.icio.us CodeBetter.com Latest Items
Add to My Yahoo!
Subscribe with Bloglines
Subscribe in NewsGator Online
Subscribe with myFeedster
Add to My AOL
Furl CodeBetter.com Latest Items
Subscribe in Rojo

Member Projects
DimeCasts.Net - Derik Whittaker

Friends of Devlicio.us
Red-Gate Tools For SQL and .NET

NDepend

SlickEdit
 
SmartInspect .NET Logging
NGEDIT: ViEmu and Codekana
LiteAccounting.Com
DevExpress
Fixx
NHibernate Profiler
Unfuddle
Balsamiq Mockups
Scrumy
JetBrains - ReSharper
Umbraco
NServiceBus
RavenDb
Web Sequence Diagrams
Ducksboard<-- NEW Friend!

 



Site Copyright © 2007 CodeBetter.Com
Content Copyright Individual Bloggers

 

Community Server (Commercial Edition)