08 September, 2010

WP7: Styling and FontSizes

Just a quick note here.
When you find yourself sizing controls (e.g. TextBlocks) in a Windows Phone 7 (WP7) application, how do you determine what e.g. fontsize to use? Will fontsize = 24 be better than fontsize = 32? This is not as fixed as is the case with XCode, iPhones and Apple.

So what to do?
Always rely on the built-in static resources found in the framework! Never set the size explicitly in code nor in XAML! It will come back and bite you in the neck when your application is installed on a differently sized device compared to your development machine. You never know when MS will decide to change something here ;-)

An example of a textblock sized using the StyleAttribute:
<!--TitlePanel contains the name of the application and page title-->
<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="24,24,0,12">
TextBlock x:Name="ApplicationTitle" Text="My First Application" Style="{StaticResource PhoneTextNormalStyle}"/>
TextBlock x:Name="PageTitle" Text="Damage Calc" Margin="-3,-8,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>

Note the Style={StaticResource PhoneTextNormalStyle}” attribute set on the textblock. This styles the controls as the framework sees fit, and in this way you make sure that your application meets the look-and-feel of a WP7 application. And this regardless of any possible change in screen resolution (as this is handled by the framework). At this time 800 x 480 is the de-facto resolution though.

What Styles are possible then, you might be wondering?
If you enter this path: C:\Program Files\Microsoft SDKs\Windows Phone\v7.0\Design; you will see a large number of themes. Inside each theme, 2 XAML files exists. These files declares the valid names you can use, so open any ‘ThemeResources.xaml’ file and see the names.

Here is how the folder should look like with all the different themes. In addition a ‘ThemeResources.xaml"’ file is shown.
themesWM7 themesWM7_2

Technorati Tags:

No comments: