#141 – Dependency Property Value Sources: #7 – Style Setters

The seventh source in the list of sources for the base value of a dependency property is a style setter. A property obtains its value from a style setter when a style is applied to the parent element and the property’s value is set using a Setter in that style.

In the example below, a button has the style redBlueTextButton applied to it. This style sets the Foreground property to red using a Setter.  It also sets the property to blue when you hover the mouse over the control. The source of the Foreground property is style (style setter) to start with and then becomes style trigger when you move the mouse over the control.

    <Window.Resources>
        <Style x:Key="redBlueTextButton" TargetType="{x:Type Button}">
            <Setter Property="Foreground" Value="Red"/>
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Foreground" Value="Blue"/>
                </Trigger>
            </Style.Triggers>
        </Style>
    </Window.Resources>
    <StackPanel Orientation="Vertical">
        <Button Content="Run" Height="23" Width="75" Style="{StaticResource redBlueTextButton}"/>
        <Button Content="Skip" Height="23" Width="75"/>
    </StackPanel>
Advertisements

#140 – Dependency Property Value Sources: #6 – Template Triggers

The sixth source in the list of sources for the base value of a dependency property is a template trigger. A property obtains its value from a template trigger when the element that the property belongs to has a template containing a trigger that changes the property.

In the example below, we apply a template to the main button, replacing it with two labels and a new button.  The trigger changes the Foreground property of the original button, so the property source for that property becomes template trigger.

The original button is replaced by the controls in the template, but its Foreground property is preserved by using the TemplateBinding markup extension.

        <Button Name="btnWithTemplate" Content="Recreate Me">
            <Button.Template>
                <ControlTemplate TargetType="{x:Type Button}">
                    <StackPanel Orientation="Horizontal">
                        <Label Content="**" Foreground="{TemplateBinding Foreground}"/>
                        <Button Content="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}"/>
                        <Label Content="**" Foreground="{TemplateBinding Foreground}"/>
                    </StackPanel>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="Foreground" Value="Green"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Button.Template>
        </Button>

#139 – Dependency Property Value Sources: #5 – Style Triggers

The fifth source in the list of sources for the base value of a dependency property is a style trigger. A property obtains its value from a style trigger when a style is applied to the parent element and the property’s value changes as a result of a trigger firing.

In the example below, a button has the style blueTextButton applied to it.  This style sets the Foreground property to blue when you hover the mouse over the control.  The source of the Foreground property then becomes style trigger when the trigger fires.

    <Window.Resources>
        <Style x:Key="blueTextButton">
            <Style.Triggers>
                <Trigger Property="Button.IsMouseOver" Value="True">
                    <Setter Property="Button.Foreground" Value="Blue"/>
                </Trigger>
            </Style.Triggers>
        </Style>
    </Window.Resources>
    <StackPanel Orientation="Vertical">
        <Button Content="Run" Height="23" Width="75" Style="{StaticResource blueTextButton}" />
        <Button Content="Skip" Height="23" Width="75" />
    </StackPanel>

#138 – Dependency Property Value Sources: #4 – Implicit Style

The fourth source in the list of sources for the base value of a dependency property is an implicit style.  This rule applies only to the Style dependency property.

The Style property obtains its value implicitly when a style is applied to all elements whose type matches the specified TargetType of the style.

Since an explicit style is treated as a local value, the resulting precedence list for the Style property, highest to lowest, is:

  • Explicit style (local value)
  • Implicit style
  • Default value

In the example below, we use an implicit style to set the style of two different Button elements.

    <Window.Resources>
        <Style TargetType="Button">
            <Setter Property="Control.FontStyle" Value="Italic"/>
        </Style>
    </Window.Resources>
    <StackPanel>
        <Button Content="Click Me" Height="23" Width="125" />
        <Button Content="Or Me" Height="23" Width="125" />
    </StackPanel>

#137 – The Value of the Style Property Comes From One of Three Places

The Style property is the one dependency property that doesn’t follow the full list of property value precedence rules.  Its value can come from one of three different sources, listed below.

  1. Explicit style – Style is explicitly specified, either inline in XAML, as a resource, or specified in code.  Treated as a local value
  2. Implicit style – Style is applied to all elements whose type matches the target type of the style
  3. Default – No style is specified, default styling used

Here’s an example of an explicit style.

    <Window.Resources>
        <Style x:Key="anItalicButton">
            <Setter Property="Control.FontStyle" Value="Italic"/>
        </Style>
    </Window.Resources>
    <StackPanel>
        <Button Content="Click Me" Height="23" Width="125" Style="{StaticResource anItalicButton}"/>
        <Button Content="Or Me" Height="23" Width="125" />
    </StackPanel>

Here’s an example of an implicit style, applied to all Button elements.

    <Window.Resources>
        <Style TargetType="Button">
            <Setter Property="Control.FontStyle" Value="Italic"/>
        </Style>
    </Window.Resources>
    <StackPanel>
        <Button Content="Click Me" Height="23" Width="125" />
        <Button Content="Or Me" Height="23" Width="125" />
    </StackPanel>

#136 – Dependency Property Value Sources: #3 – Parent Template

The third source in the list of sources for the base value of a dependency property is a parent template.  A property obtains its value from a parent template if the element for which the property is being set was created as part of a template and it doesn’t obtain its value through a trigger.

In the example below, the excitedLabel template has two child Label controls.  The first one has its Background property set in the template, so the source of the base value is the parent template.

    <Window.Resources>
        <ControlTemplate x:Key="excitedLabel" TargetType="Label">
            <StackPanel Orientation="Horizontal">
                <Label Name="theYee" Background="AliceBlue" Content="Yee!"/>
                <ContentPresenter />
                <Label Name="theHaw" Content="Haw!"/>
            </StackPanel>
        </ControlTemplate>
    </Window.Resources>
    <StackPanel Orientation="Vertical">
        <Label Content="Run" />
        <Label Content="Skip" Template="{StaticResource excitedLabel}"/>
    </StackPanel>

#135 – Dependency Property Value Sources: #2 – Parent Template Trigger

The second source in the list of sources for the base value of a dependency property is a parent template trigger.  A property obtains its value from a parent template trigger if the element was created as part of a template and its value is being set by a trigger defined in the template.

In the example below, the excitedLabel template has two child Label controls whose Background property changes when you hover the mouse over the parent control.  When this happens, the source of their Background property becomes the parent template trigger.

    <Window.Resources>
        <ControlTemplate x:Key="excitedLabel" TargetType="Label">
            <StackPanel Orientation="Horizontal">
                <Label Name="theYee" Content="Yee!"/>
                <ContentPresenter />
                <Label Name="theHaw" Content="Haw!"/>
            </StackPanel>
            <ControlTemplate.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter TargetName="theHaw" Property="Background" Value="HotPink"/>
                    <Setter TargetName="theYee" Property="Background" Value="HotPink"/>
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>
    </Window.Resources>
    <StackPanel Orientation="Vertical">
        <Label Content="Run" />
        <Label Content="Skip" Template="{StaticResource excitedLabel}"/>
    </StackPanel>