如何动画SolidColorBrush资源？

Question

我正在尝试动画SolidColorBrush，这是我的自定义控件的资源。此笔刷用作五个矩形的填充。

虽然在设计时上，所有程序都按预期工作，但是在运行时，应用程序立即与System.InvalidOperationException一起关闭，指出画笔的名称找不到。

我开始了一个样本项目，有：

• 一支画笔，我想把它画成动画

<SolidColorBrush x:Name="rectBrush" x:Key="rectangleBrush" Color="#b266b2" />

• 5个矩形，这些矩形使用该画笔填充。

<Grid>
    <StackPanel
        Orientation="Horizontal"
        VerticalAlignment="Center"
        HorizontalAlignment="Center">
        <Rectangle
            Fill="{StaticResource rectangleBrush}" />
        <Rectangle
            Fill="{StaticResource rectangleBrush}" />
        <Rectangle
            Fill="{StaticResource rectangleBrush}" />
        <Rectangle
            Fill="{StaticResource rectangleBrush}" />
        <Rectangle
            Fill="{StaticResource rectangleBrush}" />
    </StackPanel>
</Grid>

我在Visual中使用Blend来查看故事板是否正确和工作。

发射时我得到：

System.InvalidOperationException：“矩形刷”名称在“AnimationExample.MainWindow”的名称范围内找不到

完整的XAML标记：

<Window x:Class="AnimationExample.MainWindow"
             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="200" d:DesignWidth="200">
    <Window.Resources>
        <SolidColorBrush x:Name="rectBrush" x:Key="rectangleBrush" Color="#b266b2" />
        <Style TargetType="Rectangle">
            <Setter Property="Width" Value="6" />
            <Setter Property="Height" Value="6" />
            <Setter Property="Margin" Value="1" />
            <Setter Property="HorizontalAlignment" Value="Left" />
            <Setter Property="VerticalAlignment" Value="Bottom" />
            <Setter Property="RadiusX" Value="3" />
            <Setter Property="RadiusY" Value="3" />
        </Style>
        <Storyboard 
            x:Key="NowPlayingAnimation"
            RepeatBehavior="Forever"
            AutoReverse="True">
            <ColorAnimation
                Storyboard.TargetName="rectBrush"
                Storyboard.TargetProperty="Color"
                From="#b266b2"
                To="#6666ff"
                Duration="0:0:1" />
            <ColorAnimation
                Storyboard.TargetName="rectBrush"
                Storyboard.TargetProperty="Color"
                From="#6666ff"
                To="#66b266"
                Duration="0:0:1"
                BeginTime="0:0:1"/>
            <ColorAnimation
                Storyboard.TargetName="rectBrush"
                Storyboard.TargetProperty="Color"
                From="#66b266"
                To="#ffff66"
                Duration="0:0:1"
                BeginTime="0:0:2"/>
            <ColorAnimation
                Storyboard.TargetName="rectBrush"
                Storyboard.TargetProperty="Color"
                From="#ffff66"
                To="#ffc966"
                Duration="0:0:1"
                BeginTime="0:0:3" />
            <ColorAnimation
                Storyboard.TargetName="rectBrush"
                Storyboard.TargetProperty="Color"
                From="#ffc966"
                To="#ff4c4c"
                Duration="0:0:1"
                BeginTime="0:0:4" />
        </Storyboard>
    </Window.Resources>
    <Window.Triggers>
        <EventTrigger RoutedEvent="FrameworkElement.Loaded">
            <BeginStoryboard Storyboard="{StaticResource NowPlayingAnimation}"/>
        </EventTrigger>
    </Window.Triggers>
    <Grid>
        <StackPanel Orientation="Horizontal" VerticalAlignment="Center" HorizontalAlignment="Center">
            <Rectangle Fill="{StaticResource rectangleBrush}" />
            <Rectangle Fill="{StaticResource rectangleBrush}" />
            <Rectangle Fill="{StaticResource rectangleBrush}" />
            <Rectangle Fill="{StaticResource rectangleBrush}" />
            <Rectangle Fill="{StaticResource rectangleBrush}" />
        </StackPanel>
    </Grid>
</Window>

我有两个问题：

1. 为什么在设计的时候一切都很好，我能看到我真正想要得到的东西？
2. 有办法做到这一点吗？

- completely in XAML;   
- without animating each rectangle's fill individually?

​

提前谢谢你。

Answer 1

你有两个选择：

1. 将动画放在样式中，并直接动画化Background.Color。
2. 将画笔放在它或它的父程序位于可视树中的某个地方，在那里可以解析名称。

第2版：

