Example: An implicit style (a.k.a. typed style) defined in page resources:
<Page x:Class="TestApp.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:TestApp"> <Page.Resources> <Style TargetType="Button"> <Setter Property="BorderThickness" Value="5" /> <Setter Property="Foreground" Value="Blue" /> </Style> </Page.Resources> <Grid> <Button Content="Button"/> </Grid> </Page>
Example: A style defined using property element syntax:
<Style TargetType="Button"> <Setter Property="Foreground" Value="White" /> <Setter Property="Background"> <Setter.Value> <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1"> <GradientStop Color="Red" Offset="0.0" /> <GradientStop Color="Blue" Offset="1.0" /> </LinearGradientBrush> </Setter.Value> </Setter> </Style>
Example: An explicit style (a.k.a. named style):
<Page.Resources> <Style x:Key="HeaderTextStyle" TargetType="TextBlock"> <Setter Property="Foreground" Value="Blue" /> <Setter Property="FontSize" Value="44"/> </Style> </Page.Resources> <Grid> <TextBlock Text="Hello App" Style="{StaticResource HeaderTextStyle}" /> </Grid>
Example: Style inheritance using BasedOn:
<Page.Resources> <Style x:Key="CustomStyle" TargetType="Button"> <Setter Property="FontFamily" Value="Arial" /> <Setter Property="FontWeight" Value="Bold" /> <Setter Property="Width" Value="300" /> <Setter Property="Margin" Value="5" /> <Setter Property="Padding" Value="10" /> </Style> <Style x:Key="ColoredCustomStyle" TargetType="Button" BasedOn="{StaticResource CustomStyle}"> <Setter Property="Foreground" Value="Yellow" /> <Setter Property="Background" Value="Navy" /> </Style> </Page.Resources> <Grid> <StackPanel Margin="20"> <Button Content="Button with CustomStyle" Style="{StaticResource CustomStyle}" /> <Button Content="Button with ColoredCustomStyle" Style="{StaticResource ColoredCustomStyle}" /> </StackPanel> </Grid>
Example: Two styles (ButtonStyle and TextBoxStyle) targeting different controls that inherit from the same base class (in this example the Control class):
<Page.Resources> <Style x:Key="BasicStyle" TargetType="Control"> <Setter Property="Width" Value="150" /> <Setter Property="Height" Value="30" /> <Setter Property="BorderThickness" Value="2" /> <Setter Property="HorizontalAlignment" Value="Center" /> </Style> <Style x:Key="ButtonStyle" TargetType="Button" BasedOn="{StaticResource BasicStyle}"> <Setter Property="BorderBrush" Value="Blue" /> <Setter Property="Foreground" Value="Red" /> </Style> <Style x:Key="TextBoxStyle" TargetType="TextBox" BasedOn="{StaticResource BasicStyle}"> <Setter Property="BorderBrush" Value="Magenta" /> <Setter Property="Foreground" Value="Green" /> </Style> </Page.Resources> <Grid> <StackPanel> <Button Content="Button" Style="{StaticResource ButtonStyle}" Margin="0,5"/> <TextBox Text="TextBox" Style="{StaticResource TextBoxStyle}" Margin="0,5" /> </StackPanel> </Grid>
Example: Clearing an implicit style from an element using the null markup value x:Null:
<Page.Resources> <Style TargetType="Button"> <Setter Property="Foreground" Value="Red" /> <Setter Property="Background" Value="Blue" /> </Style> </Page.Resources> <Grid> <StackPanel Margin="20"> <Button Content="Button with a style" Width="180" Margin="0,10" /> <Button Content="Button with no style" Width="180" Style="{x:Null}" /> </StackPanel> </Grid>
Example: A control template (i.e., Template property) defined in a style:
<Style x:Key="ToggleButtonStyle1" TargetType="ToggleButton"> <Setter Property="Background" Value="Transparent" /> <Setter Property="Padding" Value="8,4,8,4"/> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="ToggleButton"> ... </ControlTemplate> </Setter.Value> </Setter> </Style>
Defining the Template property inside a Style has the following advantages:
Example: A style defined on a base class. In this example, the style is shared by any element derived from the Control class:
<Page.Resources> <Style x:Key="Style1" TargetType="Control"> <Setter Property="Foreground" Value="Blue" /> <Setter Property="FontSize" Value="44"/> </Style> </Page.Resources> <StackPanel> <Button Content="Hello" Style="{StaticResource Style1}" /> <ProgressRing IsActive="True" Style="{StaticResource Style1}" /> <ToggleSwitch Style="{StaticResource Style1}" /> </StackPanel>
Note that defining a style on a base class works only with explicit styles. Implicit styles do not work that way. The following code does not have the desired effect:
<Page.Resources> <Style TargetType="Control"> <Setter Property="Foreground" Value="Blue" /> <Setter Property="FontSize" Value="44"/> </Style> </Page.Resources> <StackPanel> <Button Content="Hello" /> <ProgressRing IsActive="True" /> <ToggleSwitch /> </StackPanel>
Example: Define ThemeDictionaries:
<Application x:Class="TestApp.App" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:TestApp" RequestedTheme="Light"> <Application.Resources> <ResourceDictionary> <ResourceDictionary.ThemeDictionaries> <ResourceDictionary x:Key="Dark"> <Style x:Key="AppBodyTextBlockStyle" TargetType="TextBlock" BasedOn="{StaticResource BodyTextBlockStyle}"> <Setter Property="Foreground" Value="White"/> </Style> <Style x:Key="AppCaptionTextBlockStyle" TargetType="TextBlock" BasedOn="{StaticResource CaptionTextBlockStyle}"> <Setter Property="FontSize" Value="12"/> <Setter Property="Foreground" Value="White"/> </Style> </ResourceDictionary> <ResourceDictionary x:Key="Light"> <Style x:Key="AppBodyTextBlockStyle" TargetType="TextBlock" BasedOn="{StaticResource BodyTextBlockStyle}"> <Setter Property="Foreground" Value="Black"/> </Style> <Style x:Key="AppCaptionTextBlockStyle" TargetType="TextBlock" BasedOn="{StaticResource CaptionTextBlockStyle}"> <Setter Property="FontSize" Value="12"/> <Setter Property="Foreground" Value="Black"/> </Style> </ResourceDictionary> <!-- don't set the Foreground in a high contrast theme --> <ResourceDictionary x:Key="HighContrast"> <Style x:Key="AppBodyTextBlockStyle" TargetType="TextBlock" BasedOn="{StaticResource BodyTextBlockStyle}" /> <Style x:Key="AppCaptionTextBlockStyle" TargetType="TextBlock" BasedOn="{StaticResource CaptionTextBlockStyle}"> <Setter Property="FontSize" Value="12"/> </Style> </ResourceDictionary> </ResourceDictionary.ThemeDictionaries> </ResourceDictionary> </Application.Resources> </Application>
You can find more information on ThemeDictionaries here.