×
Namespaces

Variants
Actions

External styles in Windows Phone

From Nokia Developer Wiki
Jump to: navigation, search

This article explains how to create global style which can be used easily in several Windows Phone applications.

WP Metro Icon UI.png
SignpostIcon XAML 40.png
WP Metro Icon WP8.png
Article Metadata
Code ExampleTested with
Devices(s): HTC 8x
Compatibility
Platform(s): Windows Phone
Windows Phone 8
Article
Created: mehul_raje (02 Apr 2014)
Last edited: hamishwillee (02 Jul 2013)

Contents

Introduction

In windows phone, we can define style in number of ways and with various types such as implicit styles and explicit styles. Style is basically a number of parameters that can be applied to multiple instances of same control types.

It is better idea to define your standard styles or text resources in a separate project rather than defining them in the same project which uses it. The advantage of this approach is that it increases re-usability which means once you compiled your style project it can be used in several applications by just adding reference of it. Defining style, text resources or anything which comes in project's resource category can help in easy branding of your application without touching business logic of the application.

This article covers how to create style in a separate project and also how to use it in another project.

Create separate project

  1. Open Visual studio express for windows phone
  2. Select File -> New Project ->Windows Phone Class Library -> Give name say ProjectResources -> Ok


By default IDE creates one class file which can be deleted if you don't plan to write any business logic related to the application resources.

Now add one new blank XAML file, say StyleResource.xaml in ProjectResources library. Then paste the following simple code in it; the code contains simple style defined for TextBlock, button etc in ResourceDictionary. You can add more complex styles in it.

<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:sys="clr-namespace:System;assembly=mscorlib">
 
<Style x:Key="HeaderTextStyle" TargetType="TextBlock">
<Setter Property="FontSize" Value="40"/>
<Setter Property="FontWeight" Value="Bold"/>
<Setter Property="FontFamily" Value="Segoe WP"/>
<Setter Property="Foreground" Value="White"/>
</Style>
 
<Style x:Key="NormalTextStyle" TargetType="TextBlock">
<Setter Property="FontSize" Value="30"/>
<Setter Property="FontWeight" Value="Normal"/>
<Setter Property="FontFamily" Value="Segoe WP"/>
<Setter Property="Foreground" Value="Yellow"/>
</Style>
 
<Style x:Key="ButtonStyle" TargetType="Button">
<Setter Property="BorderThickness" Value="2"/>
<Setter Property="FontSize" Value="30"/>
<Setter Property="BorderBrush" Value="Yellow"/>
</Style>
 
<Style x:Key="RadioButtonStyle" TargetType="RadioButton">
<Setter Property="IsChecked" Value="true"/>
<Setter Property="FontSize" Value="20"/>
<Setter Property="BorderBrush" Value="Yellow"/>
</Style>
 
</ResourceDictionary>

Create another project

  1. Now create one Windows Phone App in the same solution where you created ProjectResources library (Note: It is not necessary create it in the same solution).
  2. Add reference of ProjectResources: Reference - >Add Reference.. -> Solution -> select ProjectResources ->Ok
  3. Now you need to merge resource dictionary of ProjectResources in your current project's resources dictionary. To do this, replace app.xaml code of current project with the following code
<Application
x:Class="Testing.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
xmlns:appresources="clr-namespace:ProjectResources;assembly=ProjectResources">
 
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="/ProjectResources;component/StyleResource.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
 
 
<Application.ApplicationLifetimeObjects>
<!--Required object that handles lifetime events for the application-->
<shell:PhoneApplicationService
Launching="Application_Launching" Closing="Application_Closing"
Activated="Application_Activated" Deactivated="Application_Deactivated"/>
</Application.ApplicationLifetimeObjects>
 
</Application>



Now your project is ready to use style defined in StyleResource.xaml. Please refer the following code to know how to apply style to the controls:

  <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<StackPanel>
<TextBlock Text="Hello how are you..." Style="{StaticResource HeaderTextStyle}" Margin="20,0,0,0"/>
<TextBlock Text="Hello how are you..." Style="{StaticResource NormalTextStyle}" Margin="20,20,0,0"/>
<Button Content="Hello how are you..." Style="{StaticResource ButtonStyle}" Margin="20,20,0,0"/>
<RadioButton Margin="20,20,0,0" Content="Hello how are you..." Style="{StaticResource RadioButtonStyle}"/>
</StackPanel>
</Grid>


In same way you can define text resources or graphic resources in a separate library and use them in any project by just adding its reference.
Find complete source code File:ExternalStyle.zip

Related articles

This page was last modified on 2 July 2013, at 12:45.
229 page views in the last 30 days.
×