<Window.Resources>
    <SolidColorBrush x:Name="rectBrush" x:Key="rectangleBrush" Color="#b266b2" />
    <Style TargetType="Rectangle">
        <Setter Property="Width" Value="6" />
        <Setter Property="Height" Value="6" />
        <Setter Property="Margin" Value="1" />
        <Setter Property="HorizontalAlignment" Value="Left" />
        <Setter Property="VerticalAlignment" Value="Bottom" />
        <Setter Property="RadiusX" Value="3" />
        <Setter Property="RadiusY" Value="3" />
    </Style>
    <Storyboard 
        x:Key="NowPlayingAnimation"
        RepeatBehavior="Forever"
        AutoReverse="True">
        <ColorAnimation
            Storyboard.TargetName="BrushCarrier"
            Storyboard.TargetProperty="Tag.Color"
            From="#b266b2"
            To="#6666ff"
            Duration="0:0:1" />
        <ColorAnimation
            Storyboard.TargetName="BrushCarrier"
            Storyboard.TargetProperty="Tag.Color"
            From="#6666ff"
            To="#66b266"
            Duration="0:0:1"
            BeginTime="0:0:1"/>
        <ColorAnimation
            Storyboard.TargetName="BrushCarrier"
            Storyboard.TargetProperty="Tag.Color"
            From="#66b266"
            To="#ffff66"
            Duration="0:0:1"
            BeginTime="0:0:2"/>
        <ColorAnimation
            Storyboard.TargetName="BrushCarrier"
            Storyboard.TargetProperty="Tag.Color"
            From="#ffff66"
            To="#ffc966"
            Duration="0:0:1"
            BeginTime="0:0:3" />
        <ColorAnimation
            Storyboard.TargetName="BrushCarrier"
            Storyboard.TargetProperty="Tag.Color"
            From="#ffc966"
            To="#ff4c4c"
            Duration="0:0:1"
            BeginTime="0:0:4" />
    </Storyboard>
</Window.Resources>
<Window.Triggers>
    <EventTrigger RoutedEvent="FrameworkElement.Loaded">
        <BeginStoryboard Storyboard="{StaticResource NowPlayingAnimation}"/>
    </EventTrigger>
</Window.Triggers>
<Grid>
    <FrameworkElement
        x:Name="BrushCarrier"
        Tag="{StaticResource rectangleBrush}"
        />
    <StackPanel Orientation="Horizontal" VerticalAlignment="Center" HorizontalAlignment="Center">
        <Rectangle Fill="{StaticResource rectangleBrush}" />
        <Rectangle Fill="{StaticResource rectangleBrush}" />
        <Rectangle Fill="{StaticResource rectangleBrush}" />
        <Rectangle Fill="{StaticResource rectangleBrush}" />
        <Rectangle Fill="{StaticResource rectangleBrush}" />
    </StackPanel>
</Grid>

在这里，故事板并不被定义为资源，并且在加载窗口时不会启动它。每个矩形都处理自己的动画。

<Style TargetType="Rectangle" x:Key="ColorShiftRectangle">
    <Setter Property="Width" Value="6" />
    <Setter Property="Height" Value="6" />
    <Setter Property="Margin" Value="1" />
    <Setter Property="HorizontalAlignment" Value="Left" />
    <Setter Property="VerticalAlignment" Value="Bottom" />
    <Setter Property="RadiusX" Value="3" />
    <Setter Property="RadiusY" Value="3" />
    <Setter Property="Fill" Value="#b266b2" />
    <Style.Triggers>
        <EventTrigger RoutedEvent="Loaded">
            <BeginStoryboard>
                <Storyboard 
                    RepeatBehavior="Forever"
                    AutoReverse="True">
                    <ColorAnimation
                        Storyboard.TargetProperty="Fill.Color"
                        From="#b266b2"
                        To="#6666ff"
                        Duration="0:0:1" />
                    <ColorAnimation
                        Storyboard.TargetProperty="Fill.Color"
                        From="#6666ff"
                        To="#66b266"
                        Duration="0:0:1"
                        BeginTime="0:0:1"/>
                    <ColorAnimation
                        Storyboard.TargetProperty="Fill.Color"
                        From="#66b266"
                        To="#ffff66"
                        Duration="0:0:1"
                        BeginTime="0:0:2"/>
                    <ColorAnimation
                        Storyboard.TargetProperty="Fill.Color"
                        From="#ffff66"
                        To="#ffc966"
                        Duration="0:0:1"
                        BeginTime="0:0:3" />
                    <ColorAnimation
                        Storyboard.TargetProperty="Fill.Color"
                        From="#ffc966"
                        To="#ff4c4c"
                        Duration="0:0:1"
                        BeginTime="0:0:4" />
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>

    </Style.Triggers>
</Style>

用法：

    <Rectangle Style="{StaticResource ColorShiftRectangle}" />