Windows Phone Templates are Wrong (Updated)

Whether you’re creating a Windows Phone app for the first time or for the fiftieth time, chances are you’re going to use the project and item templates built into Visual Studio as a starting point. That’s what they’re there for: to give you a trust-worthy starting point form which you can build your apps. So why do they look like something’s off?

BasicPageOverlay

Update 1: Included section for Pivots having improper style.

Update 2: Current version of Visual Studio 2013 Update 2 now have a more correct looking set of templates. However, there are still some issues that have not been fixed. One example is Pivots having wrong margins and character spacing. My corrected templates still are the closest you can get to a native look and feel so feel free to download them.

The Material

VS_IconDOWNLOAD TEMPLATES – Download and install the corrected templates that include the fixes mentioned below so you can have a native looking app every time.

The Problem

A few of the templates that are shipped with the SDK are inconsistent with actual system UI. What I did was I took screenshots of common system UI. Then, I placed the screen shots behind the equivalent template found in the SDK. Often, I found that they were set up wrong and didn’t match the actual system UI. For an OS that prides itself on its design language, its apps should be held up to the same standard and stay consistent.

Note: At the time of writing this, WP8.1 templates in Visual Studio 2013 Update 2RC were used. These issues might be corrected when the final Update 2 is released.

Silverlight

Let’s start off with Silverlight apps. The firs template that I found that was inconsistent with system UI was the Windows Phone Portrait/Landscape Page templates. These pages have the familiar page title in all caps and a larger lower-cased page header. A simple example of this is the settings page for theme as seen below.

NativeBasicPage8

Here’s the overlaid Windows Phone Portrait Page template on top of a system UI screenshot. The system UI’s opacity is set 70% so you can tell it apart from the template’s controls.

BasicPageOverlay8

When I tried to recreate this page with the shipped Windows Phone Portrait Page template, I found that the page title had the wrong font weight and size. The font size for this is the same for the Pivot titles so I reused the PivotTitleFontSize resource. Also, I changed it to semi-bold weight to match. Once I’ve adjusted the page title, everything else shifts out of place so I made some margin adjustments too. Here’s the correct XAML snippet for the page title and header and I’ve also highlighted the differences. Whenever you add a “Windows Phone Portrait Page” or a “Windows Phone Landscape Page” into your Silverlight app, just replace the title panel at the top with the following:

<StackPanel Margin="12,16,0,28">
    <TextBlock Text="TITLE"
               Style="{StaticResource PhoneTextNormalStyle}"
               FontSize="{StaticResource PivotTitleFontSize}"
               Margin="10,0,0,0"
               FontFamily="{StaticResource PhoneFontFamilySemiBold}" />
    <TextBlock Text="header"
               Margin="10,-10,0,0"
               Style="{StaticResource PhoneTextTitle1Style}" />
</StackPanel>

WP8.1 XAML

Now let’s take a look at templates for a WP8.1 XAML app. The equivalent to the Silverlight’s Blank Page template in WP8.1 XAML is the Basic Page template. Repeating the process of overlaying the template over a system UI screenshot, we can see that things are way off.

BasicPageOverlay

Luckily, fixing this is simpler than fixing the Silverlight app. All of the font sizes and weights are correct but the margins are wrong. Use the XAML snippet below instead in your WP8.1 XAML basic pages.

<StackPanel Margin="19,12,0,25">
    <TextBlock Text="TITLE"
               Style="{ThemeResource TitleTextBlockStyle}"
               Typography.Capitals="SmallCaps" />
    <TextBlock Text="header"
               Margin="0,-6,0,0"
               Style="{ThemeResource HeaderTextBlockStyle}" />
</StackPanel>

But wait a minute. If you look really close it still look a little off. It starts off lined up on the left but by the end of the word “theme,” the “e” is a little offset (click to view in full size.)

Well, I actually left one thing out. In WP8.1, the page title and header seemed to have had their character spacing changed to -3 from the default 0. It’s not really visually obvious and it adds unnecessary XAML so I didn’t include it but feel free to add a -3 character spacing to both the title and header TextBlocks if you want your app to look 8.1 accurate.

In the Basic Page template, the layout root grid also has some transitions included with it. This is not the page transition but the transition on the page contents itself that gives it a subtle slide in when the page loads up. It’s not normal behavior to have this in Windows Phone and I suspect it’s something leftover from Windows 8 templates. The only time elements animate on transition in is when a staggered list is in view (like in the mail app.) So remove or comment out the following under the layout root.

<!--Remove this from your XAML-->
<Grid.ChildrenTransitions>
    <TransitionCollection>
        <EntranceThemeTransition />
    </TransitionCollection>
</Grid.ChildrenTransitions>

Non-template Issues

Another very commonly used piece of UI is the Pivot control. The good thing in Silverlight apps is that the control is already styled to look consistent with native system UI. Unfortunately this is not true for WP8.1 XAML apps. Overlaying the settings page pivot, we can see that it’s wrong in both portrait and landscape.

PivotOverlay

The character spacing needs to be increased and some margins need to be adjusted. Unfortunately, there’s no direct way of changing the values needed to make it look like the native Pivots. We can, however, override the style keys that are defining those things. In the file App.xaml, we can define these new margin and character spacing values in the application resources.

<!--Add this to your App.xaml-->
<Application.Resources>
    <Thickness x:Key="PivotLandscapeThemePadding">19,18,0,0</Thickness>
    <x:Int32 x:Key="PivotHeaderItemCharacterSpacing">0</x:Int32>
    <Thickness x:Key="PivotItemMargin">19,16,19,0</Thickness>
</Application.Resources>

These three keys are used by the default Pivot style. Defining new values with the same keys effectively overrides the original values and every Pivot in your app will look more consistent with OS.

Note: At the time of writing this, there is a bug for WP8.1 XAML apps where styles and resources in the App.xaml application resources are the only ones that will override existing keys. This means putting these three values at the Page or Control level resources will not do anything. In order for these values to take effect, they must be defined at the application level.

Remarks

As a final gotcha, WP8.1 XAML apps now deals with scale factors to calculate app layouts and things don’t quite line up for all resolutions. The XAML I’ve included in this post was based on WXGA resolution with a scale factor of 200%. The Basic Page’s template uses font sizes that matches perfectly for this resolution and scale factor so I’m assuming that’s what the folks at Microsoft as a reference. Margins seems to scale appropriately across scale factors but font sizes do not so WVGA and 1080p emulators will not line up the text properly if you try to overlay a screenshot of a system page on your app. I’m not sure if this is a bug with the scaling system or not but there’s not much we can do so we’ll stick with WXGA as the reference size.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s