Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries. Thanks for all your past and future contributions.

Revision as of 07:10, 16 September 2013 by hamishwillee (Talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

How to make the pivot control app title match inbuilt apps

From Wiki
Jump to: navigation, search

This article explains how two approaches for making the application title match that of standard Windows Phone apps.

WP Metro Icon UI.png
SignpostIcon XAML 40.png
WP Metro Icon WP8.png
SignpostIcon WP7 70px.png
Article Metadata
Code Example
Source file:
Tested with
SDK: Windows Phone 7.1, Windows Phone 8.0
Devices(s): Nokia Lumia 920
Created: ArchieCoder (11 Sep 2012)
Reviewed: SB Dev (15 Sep 2013)
Last edited: hamishwillee (16 Sep 2013)



If you create a "Windows Phone Application" or a "Windows Phone Pivot Application" in Visual Studio the application title is not displayed as it is the built-in metro applications of the Windows Phone 7. You can verify this by creating a "Windows Phone Pivot Application" and changing the title to match one of the in-built apps.

Compare screenshots of the Settings App and a user-created copy below. Note the differences in the "SETTINGS" application title - both in size and hue.

How to match the native style

To approximate the "native app" title design you can use the following style for your pivot control:

<Style x:Key="PivotStyle" TargetType="controls:Pivot">
<Setter Property="TitleTemplate">
<TextBlock FontFamily="{StaticResource PhoneFontFamilySemiBold}" FontSize="{StaticResource PhoneFontSizeMedium}" Margin="-1,-1,0,-3" Text="{Binding}" />

Apply the style:

<controls:Pivot Title="SETTINGS" Style="{StaticResource PivotStyle}">

The same issue happens with every page (PhoneApplicationPage). The next section provides an alternative to applying the style to all pages in the application.

The TitleControl

Instead of applying the fix to all the pages of an application you can instead use the TitleControl (code is available for download at the end of the article).

Two of the goals behind the TitleControl were:

  1. Get rid of all the XAML code that displays the header.
  2. Remove the unnecessary extra grid that displays the header and the content. Remember, loading speed improves if there are less containers like panels, grids, or stack panels in a page.

So, instead of having the following XAML code:

<Grid x:Name="LayoutRoot" Background="Transparent">
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
<!--TitlePanel contains the name of the application and page title-->
<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
<TextBlock x:Name="ApplicationTitle" Text="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}"/>
<TextBlock x:Name="PageTitle" Text="page name" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<TextBlock Text="Hello World" />

The code can be reduced to:

<Grid x:Name="LayoutRoot" Background="Transparent">
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<Controls:TitleControl TitleName="SETTINGS" PageName="theme" />
<TextBlock Grid.Row="1" Margin="24,0" Text="Hello World" />

If you have a brand theme, you can override the color and the font directly in the TitleControl or you can add additional dependency properties to the control.

Download the sample project that includes the TitleControl:

Version Hint

Windows Phone: [[Category:Windows Phone]]
[[Category:Windows Phone 7.5]]
[[Category:Windows Phone 8]]

Nokia Asha: [[Category:Nokia Asha]]
[[Category:Nokia Asha Platform 1.0]]

Series 40: [[Category:Series 40]]
[[Category:Series 40 1st Edition]] [[Category:Series 40 2nd Edition]]
[[Category:Series 40 3rd Edition (initial release)]] [[Category:Series 40 3rd Edition FP1]] [[Category:Series 40 3rd Edition FP2]]
[[Category:Series 40 5th Edition (initial release)]] [[Category:Series 40 5th Edition FP1]]
[[Category:Series 40 6th Edition (initial release)]] [[Category:Series 40 6th Edition FP1]] [[Category:Series 40 Developer Platform 1.0]] [[Category:Series 40 Developer Platform 1.1]] [[Category:Series 40 Developer Platform 2.0]]

Symbian: [[Category:Symbian]]
[[Category:S60 1st Edition]] [[Category:S60 2nd Edition (initial release)]] [[Category:S60 2nd Edition FP1]] [[Category:S60 2nd Edition FP2]] [[Category:S60 2nd Edition FP3]]
[[Category:S60 3rd Edition (initial release)]] [[Category:S60 3rd Edition FP1]] [[Category:S60 3rd Edition FP2]]
[[Category:S60 5th Edition]]
[[Category:Symbian^3]] [[Category:Symbian Anna]] [[Category:Nokia Belle]]

This page was last modified on 16 September 2013, at 07:10.
110 page views in the last 30 days.