Sign in to queue

Description

Download the source code for this lesson at http://absolutebeginner.codeplex.com/

The Windows Phone operating system has a distinctive look and feel.  I’m not just talking about the tile-based user interface, but also the colors and typography.  If you search online for “windows phone style guide” you’ll find official documents from Microsoft that outline these suggestions.  However, even inside of those guidelines, there is room for creative expression and branding.  So, you’ll want to know the rules and know when to break them.

In this lesson, I’m going to talk about the technical aspects of working with XAML to style your app.  Primarily, I’ll talk about creating re-usable resources and styles that can be shared between many elements whether on the same page or the same application.  Finally, we’ll talk about the pre-built themes that are available so that we can force consistency across all apps on a given user’s phone.

Suppose you have a particular color or setting that you know you’ll want to re-use throughout a page or the entire app, or a color or setting that you may want to change occasionally and you want to make the change in one place and have it reflected everywhere that style is used, similar to a Cascading Style Sheet style.  In that case, you can create a resource and then bind to it as needed. 

I created a simple Phone project called XAMLResources with the simplest {StaticResource} example I could think of:
 
(1 ) I add <Page.Resources> as a child element of <Phone> to hold Local (or rather, page-level) Resources.  Any resources or styles created here will only be available on this page, not other pages.

(2 ) I create a SolidColorBrush resource that I can reference with the key "MyBrush".

    <Page.Resources>
        <SolidColorBrush x:Key="MyBrush" Color="Brown" />
    </Page.Resources>


(3 ) To utilize this SolidColorBrush with the key “MyBrush”, I’ll bind to it like so:

  <TextBlock Text="APP NAME"
             Foreground="{StaticResource MyBrush}" />

The result:

clip_image002

The key is the binding syntax which we’ll see often for different purposes in XAML.  Binding to a resource takes the form of:

{StaticResource ResourceName}

The curly braces indicate binding.  The first word “StaticResource” define the type of binding … we’re binding to a resource that is defined in XAML, as opposed to a more dynamic form of binding for data which we’ll talk about later.

Beyond simple resources, styles allow you to collect one or more settings that can be re-used across a Page or across an entire app for a specific control.  Then, when you want to re-use that style, you set a given control’s Style attribute and bind it to that style you defined.

Virtually every control and even the Page itself has features of its appearance that can be customized, whether it be fonts, colors, border thickness, width and height or what have you.  All of these attributes can be set on an individual basis on each control in your XAML.

Here I create the following style:

    <Page.Resources>
        . . .
        <Style TargetType="Button" x:Key="MyButtonStyle">
            <Setter Property="Background" Value="Blue" />
            <Setter Property="FontFamily" Value="Arial Black" />
            <Setter Property="FontSize" Value="36" />
        </Style>
    </Page.Resources>


Here I create a Style that I can reference with the key "MyButtonStyle".  Notice that the TargetType is set to Button ... this style only applies to Button controls.  Inside of this style, I can set individual attributes of the Button.  I have three attributes set using <Setter > elements that include the Property (attribute on the Button) I want to set and the value I want it set to.  So, in this case, I create a style which sets the Background attribute to the SolidColorBrush "Blue" as well as certain attributes of the Font to give it a distinctive appearance.

(4) Next I bind my Button's Background attribute to the value bound to MyButtonStyle.

            <Button Content="My Brush Example"
                    Height="100"
                    Style="{StaticResource MyButtonStyle}" />           

Which produces this result:

clip_image004

In this overly simplistic example, it may not be readily apparent the value of this approach.  As you application grows large and you want to keep a consistent appearance between the controls on the page, you may find this quite handy.  It keeps the XAML concise and compact.  And, if you need to change the style or color for any reason, you can change it once and have the change propagate to everywhere it has been applied.

I created these Local Resources on the page, meaning they are scoped to just the MainPage.xaml.  What if I wanted to share these Resources across the entire application?  In that case, I would remove them from the Page’s <Page.Resources> and add them in the App.xaml's <Application.Resources> section as a System Resource:

<Application
    . . .>

    <Application.Resources>
        <SolidColorBrush x:Key="MyBrush" Color="Brown" />
        <Style TargetType="Button" x:Key="MyButtonStyle">
            <Setter Property="Background" Value="Blue" />
            <Setter Property="FontFamily" Value="Arial Black" />
            <Setter Property="FontSize" Value="36" />
        </Style>
    </Application.Resources>
   
</Application>

And there should be no change to the appearance of the Button on my original MainPage.xaml.

Discovering Theme Resources

In addition to styles, there are Themes.  Themes are built-in styles available to all Windows Phone apps and their color and other appearance settings are set by the user of the phone.  So, on my Phone, I go to Settings -> theme and I choose the dark background and the yellow accent color.  I would like to see apps utilize this color scheme to stay consistent with my preferred colors.  As a developer, I can make sure I adhere to those settings and others by binding to a ThemeResource.

If you look at the Page template, it utilizes a theme resource:

<Page
    x:Class="XAMLResources.MainPage"
    . . .
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

And I can even use theme resources inside of my styles.  Here I’ll modify my application scoped style to use the accent color the user has chosen:

    <Application.Resources>
        . . .
        <Style TargetType="Button" x:Key="MyButtonStyle">
            <Setter Property="Background"
                    Value="{ThemeResource PhoneAccentBrush}" />
            . . .
        </Style>
    </Application.Resources>

Themed Resources should be leveraged to keep your apps looking like they belong on the Windows Phone.  You should resist the urge to use custom colors, fonts and the like unless you have a good reason to (such as to match your company's established branding elements, etc.)

Furthermore, there are built-in styles available to your app.  For example, if I were to modify my MainPage.xaml like so:

            <TextBlock Text="page name"
                       Style="{StaticResource HeaderTextBlockStyle}" />
 
It will produce the following appearance:

clip_image006

But where did this StaticResource come from?  I did not define it.

If you right-click on the style name and select “Go To Definition” you’ll see that it opens a read-only file from your hard drive:

clip_image008

If you hover over the preview tab, you’ll see the location of this file and the fact that it is read-only:

clip_image010

These are pre-built styles for you to use to ensure consistency across apps. 

It's also worth noting that many of the styles are based on styles which are based on yet other styles.  Notice the definition of the style we’re investigating:

  <Style x:Key="HeaderTextBlockStyle"
         TargetType="TextBlock"
         BasedOn="{StaticResource BaseTextBlockStyle}">
    . . .
  </Style>

The key here is the BasedOn attribute.  So, this style builds on the BaseTextBlockStyle and adds several modifications to it.  In this way, we can override these styles with our own.  This visual inheritance allows developers to avoid repeating the attribute settings that will be common across variations of the styles, much like how Cascading Style Sheets work in web development.

I said earlier that there were different binding expressions in the Windows Phone for different purposes.  The {StaticResource } is generally a resource or style that has been created by you or was created by Microsoft (as we have just seen).  The {ThemeResource } is for binding to a theme.  The last binding expression we’ll see is simply {Binding } which is used for binding data (i.e., usually generic lists of custom types with their properties set to the data we want to work with in our app) to on page elements.  We'll see this at work much later in this series.

Recap

Just to recap, the big takeaway from this lesson was the ways in which we can style our app to make it look like it belongs on the Windows Phone while also expressing our own individuality.  We learned how to bind to StaticResources like styles and resources, and ThemeResource which borrow from the user’s selections.

Embed

Download

Download this episode

The Discussion

Add Your 2 Cents