WPF

Question

我正在测试一个最初定义为水平显示的两种颜色线性渐变画笔的按钮。当用户将鼠标悬停在按钮上时，我想将渐变更改为垂直显示的两种颜色，然后在鼠标移出时恢复为默认值。我的第一次尝试失败了，所以现在我尝试用纯色画笔替换画笔来出现，但是没有动画出现。

甚至可以改变渐变方向吗？如果是这样，如何举例说明？
关于纯色画笔（在下面的代码中）...为什么这在鼠标悬停时没有动画？

    <Color x:Key="CorpBlue" A="100" R="91" G="99" B="115"/>
    <Color x:Key="CorpGreen" A="100" R="152" G="151" B="70"/>
    <SolidColorBrush x:Key="BrushColor_3" Color="#FF7F00"/>

    <Style TargetType="Button" x:Key="testButton">
    <Setter Property="BorderBrush" Value="{StaticResource BrushColor_3}"/>
    <Setter Property="BorderThickness" Value="2"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Border x:Name="testBed"
                            Margin="{TemplateBinding Margin}" 
                            BorderBrush="{TemplateBinding BorderBrush}" 
                            BorderThickness="{TemplateBinding BorderThickness}"
                            CornerRadius="10">
                        <Border.Background>
                            <LinearGradientBrush StartPoint="0,0" EndPoint="0,1" x:Name="basicBrush" >
                                <LinearGradientBrush.GradientStops>
                                    <GradientStop x:Name="BackgroundGradientStop1" Offset="0" Color="{StaticResource CorpGreen}"/>
                                    <GradientStop x:Name="BackgroundGradientStop2" Offset="0.5" Color="{StaticResource CorpBlue}"/>
                                    <GradientStop x:Name="BackgroundGradientStop3" Offset="1" Color="{StaticResource CorpGreen}"/>
                                </LinearGradientBrush.GradientStops>
                            </LinearGradientBrush>
                        </Border.Background>
                        <ContentPresenter Margin="{TemplateBinding Padding}"
                                          Content="{TemplateBinding Content}"
                                          ContentTemplate="{TemplateBinding ContentTemplate}"
                                          HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                          VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                    </Border>
                    <ControlTemplate.Triggers>
                        <MultiTrigger>
                            <MultiTrigger.Conditions>
                                <Condition Property="IsEnabled" Value="True"/>
                                <Condition Property="IsPressed" Value="True"/>
                            </MultiTrigger.Conditions>
                            <MultiTrigger.EnterActions>
                                <BeginStoryboard>
                                    <Storyboard x:Name="MouseDownAnimation">
                                        <ColorAnimation Storyboard.TargetName="BackgroundGradientStop1"
                                                        Storyboard.TargetProperty="Color"
                                                        To="{StaticResource CorpBlue_T1}"
                                                        Duration="0:0:0:1"/>
                                        <ColorAnimation Storyboard.TargetName="BackgroundGradientStop2"
                                                        Storyboard.TargetProperty="Color"
                                                        To="{StaticResource CorpGreen_T1}"
                                                        Duration="0:0:0:1"/>
                                    </Storyboard>
                                </BeginStoryboard>
                            </MultiTrigger.EnterActions>
                            <MultiTrigger.ExitActions>
                                <BeginStoryboard>
                                    <Storyboard x:Name="MouseUpAnimation">
                                        <ColorAnimation Storyboard.TargetName="BackgroundGradientStop1"
                                                        Storyboard.TargetProperty="Color"
                                                        To="{StaticResource CorpBlue}"
                                                        Duration="0:0:0:1"/>
                                        <ColorAnimation Storyboard.TargetName="BackgroundGradientStop2"
                                                        Storyboard.TargetProperty="Color"
                                                        To="{StaticResource CorpGreen}"
                                                        Duration="0:0:0:1"/>
                                    </Storyboard>
                                </BeginStoryboard>
                            </MultiTrigger.ExitActions>
                        </MultiTrigger>
                        <MultiTrigger>
                            <MultiTrigger.Conditions>
                                <Condition Property="IsEnabled" Value="True"/>
                                <Condition Property="IsMouseOver" Value="True"/>
                            </MultiTrigger.Conditions>
                            <MultiTrigger.EnterActions>
                                <BeginStoryboard>
                                    <Storyboard x:Name="MouseOverAnimation"  >
                                        <ColorAnimation Storyboard.TargetName="testBed"
                                                        Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)"
                                                        From="Black" To="Green"
                                                        Duration="0:0:0:1"/>
                                    </Storyboard>
                                </BeginStoryboard>
                            </MultiTrigger.EnterActions>
                        </MultiTrigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

Answer 1

你定义的颜色资源太相似了，我根本无法用肉眼检测到任何变化。在我将 Alpha (A) 通道从 100 更改为 255（完全不透明）并将颜色更改为具有一定对比度的颜色后，可以看到您拥有的渐变颜色动画效果很好。

下面说明如何将渐变方向从水平方向设置为垂直方向。

LinearGradientBrush不能作为目标，但可以绑定其属性。 LinearGradientBrush.EndPoint是一个点。所以我在某处的依赖项属性中放置了一个 Point，绑定到它，并使用 PointAnimation 为该点设置动画。

您还必须在退出操作中为其设置动画。

<ControlTemplate TargetType="Button">
    <Border x:Name="testBed"
            Margin="{TemplateBinding Margin}" 
            BorderBrush="{TemplateBinding BorderBrush}" 
            BorderThickness="{TemplateBinding BorderThickness}"
            CornerRadius="10"
            >
        <Border.Tag>
            <!-- You could find a better place to put this, but it'll do for an example. -->
            <!-- See binding on basicBrush.EndPoint just below -->
            <Point X="0" Y="1" />
        </Border.Tag>
        <Border.Background>
            <LinearGradientBrush StartPoint="0,0" EndPoint="{Binding Tag, ElementName=testBed}" x:Name="basicBrush">
                <LinearGradientBrush.GradientStops>
                    <GradientStop x:Name="BackgroundGradientStop1" Offset="0" Color="{StaticResource CorpGreen}"/>

在触发器中：

<Storyboard x:Name="MouseDownAnimation">
    <ColorAnimation Storyboard.TargetName="BackgroundGradientStop1"
                    Storyboard.TargetProperty="Color"
                    To="{StaticResource CorpBlue_T1}"
                    Duration="0:0:0:1"/>
    <ColorAnimation Storyboard.TargetName="BackgroundGradientStop2"
                    Storyboard.TargetProperty="Color"
                    To="{StaticResource CorpGreen_T1}"
                    Duration="0:0:0:1"/>

    <PointAnimation Storyboard.TargetName="testBed"
                    Storyboard.TargetProperty="Tag"
                    From="0,1"
                    To="1,0"
                    Duration="0:0:0:1"
                    />

WPF - 在鼠标悬停时将背景从线性更改为实体

WPF - Change background from linear to solid on mouseover

xaml

gradient

lineargradientbrush