swdev:dotnet:wpf:styles_and_triggers [Audina Documentation]

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

Style Tricks

To use a parent property value, rather than a predefined value, use TemplateBinding + PropertyName. For example:

<Style...>
  <Setter Property="Template">
    <Setter.Value>
       <ControlTemplate TargetType="{x:Type ListBox}">
           <Border 
               HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
               Background="{TemplateBinding Background}" 
               />
               ...
       </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

Restyle Datagrid's Checkbox column:

<UserControl.Resources>
    <DataTemplate x:Key="MyCheckBoxTemplate">
        <CheckBox Style="{StaticResource AnyResourceKeyInApplecation}"/>
    </DataTemplate>
</UserControl.Resources>
<DataGrid x:Name="dataGrid" />

this.dataGrid.Columns.Add(new DataGridTemplateColumn{
    CellTemplate=this.Resources["MyCheckBoxTemplate"] as DataTemplate});
 
// OR this way:    
column2.ElementStyle = Application.Current.FindResource("MyCheckBoxStyle");

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>

iPad-style Switch (using CheckBox)

<!--iPad style Switch-->
<CheckBox
     Grid.Column="0"
     HorizontalAlignment="Center"
     Margin="10"
     VerticalAlignment="Center"
     Content="Click Me"
     FontSize="48" Width="200">
    <CheckBox.Template>
        <ControlTemplate TargetType="{x:Type CheckBox}">
            <Viewbox>
                <Border x:Name="borderMain" CornerRadius="20" BorderBrush="DarkGray" BorderThickness="3" Grid.ColumnSpan="3" Grid.RowSpan="3">
                    <Grid Width="191" Height="50">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="0.25*"/>
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="0.35*"/>
                            <ColumnDefinition Width="0.30*"/>
                            <ColumnDefinition Width="0.35*"/>
                        </Grid.ColumnDefinitions>
                        <Rectangle x:Name="btnCheckBox" Grid.Column="0" Grid.ColumnSpan="2" Width="Auto" Height="Auto" RadiusY="20" RadiusX="20" StrokeThickness="5">
                            <Rectangle.Fill>
                                <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
                                    <GradientStop Offset="1" Color="#FFDFDFDF"/>
                                    <GradientStop Offset="0" Color="#FF7D7D7D"/>
                                </LinearGradientBrush>
                            </Rectangle.Fill>
                            <Rectangle.Stroke>
                                <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
                                    <GradientStop Offset="0" Color="#FFA2A2A2"/>
                                    <GradientStop Offset="1" Color="#FF535353"/>
                                </LinearGradientBrush>
                            </Rectangle.Stroke>
                            <Rectangle.Effect>
                                <DropShadowEffect Direction="240" ShadowDepth="3"/>
                            </Rectangle.Effect>
                        </Rectangle>
                        <TextBlock Name="txtText" Grid.Column="2" Text="Off" FontSize="25" Margin="5" HorizontalAlignment="Center" />
                    </Grid>
                </Border>
            </Viewbox>
            <ControlTemplate.Triggers>
                <Trigger Property="IsChecked" Value="true">
                      <Setter TargetName="btnCheckBox" Property="Grid.Column" Value="1" />
                      <Setter TargetName="txtMain" Property="Grid.Column" Value="0" />
                      <Setter TargetName="txtMain" Property="Text" Value="On" />
                      <Setter TargetName="borderMain" Property="Background" Value="SteelBlue" />
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>
    </CheckBox.Template>
</CheckBox>

Resources

MSDN: Styling and Templating