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.

Original source