Page Header Styles

The page header is the small text you see across the top of most apps, often in all uppercase. When you create a new Windows Phone app from the default templates you’ll get something like this created in your MainPage.xaml

<TextBlock Text=”MY APPLICATION” Style=”{StaticResource PhoneTextNormalStyle}” Margin=”12,0″/>

The annoying thing about this is this is not the same format as built-in apps. The font size is wrong and so is the weight. Rather than manually fixing up every instance I define the following style in the App.xaml:

<Style x:Name=”PhoneTextPageHeaderStyle” BasedOn=”{StaticResource PhoneTextNormalStyle}” TargetType=”TextBlock”>
   <Setter Property=”FontSize” Value=”{StaticResource PhoneFontSizeMedium}”/>
   <Setter Property=”FontFamily” Value=”{StaticResource PhoneFontFamilySemiBold}”/>
</Style>

Then my page XAML becomes:-

<TextBlock Text=”MY APPLICATION” Style=”{StaticResource PhoneTextPageHeaderStyle}”/>

My app is now consistent with built-in apps!

[Updated with simplified Style XAML removing hard-coded font size]