Programming4us
         
 
 
Windows Phone

User Interface : Using the Windows Phone 7 Predefined Styles

8/16/2011 4:04:03 PM

1. Problem

You need to develop a Windows Phone 7 application that provides a dynamic user interface that changes based on the user's choices of theme and font.

2. Solution

You can use the Windows Phone 7 predefined styles so that you are sure your user interface will change fonts and colors according to your user's setting changes.

3. How It Works

When you define the user interface of your Silverlight for Windows Phone 7 application, it is very common to add text blocks, text boxes, links, and so forth. You can specify their dimensions, colors, and positions, but you need to pay attention to the changes made by the user in the Settings system page (see Figure 1).

Figure 1. The emulator's Settings page

For example, by selecting the Theme menu item, the user can change the Phone Accent color. If your user interface provides links to other pages or external web pages, this color should be used to specify this information. By using those predefined styles, you can be sure that your link's color will change to the new user selection automatically.

NOTE

The full list of predefined styles is available at the MSDN official page: http://msdn.microsoft.com/en-us/library/ff769552(v=VS.92).aspx.

The Windows Phone 7 theme is a set of resources such as background colors and phone accent color used to customize the phone's look. By using the predefined resource dictionary provided by the phone, you can be sure to maintain the consistency and compatibility of your application. Moreover, you can be pretty sure that your application will pass Marketplace approval.

When you need to use your own colors, fonts, and so forth, you can override the static resource in your application. Obviously, this change will be applied only to your application and not to the entire phone system.

You can specify the static resource either in an XAML file or in a code file. In the former, you can use the {StaticResource} markup extension together with the static resource name. This static resource will be added to your application when it starts. In the latter case, you can use the Resources property from the Application class, specifying the static resource name.

4. The Code

To demonstrate this recipe, you will create the PreDefinedSystemStylesDemo Silverlight for Windows Phone 7 application. It uses the Pivot control to separate application content in different categories such as Brushes, Text Boxes, Fonts, and Text Styles.

The application is simply a visual reference to the static resource styles provided by the phone, so the code is pretty simple, all defined in the MainPage.xaml file.

It starts defining all the Brush styles applicable to a control such as the Rectangle. The Fill property of the Rectangle control contains different static resource styles defined by the Brush style.

<Grid x:Name="LayoutRoot" Background="YellowGreen">
<controls:Pivot Title="Predefined styles">
<controls:PivotItem Header="Brushes">
<ListBox Margin="0,0,-12,0">
<StackPanel Orientation="Vertical" Margin="0,0,0,17">
<StackPanel Orientation="Horizontal" Margin="0,0,5,5">
<Rectangle Width="100" Height="100"
Fill="{StaticResource PhoneAccentBrush}" />
<TextBlock Margin="5,0,0,0" Text="PhoneAccentBrush"
FontSize="{StaticResource PhoneFontSizeNormal}" />
</StackPanel>


