Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Changing the Background for Panorama Title and Panorama Header

DZone's Guide to

Changing the Background for Panorama Title and Panorama Header

· Mobile Zone
Free Resource

Launching an app doesn’t need to be daunting. Whether you’re just getting started or need a refresher on mobile app testing best practices, this guide is your resource! Brought to you in partnership with Perfecto

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.

 

Keep up with the latest DevTest Jargon with the latest Mobile DevTest Dictionary. Brought to you in partnership with Perfecto.

Topics:

Published at DZone with permission of Toni Petrina, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

THE DZONE NEWSLETTER

Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

X

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}