在 MouseEnter / MouseLeave (WPF) 上动画 VisualBrush 的颜色值

Question

我有以下问题。我希望在鼠标悬停时为图标的颜色值设置动画（并在鼠标离开后对其进行动画处理）。为此，我创建了一个在 MouseEnter 上触发的新 ColorAnimation。动画的属性路径是“(Path.Fill).(SolidColorBrush.Color)”。但是在运行时会出现错误； “Fill”属性未指向路径“(Path.Fill).(SolidColorBrush.Color)”中的 DependencyObject。。虽然我认为我理解错误的含义，但我不知道应该使用什么属性路径。有任何想法吗？提前感谢您的宝贵时间。如果还有什么不清楚的地方请告诉我。

附言。如果有人对如何放置“图标/路径”资源有更好的想法，我非常感激。

代码；

ColorAnimation mouseEnterColorAnimation = new ColorAnimation {
  To = Colors.Yellow,
  Duration = TimeSpan.FromSeconds(1)
};

Storyboard.SetTargetName(mouseEnterColorAnimation, "DeleteIconGrid");
Storyboard.SetTargetProperty(mouseEnterColorAnimation, new PropertyPath("Path.Fill).(SolidColorBrush.Color)"));
Storyboard mouseEnterStoryboard = new Storyboard();
mouseEnterStoryboard.Children.Add(mouseEnterColorAnimation);
mouseEnterStoryboard.Begin(this);

Xaml;

<Grid x:Name="Grid" Background="Transparent" Width="100" Height="100" MouseDown="Grid_MouseDown" MouseEnter="Grid_MouseEnter" MouseLeave="Grid_MouseLeave" >
  <Grid x:Name="DeleteIconGrid" Width="50" Margin="0,0,0,14"><Grid.Background><VisualBrush Visual="{StaticResource Icon-Delete}" Stretch="Uniform" /></Grid.Background></Grid>
  <Label Content="Delete icon" HorizontalAlignment="Center" VerticalAlignment="Bottom" Margin="6" Foreground="{DynamicResource Gray}"></Label>
</Grid>

资源；

<Canvas x:Key="Icon-Delete" Background="Transparent">
  <Path Stretch="Uniform" Fill="LightSlateGray" Data="F1 M 4.70432,0L 0.0480347,4.77802L 7.00842,11.6812L 0,18.7292L 4.70432,23.46L 11.6647,16.412L 18.6252,23.46L 23.3774,18.7774L 16.369,11.6812L 23.3294,4.77802L 18.6252,0L 11.6647,6.9986L 4.70432,0 Z" />
</Canvas>

Answer 1

VisualBrush不有Color 属性...您似乎将它与SolidColorBrush 混淆了。因此，您不能为 VisualBrush 的颜色设置动画，但在使用 SolidColorBrush 时可以。

您的 PropertyPath... 中也有一个错误，而不是这个：

"Path.Fill).(SolidColorBrush.Color)"

应该是这样的：

"(Path.Fill).(SolidColorBrush.Color)"

最后，如果您想为Brush 的Color 属性设置动画，那么您需要将Fill 属性设置为SolidColorBrush 的实例，就像您在@ 中的Path 中所做的那样987654335@:

<Path Stretch="Uniform" Fill="LightSlateGray" Data="F1 M 4.70432,0L 0.0480347,4.77802L 7.00842,11.6812L 0,18.7292L 4.70432,23.46L 11.6647,16.412L 18.6252,23.46L 23.3774,18.7774L 16.369,11.6812L 23.3294,4.77802L 18.6252,0L 11.6647,6.9986L 4.70432,0 Z" />

---

更新>>>

为了对VisualBrush.Visual 进行动画处理，您需要将其声明为内联。以 Visual Studio 论坛上的 VisualBrush Animation 页面为例：

<Button Width="320" Height="240">
    <Button.Background>
        <VisualBrush>
            <VisualBrush.Visual>
                <Canvas>
                    <Rectangle Width="320" Height="240" Name="myRect" Fill="Blue">
                        <Rectangle.Triggers>
                            <EventTrigger RoutedEvent="FrameworkElement.Loaded">
                                <EventTrigger.Actions>
                                    <BeginStoryboard>
                                        <BeginStoryboard.Storyboard>
                                            <Storyboard >
                                                <ColorAnimation To="Red" Duration="0:0:2" Storyboard.TargetName="myRect" Storyboard.TargetProperty="Fill.Color" AutoReverse="True" RepeatBehavior="Forever"/>
                                            </Storyboard>
                                        </BeginStoryboard.Storyboard>
                                    </BeginStoryboard>
                                </EventTrigger.Actions>
                            </EventTrigger>
                        </Rectangle.Triggers>
                    </Rectangle>
                </Canvas>
            </VisualBrush.Visual>
        </VisualBrush>
    </Button.Background>
</Button>