<StackPanel Orientation="Horizontal" Margin="0,0,5,5">
<Rectangle Width="100" Height="100"
Fill="{StaticResource PhoneForegroundBrush}" />
<TextBlock Margin="5,0,0,0" Text="PhoneForegroundBrush"
FontSize="{StaticResource PhoneFontSizeNormal}" />
</StackPanel>
<StackPanel Orientation="Horizontal" Margin="0,0,5,5">
<Rectangle Width="100" Height="100" Fill="{StaticResource
PhoneBackgroundBrush}" />
<TextBlock Margin="5,0,0,0" Text="PhoneBackgroundBrush"
FontSize="{StaticResource PhoneFontSizeNormal}" />
</StackPanel>
<StackPanel Orientation="Horizontal" Margin="0,0,5,5">
<Rectangle Width="100" Height="100" Fill="{StaticResource
PhoneContrastBackgroundBrush}" />
<TextBlock Margin="5,0,0,0" Text="PhoneContrastBackgroundBrush"
FontSize="{StaticResource PhoneFontSizeNormal}" />
</StackPanel>
<StackPanel Orientation="Horizontal" Margin="0,0,5,5">
<Rectangle Width="100" Height="100" Fill="{StaticResource
PhoneContrastForegroundBrush}" />
<TextBlock Margin="5,0,0,0" Text="PhoneContrastForegroundBrush"
FontSize="{StaticResource PhoneFontSizeNormal}" />
</StackPanel>
<StackPanel Orientation="Horizontal" Margin="0,0,5,5">
<Rectangle Width="100" Height="100"
Fill="{StaticResource PhoneDisabledBrush}" />
<TextBlock Margin="5,0,0,0" Text="PhoneDisabledBrush"
FontSize="{StaticResource PhoneFontSizeNormal}" />
</StackPanel>
<StackPanel Orientation="Horizontal" Margin="0,0,5,5">
<Rectangle Width="100" Height="100"
Fill="{StaticResource PhoneSubtleBrush}" />
<TextBlock Margin="5,0,0,0" Text="PhoneSubtleBrush"
FontSize="{StaticResource PhoneFontSizeNormal}" />
</StackPanel>
<StackPanel Orientation="Horizontal" Margin="0,0,5,5">
<Rectangle Width="100" Height="100"
Fill="{StaticResource PhoneBorderBrush}" />
<TextBlock Margin="5,0,0,0" Text="PhoneBorderBrush"
FontSize="{StaticResource PhoneFontSizeNormal}" />
</StackPanel>
<StackPanel Orientation="Horizontal" Margin="0,0,5,5">
<Rectangle Width="100" Height="100"
Fill="{StaticResource TransparentBrush}" />
<TextBlock Margin="5,0,0,0" Text="TransparentBrush"
FontSize="{StaticResource PhoneFontSizeNormal}" />
</StackPanel>
<StackPanel Orientation="Horizontal" Margin="0,0,5,5">
<Rectangle Width="100" Height="100"
Fill="{StaticResource PhoneSemitransparentBrush}" />
<TextBlock Margin="5,0,0,0" Text="PhoneSemitransparentBrush"
FontSize="{StaticResource PhoneFontSizeNormal}" />
</StackPanel>


<StackPanel Orientation="Horizontal" Margin="0,0,5,5">
<Rectangle Width="100" Height="100"
Fill="{StaticResource PhoneChromeBrush}" />
<TextBlock Margin="5,0,0,0" Text="PhoneChromeBrush"
FontSize="{StaticResource PhoneFontSizeNormal}" />
</StackPanel>
</StackPanel>
</ListBox>
</controls:PivotItem>


The second Pivot control contains the styles applicable to text boxes:

<controls:PivotItem Header="TextBoxes">
<ListBox Margin="0,0,-12,0">
<StackPanel Orientation="Vertical" Margin="0,0,0,17">
<TextBox BorderBrush="{StaticResource PhoneTextBoxEditBorderBrush}"
Background="{StaticResource PhoneTextBoxEditBackgroundBrush}"
Foreground="{StaticResource PhoneTextBoxForegroundBrush}"
SelectionForeground="{StaticResource
PhoneTextBoxSelectionForegroundBrush}" />
<TextBlock TextWrapping="Wrap"
Text="TextBox with PhoneTextBoxEditBorderBrush,
PhoneTextBoxEditBackgroundBrush,
PhoneTextCaretBrush, PhoneTextBoxForegroundBrush, and
PhoneTextBoxSelectionForegroundBrush styles." />
</StackPanel>
<StackPanel Orientation="Vertical" Margin="0,0,0,17">
<TextBox IsReadOnly="True"
Background="{StaticResource PhoneTextBoxReadOnlyBrush}"
Text="I'm a read-only textbox"/>
<TextBlock TextWrapping="Wrap"
Text="Read only TextBox with PhoneTextBoxReadOnlyBrush" />
</StackPanel>
</ListBox>
</controls:PivotItem>


The third Pivot control contains the Fonts static resource styles. The FontFamily and FontSize properties of the TextBlock control are used to show the Font static resource styles:

<controls:PivotItem Header="Fonts">
<ListBox Margin="0,0,-12,0">
<StackPanel Orientation="Vertical" Margin="0,0,0,17">
<TextBlock FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeSmall}"
Text="PhoneFontFamilyNormal with PhoneFontSizeSmall" />
                    <TextBlock FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Text="PhoneFontFamilyNormal with PhoneFontSizeNormal" />
