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.

Last updated by at .

  • Pingback: Changing the background for panorama title and panorama header

  • Pingback: Changing the background for panorama title and panorama header « Silverlight News

  • Bruno

    Hello,
    I coudn’t find where I need put the .
    I’m using the vs2012, are there diference?

    The Tag controlsPrimitives:PanningBackgroundLayer doesn’t exists in my project.

    • http://www.tonicodes.net/blog/ Toni Petrina

      Hi Bruno, I am sorry you have problems. Did you extract the control template for the Panorama control? Can you show it to me?

      • Bruno

        I did the same thing do you show. But didn’t work.
        Look my steps in the pictures.

        The string ‘Teste’ is diferent in images because I cut the real string.

        Can you share one project template with only this?

        • http://www.tonicodes.net/blog/ Toni Petrina

          Hi Bruno, I apologize for not answering earlier. I was busy and away on the conference. You can find the source code for the sample on github, I pushed it moments ago: https://github.com/tpetrina/blogcode/blob/master/BlogResearch/PanoramaBackgroundApp/MainPage.xaml. I hope that this will help you. If not, feel free to reach me again.

          • Bruno

            Don’t worry, the problem is my blend. I don’t know why, when I’m creating the templates of Panorama and Panorama item, the blend was not creating the styles.
            I did need copy from another sample, and now it works.
            Thank you.

          • http://www.tonicodes.net/blog/ Toni Petrina

            I am glad it finally works. I would like to see your final design as I am interested in what you are doing :) If that is no problem with you. :)
            Cheers

          • Bruno

            Hi Toni, of course that I can show you. It’s my first wp8 software and I’m loving do it. can you give me your skype user? We can talk about softwares.

          • http://www.tonicodes.net/blog/ Toni Petrina

            Contact me via the Contact form on this blog :)

          • Bruno

            Hi Toni,
            see my image.This border is showing when I’m moving between the panoramaItems.

            And in my phone, there is border all the time.
            Do you know why?

          • http://www.tonicodes.net/blog/ Toni Petrina

            Hmm, maybe you need to extend background with negative margin.
            Does that happen on every device you have?

  • Ján Janúšek

    Thank you :) You did help me and I appreciate it. Very good article