Namespaces

Variants
Actions

Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries over the next few weeks. Thanks for all your past and future contributions.

Revision as of 03:35, 3 July 2013 by hamishwillee (Talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

Using the XAML Style tag to format UI controls on Windows Phone

From Wiki
Jump to: navigation, search

This article shows how to make use of Style tag in various types of controls.

WP Metro Icon UI.png
SignpostIcon XAML 40.png
WP Metro Icon WP8.png
SignpostIcon WP7 70px.png
Article Metadata
Code ExampleTested with
SDK: Windows Phone 8.0/7.1
Devices(s): Nokia Lumia 920, Nokia Lumia 800
Compatibility
Platform(s): Windows Phone 8.0/7.5
Windows Phone 8
Windows Phone 7.5
Article
Created: pooja_1650 (24 Aug 2012)
Updated: pooja_1650 (27 May 2013)
Last edited: hamishwillee (03 Jul 2013)

Contents

Introduction

Style tags are used to define control style information, including parameters like font style, font size, text alignment etc. They can be used on controls where style is relevant, including TextBlock, TextBox, ListPicker control, Image Control etc.

This article shows how to define a style in XAML that is automatically applied to a specific control or all instances of a specific type of control

Starting a new project

  • Create a new project in Visual Studio 2010 from File>>New Project>>Windows Phone Application - Visual C#. Give a desired name to the project.

Target UI

In this article, our target UI should be like:

None

Adding TextBox controls

In the MainPage.xaml file, we will drop down a few Text Block & Text Box controls. We will set the desired properties like shown below:

        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<Grid.RowDefinitions>
<RowDefinition Height=".10*"/>
<RowDefinition Height=".30*"/>
<RowDefinition Height=".12*"/>
<RowDefinition Height=".30*"/>
<RowDefinition Height=".12*"/>
<RowDefinition Height=".30*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
 
<TextBlock Grid.Row="0" Text="Name : " FontFamily="Arial" FontSize="26" FontWeight="SemiBold" Margin="10,0,0,0"/>
<TextBox Grid.Row="1" Height="75" TextWrapping="Wrap" Margin="0,-10,0,0"/>
<TextBlock Grid.Row="2" Text="Designation : " FontFamily="Arial" FontSize="26" FontWeight="SemiBold" Margin="10,0,0,0"/>
<TextBox Grid.Row="3" Height="75" TextWrapping="Wrap" Margin="0,-10,0,0"/>
<TextBlock Grid.Row="4" Text="Department : " FontFamily="Arial" FontSize="26" FontWeight="SemiBold" Margin="10,0,0,0"/>
<TextBox Grid.Row="5" Height="75" TextWrapping="Wrap" Margin="0,-10,0,0"/>
</Grid>

Now we can see that we have just used 3 or 4 properties but without code reusability. If we could have made a single style tag like we used to do in HTML then it would be much more easier and readable code to work with. The style tag surely reduces the code maintenance time as well.

Making the controls using Style tag

A style tag can be defined inside the static resource section. Resource can be defined in an individual page's XAML file, in the App.xaml file, or in a separate resource dictionary XAML file. A resource dictionary XAML file can be shared across apps, and more than one resource dictionary can be merged in a single app. Where the resource is defined determines the scope in which it can be used. Page-level resources are available only in the page where they are defined. If resources with the same key are defined in both App.xaml and in a page, the resource in the page overrides the resource in App.xaml. Likewise, a resource defined in App.xaml overrides a resource defined with the same key in a separate resource dictionary file.

There are two ways in which we can apply the style in our control

  • Implicit : by specifying only a TargetType for the Style. The Style is applied to all elements whose type matches the target type of the style.
        <Style TargetType="TextBlock">
<Setter Property="FontSize" Value="26"/>
<Setter Property="FontFamily" Value="Arial"/>
<Setter Property="FontWeight" Value="SemiBold"/>
<Setter Property="TextWrapping" Value="Wrap"/>
<Setter Property="Margin" Value="10,0,0,0"/>
</Style>
  • Explicit : by specifying a TargetType and an x:Key attribute for the Style and then by setting the target control's Style property to this key.
        <Style x:Key="TextBlockStyle" TargetType="TextBlock">
<Setter Property="FontSize" Value="26"/>
<Setter Property="FontFamily" Value="Arial"/>
<Setter Property="FontWeight" Value="SemiBold"/>
<Setter Property="TextWrapping" Value="Wrap"/>
<Setter Property="Margin" Value="10,0,0,0"/>
</Style>

Note.pngNote: If a style contains the x:Key attribute,we can apply it to a control by setting the Style property of the control to the keyed style. In contrast, a style without an x:Key attribute is automatically applied to every control of its target type, if the control doesn't have an explicit style setting.

Here I am using an Explicit approach , So, after defining individual style tags for a text box and a text control, our XAMLl code will look like

<phone:PhoneApplicationPage 
x:Class="SampleStyleTag.MainPage"
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:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="Portrait" Orientation="Portrait"
shell:SystemTray.IsVisible="True">
 
<UserControl.Resources>
<Style x:Key="TextBlockStyle" TargetType="TextBlock">
<Setter Property="FontSize" Value="26"/>
<Setter Property="FontFamily" Value="Arial"/>
<Setter Property="FontWeight" Value="SemiBold"/>
<Setter Property="TextWrapping" Value="Wrap"/>
<Setter Property="Margin" Value="10,0,0,0"/>
</Style>
 
<Style x:Key="TextBoxStyle" TargetType="TextBox">
<Setter Property="Height" Value="75"/>
<Setter Property="TextWrapping" Value="Wrap"/>
<Setter Property="Margin" Value="0,-10,0,0"/>
</Style>
</UserControl.Resources>
 
<!--LayoutRoot is the root grid where all page content is placed-->
<!--Add Grid part here-->
</phone:PhoneApplicationPage>
  • Another example of a style tag for the List Picker Control is shown below
        <Style x:Key="ListPickerStyle" TargetType="toolkit:ListPicker">
<Setter Property="HorizontalAlignment" Value="Left"/>
<Setter Property="Margin" Value="0,0,0,30"/>
<Setter Property="FontFamily" Value="Segoe WP Bold"/>
<Setter Property="Height" Value="Auto"/>
<Setter Property="Width" Value="450"/>
<Setter Property="FontSize" Value="32"/>
<Setter Property="VerticalAlignment" Value="Top"/>
</Style>

Using Style tag in controls

We will have to make use of Style property of each control to link our defined corresponding style tags. At last, our code will look something like:

        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<Grid.RowDefinitions>
<RowDefinition Height=".10*"/>
<RowDefinition Height=".30*"/>
<RowDefinition Height=".12*"/>
<RowDefinition Height=".30*"/>
<RowDefinition Height=".12*"/>
<RowDefinition Height=".30*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
 
<TextBlock Grid.Row="0" Text="Name : " Style="{StaticResource TextBlockStyle}"/>
<TextBox Grid.Row="1" Style="{StaticResource TextBoxStyle}"/>
<TextBlock Grid.Row="2" Text="Designation : " Style="{StaticResource TextBlockStyle}"/>
<TextBox Grid.Row="3" Style="{StaticResource TextBoxStyle}"/>
<TextBlock Grid.Row="4" Text="Department : " Style="{StaticResource TextBlockStyle}"/>
<TextBox Grid.Row="5" Style="{StaticResource TextBoxStyle}"/>
</Grid>
</Grid>
  • Now build the project and run it using F5.
This page was last modified on 3 July 2013, at 03:35.
473 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×