首页 文章

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

提问于
浏览 次
3

我正在试图弄清楚如何为画布中的某些路径填充颜色设置动画，这些路径位于ViewBox中，因此它们会被拉伸 . 我的目标是将这些路径的填充颜色从NormalBrush颜色更改为HoverBrush颜色 . 我想在Canvas的IsMouseOver值为true时执行此操作 . 但是，我不能为我的生活想出一个风格来做到这一点 . Canvas没有Template属性 . 我无法在Style中的触发器上定义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>
wpf path canvas coloranimation

1 回答

  • 7

    一种方法是创建一个应用于路径的样式，该样式使用 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 是您要为其设置动画的相应颜色 .

    回复于

相关问题