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
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");
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>
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--> <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>