<TextBlock FontFamily="{StaticResource PhoneFontFamilyNormal}"
FohntSize="{StaticResource PhoneFontSizeMedium}"
Text="PhoneFontFamilyNormal with PhoneFontSizeMedium" />


<TextBlock FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeMediumLarge}"
Text="PhoneFontFamilyNormal with
PhoneFontSizeMediumLarge" />
<TextBlock FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeLarge}"
Text="PhoneFontFamilyNormal with PhoneFontSizeLarge" />
<TextBlock FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeExtraLarge}"
Text="PhoneFontFamilyNormal with PhoneFontSizeExtraLarge" />
<TextBlock FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeExtraExtraLarge}"
Text="PhoneFontFamilyNormal with PhoneFontSizeExtraExtraLarge" />
<TextBlock FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeHuge}"
Text="PhoneFontFamilyNormal with PhoneFontSizeHuge" />

<TextBlock FontFamily="{StaticResource PhoneFontFamilyLight}"
FontSize="{StaticResource PhoneFontSizeSmall}"
Text="PhoneFontFamilyLight with PhoneFontSizeSmall" />
<TextBlock FontFamily="{StaticResource PhoneFontFamilyLight}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Text="PhoneFontFamilyLight with PhoneFontSizeNormal" />
<TextBlock FontFamily="{StaticResource PhoneFontFamilyLight}"
FontSize="{StaticResource PhoneFontSizeMedium}"
Text="PhoneFontFamilyLight with PhoneFontSizeMedium" />


<TextBlock FontFamily="{StaticResource PhoneFontFamilyLight}"
FontSize="{StaticResource PhoneFontSizeMediumLarge}"
Text="PhoneFontFamilyLight with PhoneFontSizeMediumLarge" />
<TextBlock FontFamily="{StaticResource PhoneFontFamilyLight}"
FontSize="{StaticResource PhoneFontSizeLarge}"
Text="PhoneFontFamilyLight with PhoneFontSizeLarge" />
<TextBlock FontFamily="{StaticResource PhoneFontFamilyLight}"
FontSize="{StaticResource PhoneFontSizeExtraLarge}"
Text="PhoneFontFamilyLight with PhoneFontSizeExtraLarge" />
<TextBlock FontFamily="{StaticResource PhoneFontFamilyLight}"
FontSize="{StaticResource PhoneFontSizeExtraExtraLarge}"
Text="PhoneFontFamilyLight with PhoneFontSizeExtraExtraLarge" />
<TextBlock FontFamily="{StaticResource PhoneFontFamilyLight}"
FontSize="{StaticResource PhoneFontSizeHuge}"
Text="PhoneFontFamilyLight with PhoneFontSizeHuge" />
<TextBlock FontFamily="{StaticResource PhoneFontFamilySemiLight}"
FontSize="{StaticResource PhoneFontSizeSmall}"
Text="PhoneFontFamilySemiLight with PhoneFontSizeSmall" />
<TextBlock FontFamily="{StaticResource PhoneFontFamilySemiLight}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Text="PhoneFontFamilySemiLight with PhoneFontSizeNormal" />
<TextBlock FontFamily="{StaticResource PhoneFontFamilySemiLight}"
FontSize="{StaticResource PhoneFontSizeMedium}"
Text="PhoneFontFamilySemiLight with PhoneFontSizeMedium" />

<TextBlock FontFamily="{StaticResource PhoneFontFamilySemiLight}"
FontSize="{StaticResource PhoneFontSizeMediumLarge}"
Text="PhoneFontFamilySemiLight with PhoneFontSizeMediumLarge" />
<TextBlock FontFamily="{StaticResource PhoneFontFamilySemiLight}"
FontSize="{StaticResource PhoneFontSizeLarge}"
Text="PhoneFontFamilySemiLight with PhoneFontSizeLarge" />
<TextBlock FontFamily="{StaticResource PhoneFontFamilySemiLight}"
FontSize="{StaticResource PhoneFontSizeExtraLarge}"
Text="PhoneFontFamilySemiLight with PhoneFontSizeExtraLarge" />
<TextBlock FontFamily="{StaticResource PhoneFontFamilySemiLight}"
FontSize="{StaticResource PhoneFontSizeExtraExtraLarge}"
Text="PhoneFontFamilySemiLight with PhoneFontSizeExtraExtraLarge" />
<TextBlock FontFamily="{StaticResource PhoneFontFamilySemiLight}"
FontSize="{StaticResource PhoneFontSizeHuge}"
Text="PhoneFontFamilySemiLight with PhoneFontSizeHuge" />

