WPF Button Theme – Trigger and Setter Property

---

Here is the sample code WPF Button Theme – Trigger and Setter Property

A theme code for mouse over the button, change the background color is given on this page. It is getting achieved with the control trigger property and setter property. The code is written in ControlTemplate.Triggers.

 

   <Window.Resources>

      <ResourceDictionary>

         <ResourceDictionary.MergedDictionaries>

            <ResourceDictionary Source="MyTheme.xaml"/>

         </ResourceDictionary.MergedDictionaries>

      </ResourceDictionary>

   </Window.Resources>

 

<Button Name="Plus" Width="20" Height="16" Margin="10,0,0,0" HorizontalAlignment="Center"  VerticalAlignment="Center" Style="{DynamicResource PlusMarkButton}"></Button>

         <Button Name="XMark" Width="20" Height="16" Margin="10,0,0,0" HorizontalAlignment="Center"  VerticalAlignment="Center" Style="{DynamicResource XMarkButton}"></Button>

 

 

 

The MyTheme.xaml file would look like,

 

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

 

   <Style x:Key="XMarkButton"

           BasedOn="{x:Null}"

           TargetType="{x:Type Button}">

      <Setter Property="FocusVisualStyle" Value="{x:Null}" />

      <Setter Property="FontSize" Value="10" />

      <Setter Property="Padding" Value="10,0,10,0" />

      <Setter Property="Foreground" Value="Black" />

      <Setter Property="HorizontalContentAlignment" Value="Center" />

      <Setter Property="VerticalContentAlignment" Value="Center" />

      <Setter Property="Template">

         <Setter.Value>

            <ControlTemplate TargetType="{x:Type Button}">

               <Grid>

                  <Border CornerRadius="10,10,10,10"

                                Padding="0,0,0,0"

                                x:Name="border"

                                BorderThickness="0">

                     <Border.BorderBrush>

                        <LinearGradientBrush EndPoint="0.5,1"

                                                     StartPoint="0.5,0">

                           <GradientStop Color="Black" Offset="1" />

                           <GradientStop Color="Black" Offset="0" />

                        </LinearGradientBrush>

                     </Border.BorderBrush>

                     <Border.Background>

                        <LinearGradientBrush EndPoint="0.5,1"

                                                     StartPoint="0.5,0">

                           <GradientStop Color="LightGray" Offset="0" />

                           <GradientStop Color="DarkGray" Offset="1" />

                        </LinearGradientBrush>

                     </Border.Background>

                     <Grid>

                        <Rectangle Fill="{x:Null}"

                                           Stroke="{x:Null}"

                                           StrokeThickness="0"

                                           HorizontalAlignment="Stretch"

                                           RadiusX="10"

                                           RadiusY="10" />

                        <Path Fill="{x:Null}"

                                      Stretch="Fill"

                                      Stroke="White"

                                      Width="Auto"

                                      Data="M5.5,0.5 L5.5,10.5 M0.5,5.5 L10.5,5.5"

                                      x:Name="path"

                                      StrokeThickness="2"

                                      Margin="0,0,0,0">

                           <Path.LayoutTransform>

                              <TransformGroup>

                                 <ScaleTransform ScaleX="1"

                                                            ScaleY="1" />

                                 <SkewTransform AngleX="0"

                                                           AngleY="0" />

                                 <RotateTransform Angle="45" />

                                 <TranslateTransform X="0"

                                                                Y="0" />

                              </TransformGroup>

                           </Path.LayoutTransform>

                        </Path>

                     </Grid>

                  </Border>

               </Grid>

 

               <ControlTemplate.Triggers>

                  <Trigger Property="IsFocused" Value="True" />

                  <Trigger Property="IsMouseOver" Value="True">

                     <Setter Property="IsEnabled"  Value="True"/>

                     <Setter Property="Background" TargetName="border">

                        <Setter.Value>

                           <LinearGradientBrush EndPoint="0.5,1"

                                                         StartPoint="0.5,0">

                              <GradientStop Color="Red"

                                                      Offset="0" />

                              <GradientStop Color="DarkRed"

                                                      Offset="1" />

                           </LinearGradientBrush>

                        </Setter.Value>

                     </Setter>

                     <Setter Property="Stroke" TargetName="path">

                        <Setter.Value>White</Setter.Value>

                     </Setter>

                  </Trigger>

 

 

               </ControlTemplate.Triggers>

            </ControlTemplate>

         </Setter.Value>

      </Setter>

   </Style>

  

  

   <Style x:Key="PlusMarkButton"

           BasedOn="{x:Null}"

           TargetType="{x:Type Button}">

      <Setter Property="FocusVisualStyle" Value="{x:Null}" />

      <Setter Property="FontSize" Value="10" />

      <Setter Property="Padding" Value="10,0,10,0" />

      <Setter Property="Foreground" Value="Black" />

      <Setter Property="HorizontalContentAlignment" Value="Center" />

      <Setter Property="VerticalContentAlignment" Value="Center" />

      <Setter Property="Template">

         <Setter.Value>

            <ControlTemplate TargetType="{x:Type Button}">

               <Grid>

                  <Border CornerRadius="10,10,10,10"

                                Padding="0,0,0,0"

                                x:Name="border"

                                BorderThickness="0">

                     <Border.BorderBrush>

                        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

                           <GradientStop Color="Black" Offset="1" />

                           <GradientStop Color="Black" Offset="0" />

                        </LinearGradientBrush>

                     </Border.BorderBrush>

                     <Border.Background>

                        <LinearGradientBrush EndPoint="0.5,1"

                                                     StartPoint="0.5,0">

                           <GradientStop Color="LightGray" Offset="0" />

                           <GradientStop Color="DarkGray" Offset="1" />

                        </LinearGradientBrush>

                     </Border.Background>

                     <Grid>

                        <Rectangle Fill="{x:Null}"

                                           Stroke="{x:Null}"

                                           StrokeThickness="0"

                                           HorizontalAlignment="Stretch"

                                           RadiusX="10"

                                           RadiusY="10" />

                        <Path Fill="{x:Null}"

                                      Stretch="None"

                                      HorizontalAlignment="Center"

                                      VerticalAlignment="Center"

                                      Stroke="White"

                                      Width="Auto"

                                      Data="M5.0,0.5 L5.0,10.0 M0.5,5.0 L10.0,5.0"

                                      x:Name="path"

                                      StrokeThickness="2"

                                      Margin="0,0,0,0">

                        </Path>

                     </Grid>

                  </Border>

               </Grid>

 

               <ControlTemplate.Triggers>

                  <Trigger Property="IsFocused" Value="True" />

                  <Trigger Property="IsMouseOver" Value="True">

                     <Setter Property="IsEnabled"  Value="True"/>

                     <Setter Property="Background" TargetName="border">

                        <Setter.Value>

                           <LinearGradientBrush EndPoint="0.5,1"

                                                         StartPoint="0.5,0">

                              <GradientStop Color="Green"

                                                      Offset="0" />

                              <GradientStop Color="Green"

                                                      Offset="1" />

                           </LinearGradientBrush>

                        </Setter.Value>

                     </Setter>

                     <Setter Property="Stroke" TargetName="path">

                        <Setter.Value>White</Setter.Value>

                     </Setter>

                  </Trigger>

 

 

               </ControlTemplate.Triggers>

            </ControlTemplate>

         </Setter.Value>

      </Setter>

   </Style>

</ResourceDictionary>

 

 

---

---

---