WPF Button Styling Trigger
.net, wpf
Solution
You need to set the target of your setter to the `Border` element that you defined in your `ControlTemplate`. Currently, it is targeting the `Background` property of the `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 a `x:Name` property to the `Border` element so that it can be referenced with the `TargetName` property on the `Setter`.
Problem
I'm stuck with Styles in WPF. I need the background gradient to change when the user hovers their mouse over the button, but I cannot figure out how to go about the change. This is the code I have so far: ``` <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 properly, but the background gradient does not change.