動畫填充路徑在畫布中的顏色

Question

我試圖弄清楚如何動畫一些路徑的填充顏色，我有一個畫布，駐留在ViewBoxes，所以他們拉伸。我的目標是將這些路徑的填充顏色從NormalBrush顏色更改爲HoverBrush顏色。我想在Canvas的IsMouseOver值爲true時執行此操作。然而，我不能爲我的生活拿出一個Style來做到這一點。畫布沒有模板屬性。我無法在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> 

Answer 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是要動畫/從各自的顏色。