画布中路径的动画填充颜色

Posted 2023-02-22

【中文标题】画布中路径的动画填充颜色

【英文标题】：Animate Fill Color of a Path In a Canvas

【发布时间】：2011-03-11 04:54:45

【问题描述】：

我试图弄清楚如何为画布内的某些路径的填充颜色设置动画，这些路径位于 ViewBoxes 中，因此它们被拉伸。我的目标是将这些路径的填充颜色从 NormalBrush 颜色更改为 HoverBrush 颜色。当 Canvas 的 IsMouseOver 值为 true 时，我想这样做。但是，我不能为我的生活想出一个风格来做到这一点。 Canvas 没有 Template 属性。我无法在样式中的触发器上定义 TargetName。

<UserControl x:Class="MyProject.PlaylistCommandControl"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             mc:Ignorable="d"
             d:DesignHeight="294"
             d:DesignWidth="35">
    <UserControl.Resources>
        <ResourceDictionary>
            <SolidColorBrush x:Key="HoverBrush"
                             Color="#FF86A9CE" />
            <SolidColorBrush x:Key="NormalBrush"
                             Color="#FF626F80" />            

            <Canvas x:Key="AddCanvas"
                    x:Name="AddCanvas"
                    Height="30.066"
                    Canvas.Left="291.149"
                    Canvas.Top="381.407"
                    Width="30.054">
                <Path Data="F1M319.8262,392.751L309.8772,392.751L309.8772,382.733L302.4902,382.733L302.4902,392.751L292.9572,392.751L292.9572,400.145L302.4902,400.145L302.4902,409.883L309.8772,409.792L309.8772,400.145L319.8262,400.145z"
                      Name="AddPath"
                      Fill="#FF626F80"
                      Stroke="#13151B"
                      StrokeThickness="1"
                      Height="27.15"
                      Canvas.Left="1.808"
                      Stretch="Fill"
                      Canvas.Top="1.326"
                      Width="26.869" />
            </Canvas>

            <Canvas x:Key="SubtractCanvas"
                    Height="9.673"
                    Canvas.Left="290.972"
                    Canvas.Top="358.879"
                    Width="30.055">
                <Path Data="F1M319.649,367.423L292.779,367.423L292.779,360.03L319.649,360.03z"
                      Fill="#FF626F80"
                      Stroke="#13151B"
                      StrokeThickness="1"
                      Height="7.393"
                      Canvas.Left="1.807"
                      Stretch="Fill"
                      Canvas.Top="1.151"
                      Width="26.87">
                </Path>
            </Canvas>

        </ResourceDictionary>
    </UserControl.Resources>
    <Border CornerRadius="0,4,4,0"
            Margin="0,0,10,0"
            Background="#0AFFFFFF"
            BorderBrush="#FF3C444F"
            BorderThickness="0,1,1,1"
            VerticalAlignment="Center"
            HorizontalAlignment="Left">
        <StackPanel>
            <Viewbox Name="AddFilesViewbox"
                     Stretch="Uniform"
                     Height="15"
                     Width="15"
                     Margin="5"
                     Child="StaticResource AddCanvas"
                     MouseDown="AddFilesViewbox_MouseDown" />
            <Viewbox Name="RemoveFilesViewbox"
                     Stretch="Uniform"
                     Height="15"
                     Width="15"
                     Margin="5"
                     Child="StaticResource SubtractCanvas"
                     MouseDown="RemoveFilesViewbox_MouseDown" />
        </StackPanel>
    </Border>
</UserControl>

【参考方案1】：

这样做的一种方法是创建一个应用于您的路径的样式，该样式使用DataTrigger 中的相对源绑定来检查鼠标是否在父画布上，例如

<Style TargetType="Path">
    <Style.Triggers>
        <DataTrigger Binding="Binding RelativeSource=RelativeSource Mode=FindAncestor, AncestorType=Canvas, Path=IsMouseOver" Value="True">
            <DataTrigger.EnterActions>
                <BeginStoryboard>
                    <Storyboard>
                        <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Path.Fill).(SolidColorBrush.Color)">
                            <LinearColorKeyFrame KeyTime="0:0:0.3"
                                                 Value="StaticResource HoverColor"/>
                        </ColorAnimationUsingKeyFrames>
                    </Storyboard>
                </BeginStoryboard>
            </DataTrigger.EnterActions>
            <DataTrigger.ExitActions>
                <BeginStoryboard>
                    <Storyboard>
                        <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Path.Fill).(SolidColorBrush.Color)">
                            <LinearColorKeyFrame KeyTime="0:0:0.3"
                                                 Value="StaticResource NormalColor"/>
                        </ColorAnimationUsingKeyFrames>
                    </Storyboard>
                </BeginStoryboard>
            </DataTrigger.ExitActions>
        </DataTrigger>
    </Style.Triggers>
</Style>

其中HoverColor 和NormalColor 是您要对其进行动画处理的相应颜色。