<TextBlock FontFamily="{StaticResource PhoneFontFamilySemiBold}"
FontSize="{StaticResource PhoneFontSizeSmall}"
Text="PhoneFontFamilySemiBold with PhoneFontSizeSmall" />
<TextBlock FontFamily="{StaticResource PhoneFontFamilySemiBold}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Text="PhoneFontFamilySemiBold with PhoneFontSizeNormal" />
<TextBlock FontFamily="{StaticResource PhoneFontFamilySemiBold}"
FontSize="{StaticResource PhoneFontSizeMedium}"
Text="PhoneFontFamilySemiBold with PhoneFontSizeMedium" />
<TextBlock FontFamily="{StaticResource PhoneFontFamilySemiBold}"
FontSize="{StaticResource PhoneFontSizeMediumLarge}"
Text="PhoneFontFamilySemiBold with PhoneFontSizeMediumLarge" />
<TextBlock FontFamily="{StaticResource PhoneFontFamilySemiBold}"
FontSize="{StaticResource PhoneFontSizeLarge}"
Text="PhoneFontFamilySemiBold with PhoneFontSizeLarge" />
<TextBlock FontFamily="{StaticResource PhoneFontFamilySemiBold}"
FontSize="{StaticResource PhoneFontSizeExtraLarge}"
Text="PhoneFontFamilySemiBold with PhoneFontSizeExtraLarge" />
<TextBlock FontFamily="{StaticResource PhoneFontFamilySemiBold}"
FontSize="{StaticResource PhoneFontSizeExtraExtraLarge}"
Text="PhoneFontFamilySemiBold with PhoneFontSizeExtraExtraLarge" />
<TextBlock FontFamily="{StaticResource PhoneFontFamilySemiBold}"
FontSize="{StaticResource PhoneFontSizeHuge}"
Text="PhoneFontFamilySemiBold with PhoneFontSizeHuge" />
</StackPanel>
</ListBox>
</controls:PivotItem>


The last Pivot control contains the static resource styles that are applicable to the text. In this case, you use the TextBlock control to demonstrate the effect of those resource styles:

<controls:PivotItem Header="Text Styles">
<ListBox Margin="0,0,-12,0">
<StackPanel Orientation="Vertical" Margin="0,0,0,17">
<TextBlock Style="{StaticResource PhoneTextBlockBase}"
Text="PhoneTextBlockBase" />
<TextBlock Style="{StaticResource PhoneTextNormalStyle}"
Text="PhoneTextNormalStyle" />
<TextBlock Style="{StaticResource PhoneTextTitle1Style}"
Text="PhoneTextTitle1Style" />
<TextBlock Style="{StaticResource PhoneTextTitle2Style}"
Text="PhoneTextTitle2Style" />
<TextBlock Style="{StaticResource PhoneTextTitle3Style}"
Text="PhoneTextTitle3Style" />
<TextBlock Style="{StaticResource PhoneTextLargeStyle}"
Text="PhoneTextLargeStyle" />
<TextBlock Style="{StaticResource PhoneTextExtraLargeStyle}"
Text="PhoneTextExtraLargeStyle" />
<TextBlock Style="{StaticResource PhoneTextGroupHeaderStyle}"
Text="PhoneTextGroupHeaderStyle" />
<TextBlock Style="{StaticResource PhoneTextSmallStyle}"
Text="PhoneTextSmallStyle" />
<TextBlock Style="{StaticResource PhoneTextContrastStyle}"
Text="PhoneTextContrastStyle" />
<TextBlock Style="{StaticResource PhoneTextAccentStyle}"
Text="PhoneTextAccentStyle" />
</StackPanel>
</ListBox>
</controls:PivotItem>
</controls:Pivot>
</Grid>


This changes the application background color to YellowGreen so that system colors can be visible. Finally, all the predefined system resources are specified by using the {StaticResource} markup extension so as to have a visual representation of those resources at runtime.

5. Usage

