WPF按钮样式触发 [英] WPF Button Styling Trigger

问题描述

我卡在WPF样式。我需要的背景渐变当用户将鼠标悬停的鼠标按钮改变，但我无法弄清楚如何去改变。这是code我到目前为止有：

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.

推荐答案

您需要设置你的二传手为您在<$定义的边框元素的目标C $ C>控件模板。目前，它瞄准的是背景的按钮本身，这是隐藏在您的自定义控件模板。

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>

在这里，我添加了一个 X：名称属性设置为边框元素，这样就可以与引用的TargetName 的属性二传手。

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

这篇关于WPF按钮样式触发的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！