• Only dependency properties can be targeted by a Style.
• The TargetType value must specify a FrameworkElement-derived type.

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:

• It provides a kind of “default template” when combined with an explicit style.
• It provides default property values for the template.

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.