Geek asks and answers

Animation Fill the color of the path on canvas.

I am trying to figure out how to animate the fill color of some of the paths that I have inside the canvas that are in ViewBoxes, so they are stretched. My goal here is to change the fill color of these paths from the NormalBrush color to the HoverBrush color. I want to do this when the IsMouseOver value for Canvas is true. However, I cannot come up with a style for me to do this. Canvas does not have a Template property. I cannot define a TargetName for a trigger in style.

<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>
+3
source share
1 answer

- , , 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 - , /.

+6

More articles:


All Articles