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 & 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>