Geek Answers Handbook

WPF Button Styling Trigger

I am stuck with styles in WPF. I need a background gradient to change when the user hovers over the button, but I cannot figure out how to do this. This is the code that I still have:

<Style x:Key="Button_Green" TargetType="{x:Type Button}"> <Setter Property="FontSize" Value="11" /> <Setter Property="Foreground" Value="White"/> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type Button}"> <Border CornerRadius="2" BorderBrush="#387f38" BorderThickness="1"> <Border.Background> <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> <GradientStop Color="#FF5BB75B" Offset="0" /> <GradientStop Color="#FF449B44" Offset="1" /> </LinearGradientBrush> </Border.Background> <ContentPresenter x:Name="ButtonContentPresenter" VerticalAlignment="Center" HorizontalAlignment="Center"/> </Border> </ControlTemplate> </Setter.Value> </Setter> <Style.Triggers> <Trigger Property="IsMouseOver" Value="True"> <Setter Property="Background"> <Setter.Value> <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> <GradientStop Color="#FF5BB75B" Offset="0" /> <GradientStop Color="#FF398239" Offset="1" /> </LinearGradientBrush> </Setter.Value> </Setter> <Setter Property="Cursor" Value="Hand" /> </Trigger> </Style.Triggers> </Style>

The mouse cursor changes correctly, but the background gradient does not change.

+3
source share
2 answers

You need to set your setter target to the Border element that you defined in the ControlTemplate . It currently targets the Background property of Button itself, which is hidden by your custom ControlTemplate .

 <Style x:Key="Button_Green" TargetType="{x:Type Button}"> <Setter Property="FontSize" Value="11" /> <Setter Property="Foreground" Value="White"/> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type Button}"> <Border x:Name="MyBackgroundElement" CornerRadius="2" BorderBrush="#387f38" BorderThickness="1"> <Border.Background> <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> <GradientStop Color="#FF5BB75B" Offset="0" /> <GradientStop Color="#FF449B44" Offset="1" /> </LinearGradientBrush> </Border.Background> <ContentPresenter x:Name="ButtonContentPresenter" VerticalAlignment="Center" HorizontalAlignment="Center"/> </Border> <ControlTemplate.Triggers> <Trigger Property="IsMouseOver" Value="True"> <Setter TargetName="MyBackgroundElement" Property="Background"> <Setter.Value> <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> <GradientStop Color="#FF5BB75B" Offset="0" /> <GradientStop Color="#FF398239" Offset="1" /> </LinearGradientBrush> </Setter.Value> </Setter> <Setter Property="Cursor" Value="Hand" /> </Trigger> </ControlTemplate.Triggers> </ControlTemplate> </Setter.Value> </Setter> </Style>

Here I added the x:Name property to the Border element so that it can be referenced using the TargetName property on the Setter .

+3
source

Change this snippet from the template

 <Border CornerRadius="2" BorderBrush="#387f38" BorderThickness="1"> <Border.Background> <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> <GradientStop Color="#FF5BB75B" Offset="0" /> <GradientStop Color="#FF449B44" Offset="1" /> </LinearGradientBrush> </Border.Background> <ContentPresenter x:Name="ButtonContentPresenter" VerticalAlignment="Center" HorizontalAlignment="Center"/> </Border>

To this (the important part is Background="{TemplateBinding Background}" ):

 <Border CornerRadius="2" BorderBrush="#387f38" BorderThickness="1" Background="{TemplateBinding Background}"> <ContentPresenter x:Name="ButtonContentPresenter" VerticalAlignment="Center" HorizontalAlignment="Center"/> </Border>

And then add an extra setter to your style as follows:

 <Setter Property="Background"> <Setter.Value> <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> <GradientStop Color="#FF5BB75B" Offset="0" /> <GradientStop Color="#FF449B44" Offset="1" /> </LinearGradientBrush> </Setter.Value> </Setter>
0
source

More articles:


All Articles