1

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

  • 甚至可以改变梯度方向吗？如果是这样，一个例子如何？
  • 关于纯色画笔（在下面的代码中）......为什么鼠标悬停时可能没有动画？
    <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>
4

1 回答 1

1

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

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

LinearGradientBrush 不能作为目标，但可以绑定其属性。LinearGradientBrush.EndPoint是一个点。所以我在某个依赖属性中放置了一个点，绑定到它，并使用 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"
                    />
于 2019-06-03T17:54:58.003 回答