Анимированная заливка цветом дорожки на холсте - PullRequest
Новая
       28

Анимированная заливка цветом дорожки на холсте

3 голосов
/ 11 марта 2011

Я пытаюсь выяснить, как анимировать цвет заливки некоторых путей, которые у меня есть внутри холста, которые находятся в окнах просмотра, поэтому они растягиваются.Моя цель - изменить цвет заливки этих контуров с цвета NormalBrush на цвет HoverBrush.Я хочу сделать это, когда значение IsMouseOver для Canvas равно 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 Ответ

7 голосов
/ 11 марта 2011

Один из способов сделать это - создать стиль, который будет применен к вашим путям, который использует относительную привязку источника в 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 - соответствующие цвета, которые вы хотите анимировать в / из.

...