Visually Located | Create a consistent background for your Panorama Title

I was helping out a fellow Windows Phone developer with some app testing today and noticed that his app had a Panorama control with a background color that had a break between the last page and the first page.

Here’s an example using the “Windows Phone Panorama App” project template.

This looks very weird and is distracting from the real content. This problem is very similar to the Changing the background color of your pivot headers post I did. You cannot just change the background within the TitleTemplate. The above images were created by modifying the TitleTemplate of the Panorama.

     <controls:Panorama.TitleTemplate>

        <DataTemplate>

            <Border Background="Blue">

                <TextBlock Text="{Binding}" Width="800"

                           FontSize="80" Margin="0,75,0,0"/>

            </Border>

        </DataTemplate>

    </controls:Panorama.TitleTemplate>

Note: The FontSize, Width and Margin were modified to make the title smaller.

Once again it’s Blend (or now VS2012!) to the rescue. Right click the Panorama and select Edit Template –> Edit a Copy… Much like the Pivot Header, the Panorama has a control for rendering the Title.

    <controlsPrimitives:PanningTitleLayer x:Name="TitleLayer" CacheMode="BitmapCache" 

                                          ContentTemplate="{TemplateBinding TitleTemplate}" 

                                          Content="{TemplateBinding Title}" 

                                          FontSize="187" 

                                          FontFamily="{StaticResource PhoneFontFamilyLight}" 

                                          HorizontalAlignment="Left" 

                                          Margin="10,-76,0,9" 

                                          Grid.Row="0"/>

You could try setting the Background property of the PanningTitleLayer but will quickly find that it does nothing. You could modify the style of the PanningTitleLayer itself, but I find it is much easier to just add a Border immediately before the PanningTitleLayer.

    <Border Background="Blue" Grid.Row="0"/>

    <controlsPrimitives:PanningTitleLayer x:Name="TitleLayer" CacheMode="BitmapCache" 

                                          ContentTemplate="{TemplateBinding TitleTemplate}" 

                                          Content="{TemplateBinding Title}" 

                                          FontSize="187" 

                                          FontFamily="{StaticResource PhoneFontFamilyLight}" 

                                          HorizontalAlignment="Left" 

                                          Margin="10,-76,0,9" 

                                          Grid.Row="0"/>

Another option is to wrap the PanningTitleLayer with a Border control. With this new Border the background is consistent across all items of the Panorama.

Related posts