This is an old revision of the document!


WPF Styles and Triggers
Styles

Static resource style definition for a button:

<Style x:Key="TopButtonStyle" TargetType="Button">
        <!--<Setter Property="FontFamily" Value="Century Gothic" />-->
        <Setter Property="FontFamily" Value="Segoe UI" />
        <!--<Setter Property="FontSize" Value="15" />-->
        <!--<Setter Property="FontWeight" Value="Bold" />-->
        <!--<Setter Property="Foreground" Value="#FF5f5f5f" />-->
        <Setter Property="Margin" Value="10,0,0,0" />
        <Setter Property="Height" Value="30" />
        <Setter Property="HorizontalAlignment" Value="Stretch" />
        <Setter Property="Background" Value="Transparent" />
        <Setter Property="Foreground" Value="#FFE77AAB" /> <!--Pink/Violet-->
        <Style.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter Property="Button.Foreground" Value="Gray" />
            </Trigger>
        </Style.Triggers>
</Style>

Using the style:

<Button Name="btnSaveAndProg" Width="100" Style="{StaticResource TopButtonStyle}">Save &amp; Program</Button>

Changing styles programmatically:

void Page_Load(object sender, RoutedEventArgs e) {
    if (DateTime.Now.Month > 8 || DateTime.Now.Month < 3) {
        Button1.Style = (Style)FindResource("WinterStyle");
    } else {
        Button1.Style = (Style)FindResource("SummerStyle");
    }
}

Source: Styles and Triggers in WPF

Triggers

Example of a trigger that kicks in when MouseOver event occurs:

<Style TargetType="{x:Type Button}">
  <Setter Property="Button.Background" Value="AliceBlue" />
  ...
  <Style.Triggers>
    <Trigger Property="IsMouseOver" Value="True">
      <Setter Property="Button.Background" Value="Yellow" />
    </Trigger>
  </Style.Triggers>
</Style>
TreeView with new Template

This TreeView template changes the expander (+/-) to new icons:

<Style x:Key="styleTreeViewExpandCollapse" TargetType="{x:Type ToggleButton}">
        <Setter Property="OverridesDefaultStyle" Value="True"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ToggleButton}">
                    <Image x:Name="image" Source="images/img1.ico" />
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsChecked" Value="true">
                            <Setter TargetName="image" Property="Source" Value="images/img2.ico" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
</Style>
<Style x:Key="styleTreeView" TargetType="{x:Type TreeViewItem}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type TreeViewItem}">
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition MinWidth="19" Width="Auto"/>
                            <ColumnDefinition Width="Auto"/>
                            <ColumnDefinition Width="*"/>
                        </Grid.ColumnDefinitions>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition/>
                        </Grid.RowDefinitions>
                        <ToggleButton x:Name="Expander" Grid.Column="0" 
                              Style="{StaticResource styleTreeViewExpandCollapse}" 
                              IsChecked="{Binding Path=IsExpanded,RelativeSource={RelativeSource TemplatedParent}}" 
                              ClickMode="Press" Width="16" Height="16"/>
                        <ContentPresenter x:Name="PART_Header" Grid.Column="1" 
                              ContentSource="Header" 
                              HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"/>
                        <ItemsPresenter x:Name="ItemsHost" Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="2"/>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsExpanded" Value="false">
                            <Setter TargetName="ItemsHost" Property="Visibility" Value="Collapsed"/>
                        </Trigger>
                        <Trigger Property="HasItems" Value="false">
                            <Setter TargetName="Expander" Property="Visibility" Value="Hidden"/>
                        </Trigger>
                        <MultiTrigger>
                            <MultiTrigger.Conditions>
                                <Condition Property="HasHeader" Value="false"/>
                                <Condition Property="Width" Value="Auto"/>
                            </MultiTrigger.Conditions>
                            <Setter TargetName="PART_Header" Property="MinWidth" Value="75"/>
                        </MultiTrigger>
                        <MultiTrigger>
                            <MultiTrigger.Conditions>
                                <Condition Property="HasHeader" Value="false"/>
                                <Condition Property="Height" Value="Auto"/>
                            </MultiTrigger.Conditions>
                            <Setter TargetName="PART_Header" Property="MinHeight" Value="19"/>
                        </MultiTrigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
</Style>