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-鼠标悬停时将背景从线性更改为实体

1 个答案: