时间戳

首页 > 解决方案 > 如何为 SolidColorBrush 资源设置动画？

wpf - 如何为 SolidColorBrush 资源设置动画？

问题描述

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

在设计时，一切都按预期工作，但在运行时应用程序立即关闭并出现 System.InvalidOperationException，指出找不到画笔的名称。

我开始了一个示例项目，具有：

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

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

我正在使用 Blend for Visual Studio 来查看情节提要是否正确且有效。

启动时我得到：

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

完整的 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. 有没有办法做到这一点？

    • 完全在 XAML 中；
    • 不单独为每个矩形的填充设置动画？

先感谢您。

标签： wpfxamlanimationcoloranimation

解决方案

你有两个选择：

  1. 将动画放在Style中，直接进行动画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>

版本 1。在这里，情节提要没有被定义为资源，并且您不会在加载窗口时启动它。每个 Rectangle 都负责自己的动画。

<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}" />

推荐阅读