From Visual Studio 2010, run the application by pressing Ctrl+F5. Depending on the target output, the application deploys either on the Windows Phone Emulator or the Windows Phone device.

The application starts showing all the available brushes; you have to scroll up and down to see them all. Flicking to the left brings you to the next page, which shows text box styles. Going further to the left shows all the predefined font styles. Finally, the last page shows the predefined text styles (see Figure 2).

Figure 2. The PreDefinedSystemStylesDemo application shows all the static resources provided by the phone.
Other -----------------
- Handling Input on Windows Phone 7 : Touch Input (part 3) - Multi-Point Touch
- Handling Input on Windows Phone 7 : Touch Input (part 2) - Raw Touch with Mouse Events
- Handling Input on Windows Phone 7 : Touch Input (part 1) - Single-Point Touch
- Handling Input on Windows Phone 7 : The Keyboard
- User Interface : Customizing the Soft Input Panel Keyboard to Accept Only Numbers
- User Interface : Detecting Changes in the Theme Template
- Developing for Windows Phone and Xbox Live : Multiplayer Games (part 6) - Searching for an Available Network Session
- Developing for Windows Phone and Xbox Live : Multiplayer Games (part 5) - Searching for an Available Network Session
- Developing for Windows Phone and Xbox Live : Multiplayer Games (part 4) - Building a Game Lobby
- Developing for Windows Phone and Xbox Live : Multiplayer Games (part 3) - Creating a Network Session
- Developing for Windows Phone and Xbox Live : Multiplayer Games (part 2) - Main Menu and State Management
- Developing for Windows Phone and Xbox Live : Multiplayer Games (part 1) - Getting Ready for Networking Development
- User Interface : Using the ApplicationBar Control
- User Interface : Creating an Animated Splash Screen
- Windows Phone 7 Game Development : The World of 3D Graphics - Vertex and Index Buffers
- Windows Phone 7 Game Development : The World of 3D Graphics - Hidden Surface Culling
- Windows Phone 7 Game Development : The World of 3D Graphics - The Depth Buffer
- Windows Phone 7 Game Development : The World of 3D Graphics - Rendering 3D Objects
- Windows Phone 7 Game Development : The World of 3D Graphics - Perspective Projection
- Developing for Windows Phone and Xbox Live : Let the 3D Rendering Start
 
 
Most View
- Programming Excel with VBA and .NET : Tasks in Visual Basic - Run Other Applications
- Windows 7: Managing Wireless Network Connections (part 4) - Creating User-Specific Wireless Connections
- Writing Your First Phone Application - Adding Code (part 1)
- Troubleshooting and Optimizing SQL Server 2005 : Server Configuration Maintenance
- Windows Server 2008 : Understanding the Windows AIK (part 4) - Understanding ImageX and the .wim File Format
- Client Access Server Architecture in Exchange 2010 (part 4)
- Windows Server 2008 : Working with NAP (part 8) - 802.1x Enforcement
- Developing an Information Architecture with Sharepoint 2010
- SharePoint 2010 : Setting Lockdown Mode for publishing sites, Configuring Site Collection audit settings, Accessing security policy reports
- SharePoint 2010 : Recover a Deleted File or List Item
Top 10
- Implementing Edge Services for an Exchange Server 2007 Environment : Utilizing the Basic Sender and Recipient Connection Filters (part 3) - Configuring Recipient Filtering
- Implementing Edge Services for an Exchange Server 2007 Environment : Utilizing the Basic Sender and Recipient Connection Filters (part 2)
- Implementing Edge Services for an Exchange Server 2007 Environment : Utilizing the Basic Sender and Recipient Connection Filters (part 1)
- Implementing Edge Services for an Exchange Server 2007 Environment : Installing and Configuring the Edge Transport Server Components
- What's New in SharePoint 2013 (part 7) - BCS
- What's New in SharePoint 2013 (part 6) - SEARCH
- What's New in SharePoint 2013 (part 6) - WEB CONTENT MANAGEMENT
- What's New in SharePoint 2013 (part 5) - ENTERPRISE CONTENT MANAGEMENT
- What's New in SharePoint 2013 (part 4) - WORKFLOWS
- What's New in SharePoint 2013 (part 3) - REMOTE EVENTS