Wednesday, December 04, 2013

Formatting the page title / application name

Have you ever looked at the text at the top of the page in an app and wondered why it didn't look quite right? Let me show you why.
Take a look at the three versions of "SETTINGS" here. They show how the page or application name is often displayed at the top of a page.



The one on the left is how it looks with the default Silverlight page template. The middle one is how it looks in the native settings application. The third is how I've reformatted the TextBlock in Silverlight.
Notice how the default Silverlight template is smaller and lighter than the native one.
Here's how that default template looks.

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

[Line wrappings added to aid readability here - it's a single line in the template]

Firstly notice the redundant Margin that's specified in XAML. This is identical to the margin that's included in the PhoneTextNormalStyle definition. (For more on what's in the predefined styles see the Theme Resources for Windows Phone on MSDN.) The TextBlock would be displayed identically if the explicit margin definition was removed.
The PhoneTextNormalStyle template is not what we want here.

Here's how to adjust the styling so it looks more appropriate.

    <TextBlock Text="SETTINGS"
               FontFamily="{StaticResource PhoneFontFamilySemiBold}"
               FontSize="{StaticResource PhoneFontSizeMedium}"
               Margin="{StaticResource PhoneHorizontalMargin}"/>

Much better.

But, you may ask, what about the pivot control? That includes a Title template that by default is equivalent to the TextBlock we've been looking at.
In the below image I've added this as a second row on the right hand side. You'll notice it's identical to my above defined adjusted styling.


Make your app look like the native look and feel with the above FontFamily, FontSize and Margin settings. Fix templates, don't just rely on them or assume the defaults provided by the SDK are perfect.


1 comment:

  1. Anonymous8:51 pm

    Thanks for the tip. Best wishes.

    ReplyDelete

Note: only a member of this blog may post a comment.