Windows Phone From Scratch #8–Styles

Let’s take a look at how styles can unify the look and feel of a Windows Phone application.  This and the next few Windows Phone From Scratch (WPFS) postings will use the same form, so we’ll begin by creating a new Windows Phone Application in Expression Blend, and we’ll name it WPFS8.

Set the Application Name to WPFS8 and the page name to Styles. 

Click in the content area, and divide the grid into 5 rows and 2 columns.  Drag a TextBlock and set its properties as follows:

• Name = NamePrompt
• Text = Full Name
• Row = 0
• Column = 0
• HorizontalAlignment = Right
• VerticalAlignment = Center
• Font = Segoe WP
• FontSize = 24 point
• Margin = 5,5,15,5

Make sure you are equally comfortable with setting the TextBlock based on the properties as described above, and by reading the Xaml shown below:

<TextBlock
   x:Name="NamePrompt"
   Text="Full Name"
   HorizontalAlignment="Right"
   VerticalAlignment="Center"
   Margin="5,5,15,5"
   FontFamily="Segoe WP"
   FontSize="24" />

In fact, this is the Xaml produced by Expression Blend if you enter the properties shown above.

This layout for the text block will work well for the other three text blocks so (for now) copy and paste three more TextBlocks into place.

An easy way to copy the TextBlocks is to click on one, hit ctrl-C/ctrl-V and then drag the pasted copy to the row you want. Next, turn to the properties window to fix the text, name and, if needed, the margins. Note also that once they are in place, you can multi-select all the TextBlock controls and then set their common properties (e.g., the margins) all together.

The four text blocks all go in column zero, and their text values are, respectively:

• Full Name
• Sex
• Languages
• Skills

Adding the Input Controls

Add the remaining controls as shown here, setting all of the input controls to have HorizontalAlignment left, VerticalAlignment to bottom and a margin of 5. The radio buttons and the checkboxes are put into a stack panel whose orientation is horizontal. 

Put some hardwired values into the ListBox. 

Styles

It gives me the willies to duplicate the shared styling information for each of the prompts, so let’s factor that out right away.  Return to Expression Blend and click on the first prompt (Full Name). Then select the menu option Object –> Edit Style –> Create Empty.  Name the new style Prompt and click on the New button to create a new resource file; name that file Styles. Click OK twice to remove the dialogs.

This puts you into the editor for the style itself.  You can set the properties you want to associate with the style (e.g., horizontal and vertical alignment) and save the style; it will be saved to a file named styles.xaml which you can examine by clicking on the resources tag and then the file.

Blend will wire up that resource file into App.xaml as an external resource dictionary.   You can see this by opening the project in Visual Studio and then opening App.xaml:

<Application.Resources>
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <ResourceDictionary Source="Styles.xaml"/>
        </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>
</Application.Resources>

You can examine the style itself in Styles.xaml,

<Style x:Key="Prompt" TargetType="TextBlock">
    <Setter Property="Margin" Value="5,5,15,5"/>
    <Setter Property="FontSize" Value="32"/>
    <Setter Property="HorizontalAlignment" Value="Right"/>
    <Setter Property="VerticalAlignment" Value="Center"/>
</Style>

Applying The Style

Before applying the new styles to the prompts, we’ll want to remove the Margin, FontSize, HorizontalAlignment and VerticalAlignment settings that we put in earlier.  You can do this by clicking the Advanced Properties box (the tiny white box next to the properties you set for each control) and clicking Clear, or you can just open  MainPage.xaml in the Visual Studio  Xaml editor and delete the relevant attributes.

Once you have “clean” TextBlocks, you can return to Blend and click on the Resources tab. Click on the turn down next to Styles.xaml and then drag and drop the Prompts style onto one of the TextBlocks.

A dialog opens asking if you want to create a new TextBlock with that style, or just apply the style to the TextBlock you dropped it on.  Clickiing on the latter choice applies the Prompt style to the TextBlock.

Examining the Xaml reveals that the TextBlock’s style property has been set to the value stored in the static resource Prompt. That static resource is, again, in the Styles.xaml file.