Animate Fill Color of a Path In a Canvas

Question

I'm trying to figure out how to animate the fill color of some paths I have inside of a canvas, which reside 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 it when the IsMouseOver value of the Canvas is true. However, I can't for the life of me come up with a Style to do this. Canvas doesn't have a Template property. I can't define a TargetName on a trigger in a 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>

score 9 · Accepted Answer · answered Mar 11 '11 at 11:26

One way to do this is to create a style that is applied to your paths which uses a relative source binding in a DataTrigger to check if the mouse is over the parent canvas, e.g.

<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>

Where HoverColor and NormalColor are the respective colors you want to animate to/from.

Animate Fill Color of a Path In a Canvas

1 Answers1