Changing the Background for Panorama Title and Panorama Header

Control styling is an important feature in XAML and all controls that come with any framework based on it are subject to styling. Panorama is no exception to this and although it can be styled, it is not immediately obvious how to do it. For example, if we want to add background color to the panorama title and the panorama item header (similar to the Facebook app for WP7), changing the background for either control will not do the trick.

Then there are Panorama.TitleTemplate or PanoramaItem.HeaderTemplate and you can change them with the following code:

<Style TargetType="controls:Panorama">
    <Setter Property="TitleTemplate">
        <Setter.Value>
            <DataTemplate>
                <Border Background="AliceBlue">
                    <TextBlock Text="{Binding}" />
                </Border>
            </DataTemplate>
        </Setter.Value>
    </Setter>
</Style>
<Style TargetType="controls:PanoramaItem">
    <Setter Property="HeaderTemplate">
        <Setter.Value>
            <DataTemplate>
                <Border Background="AliceBlue">
                    <TextBlock Text="{Binding}" />
                </Border>
            </DataTemplate>
        </Setter.Value>
    </Setter>
</Style>

But the result is not satisfying:

The aforementioned templates are quite limited in what you can do with them. To achieve the desired background color style, you need to edit the default control template. However, although you can’t get it in Visual Studio 2010, Expression Blend has that capability.

To extract the default control template, we will open the project in Expresion Blend via the inbuilt action inside Visual Studio. Right click on the project node in Solution Explorer and click the Open in Expression Blend menu option. In the Objects and Timeline panel, find the Panorama node. In the context menu for the node, select the Edit Template->Edit a Copy menu option. Simply click the OK button to use the default settings. Do the same for PanoramaItem, save changes and close Blend if you are more comfortable working in Visual Studio like me.

Your MainPage.xaml will reload with the new changes and you will have two control templates defined in the page’s resources: PanoramaControlTemplate1 and PanoramaItemControlTemplate1. Simply add the following style to set the control template for all PanoramaItems:

<Style TargetType="controls:PanoramaItem">
    <Setter Property="Template" Value="{StaticResource PanoramaItemControlTemplate1}" />
</Style>

To set the background for the title layer, add a rectangle between the PanningBackgroundLayer and PanningTitleLayer:

</controlsPrimitives:PanningBackgroundLayer>
<Rectangle Fill="LightBlue" Grid.Row="0" />
<controlsPrimitives:PanningTitleLayer ...

To set the background for the panorama item’s header layer, add a rectangle before the ContentControl:

<Rectangle Grid.Row="0" Fill="LightBlue" />
<ContentControl x:Name="header"

The results are not immediately satisfying:



You need to remove the Margin for the outermost Grid element in the PanoramaItem control template. However, you need to adjust it for ContentControl and ContentPresenter. Increase the left margin from 10 to 22 for ContentControl and wrap the ContentPresenter inside a Grid with Margin=12,0,0,0". The final result is:

Now you can go and style the panorama for your application. The same procedure can be used for styling the Pivot control, although some details may vary. Since this code is a bit hackish and you do not want to hard code your background color, you might consider creating a new control with a dependency property for setting the background color.

Go and design your unique panorama-styled applications.