如何为事件触发器中的绑定数据设置动画？答案

【问题标题】：How can I animate bound data from an event trigger?如何为事件触发器中的绑定数据设置动画？
【发布时间】：2013-07-30 13:55:58
【问题描述】：

我有一个带有 LinearGradientBrush 的矩形。画笔的一种颜色绑定到外部资源。矩形看起来像：

<Rectangle
    Width="40"
    Height="40"
    RadiusX="5"
    RadiusY="5"
    Fill="white"
    Opacity="0.6">
    <Rectangle.OpacityMask>
        <LinearGradientBrush
            x:Name="UpperShading"
            StartPoint="0,0.2"
            EndPoint="0,0"
            MappingMode="RelativeToBoundingBox">
            <GradientStop
                Color="Transparent" Offset="0"/>
            <GradientStop
                x:Name="UpperShadingColor"
                Color="{Binding
                        Source={StaticResource PlaybackResource},
                        Path=UpperLeftColor}"
                Offset="1"/>
        </LinearGradientBrush>
    </Rectangle.OpacityMask>
</Rectangle>

绑定的数据是一个简单的颜色属性：

public Color UpperLeftColor
{
    get
    {
        return _upperleftColor;
    }
    set
    {
        _upperleftColor = value;
        SetPropertyChanged("UpperLeftColor");
    }
}

我实际上有几个矩形堆叠在一起，在最上面的矩形上，我想创建一个动画，以在单击顶部矩形 (MouseDown) 时更改绑定颜色的值。我试过了：

<Rectangle
    Width="40"
    Height="40"
    RadiusX="5"
    RadiusY="5"
    Fill="Transparent">
    <Rectangle.Triggers>
        <EventTrigger RoutedEvent="MouseDown">
            <EventTrigger.Actions>
        <BeginStoryboard>
            <Storyboard>
                <ColorAnimation
                    Storyboard.TargetName
                        ="{Binding Source={StaticResource PlaybackResource}}"
                    Storyboard.TargetProperty="UpperLeftColor"
                    To="{Binding Source
                        ={StaticResource PlaybackResource}, Path=LowlightColor}"
                    Duration="0:0:1"/>
            </Storyboard>
            </BeginStoryboard>
        </EventTrigger.Actions>
    </EventTrigger>
    </Rectangle.Triggers>
</Rectangle>

但这产生了错误：（PlaybackResource 是类 PlaybackButtonReources 的键）

"在'System.Windows.Shapes.Rectangle'的名称范围内找不到'PlaybackButtonResources'的名称。"

我尝试将资源添加到矩形，但得到了相同的错误消息。

这归结为“如何为事件触发器的绑定数据设置动画？”

欢迎指点。

【问题讨论】：

标签： c# wpf data-binding eventtrigger coloranimation

【解决方案1】：

您需要将Storyboard 目标设置为您要设置动画的GradientStop，而不是绑定值。

尝试将您的 ColorAnimation 更改为以下内容：

<ColorAnimation Storyboard.TargetName="UpperShadingColor"
            Storyboard.TargetProperty="Color"
            To="{Binding Source={StaticResource PlaybackResource}, Path=LowlightColor}"
            Duration="0:0:1"/>

【讨论】：

理查德 E，感谢您的回复。我试过了，但事件触发器与 GradientStop 位于不同的矩形中。我得到“在'System.Windows.Shapes.Rectangle'的名称范围内找不到名称”。
你能发布所有矩形的完整 xaml 吗？
Richard E，我实际上是在玩弄它，直到我在一个矩形中拥有所有功能。问题解决了。我会将结果发布在另一个答案中以获得更好的格式，但我会将其标记为“答案”。

【解决方案2】：

在上面 Richard E 的回答中，他指出我不能修改绑定数据，只能修改 XAML 属性（它将传播回绑定数据）。因为我试图修改与触发 MouseDown 事件的矩形不同的矩形中的数据，所以我遇到了很大的困难。我使用 VisualBrush 和 DrawingBrush 将所有功能放入一个矩形中。我将在下面发布生成的 XAML。注意，很长。

<Canvas Background="Transparent">
    <Grid>
        <Rectangle
            Width="40"
            Height="40"
            RadiusX="5"
            RadiusY="5" MouseDown="Rectangle_MouseDown">
            <Rectangle.Fill>
                <VisualBrush TileMode="None" AlignmentX="Center" AlignmentY="Center">
                    <VisualBrush.Visual>
                        <Grid HorizontalAlignment="Center" VerticalAlignment="Center">
                            <Grid.Background>
                                <DrawingBrush>
                                    <DrawingBrush.Drawing>
                                        <DrawingGroup>
                                            <GeometryDrawing>
                                                <GeometryDrawing.Geometry>
                                                    <RectangleGeometry Rect="0,0,40,40"/>
                                                </GeometryDrawing.Geometry>
                                                <GeometryDrawing.Brush>
                                                    <SolidColorBrush Color="{Binding Source={StaticResource PlaybackResource}, Path=BackColor}"/>
                                                </GeometryDrawing.Brush>
                                            </GeometryDrawing>
                                            <GeometryDrawing>
                                                <GeometryDrawing.Geometry>
                                                    <RectangleGeometry Rect="0,0,40,40"/>
                                                </GeometryDrawing.Geometry>
                                                <GeometryDrawing.Brush>
                                                    <LinearGradientBrush
                                                        StartPoint="0,0.2"
                                                        EndPoint="0,0"
                                                        Opacity="0.6"
                                                        MappingMode="RelativeToBoundingBox">
                                                        <GradientStop
                                                            Color="Transparent" Offset="0"/>
                                                        <GradientStop x:Name="UpperShadingColor"
                                                            Color="{Binding Source={StaticResource PlaybackResource}, Path=UpperLeftColor}"
                                                            Offset="1"/>
                                                    </LinearGradientBrush>
                                                </GeometryDrawing.Brush>
                                            </GeometryDrawing>
                                            <GeometryDrawing>
                                                <GeometryDrawing.Geometry>
                                                    <RectangleGeometry Rect="0,0,40,40"/>
                                                </GeometryDrawing.Geometry>
                                                <GeometryDrawing.Brush>
                                                    <LinearGradientBrush
                                                        x:Name="LeftShading"
                                                        StartPoint="0.2,0"
                                                        EndPoint="0,0"
                                                        Opacity="0.6"
                                                        MappingMode="RelativeToBoundingBox">
                                                        <GradientStop
                                                            Color="Transparent"
                                                            Offset="0"/>
                                                        <GradientStop x:Name="LeftShadingColor"
                                                            Color="{Binding Source={StaticResource PlaybackResource}, Path=UpperLeftColor}"
                                                            Offset="1"/>
                                                    </LinearGradientBrush>
                                                </GeometryDrawing.Brush>
                                            </GeometryDrawing>
                                            <GeometryDrawing>
                                                <GeometryDrawing.Geometry>
                                                    <RectangleGeometry Rect="0,0,40,40"/>
                                                </GeometryDrawing.Geometry>
                                                <GeometryDrawing.Brush>
                                                    <LinearGradientBrush
                                                        x:Name="LowerShading"
                                                        StartPoint="0.8,0"
                                                        EndPoint="1,0"
                                                        Opacity="0.6"
                                                        MappingMode="RelativeToBoundingBox">
                                                        <GradientStop
                                                            Color="Transparent"
                                                            Offset="0"/>
                                                        <GradientStop x:Name="LowerShadingColor"
                                                            Color="{Binding Source={StaticResource PlaybackResource}, Path=LowerRightColor}"
                                                            Offset="1"/>
                                                    </LinearGradientBrush>
                                                </GeometryDrawing.Brush>
                                            </GeometryDrawing>
                                            <GeometryDrawing>
                                                <GeometryDrawing.Geometry>
                                                    <RectangleGeometry Rect="0,0,40,40"/>
                                                </GeometryDrawing.Geometry>
                                                <GeometryDrawing.Brush>
                                                    <LinearGradientBrush
                                                        x:Name="RightShading"
                                                        StartPoint="0,0.8"
                                                        EndPoint="0,01"
                                                        Opacity="0.6"
                                                        MappingMode="RelativeToBoundingBox">
                                                        <GradientStop
                                                            Color="Transparent"
                                                            Offset="0"/>
                                                        <GradientStop x:Name="RightShadingColor"
                                                            Color="{Binding Source={StaticResource PlaybackResource}, Path=LowerRightColor}"
                                                            Offset="1"/>
                                                    </LinearGradientBrush>
                                                </GeometryDrawing.Brush>
                                            </GeometryDrawing>
                                        </DrawingGroup>
                                    </DrawingBrush.Drawing>
                                </DrawingBrush>
                            </Grid.Background>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*"/>
                                <ColumnDefinition Width="auto"/>
                                <ColumnDefinition Width="*"/>
                            </Grid.ColumnDefinitions>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="*"/>
                                <RowDefinition Height="auto"/>
                                <RowDefinition Height="*"/>
                            </Grid.RowDefinitions>
                            <ContentControl Width="30" Height="30" Grid.Column="1" Grid.Row="1" Margin="6,6,6,6"
                                Content="{Binding Source={StaticResource PlaybackResource}, Path=Symbol}"/>
                        </Grid>
                    </VisualBrush.Visual>
                </VisualBrush>
            </Rectangle.Fill>
            <Rectangle.Triggers>
                <EventTrigger RoutedEvent="MouseDown">
                    <EventTrigger.Actions>
                        <BeginStoryboard>
                            <Storyboard>
                                <ColorAnimation
                                    Storyboard.TargetName="UpperShadingColor"
                                    Storyboard.TargetProperty="Color"
                                    To="{Binding Source={StaticResource PlaybackResource}, Path=LowlightColor}"
                                    Duration="0:0:0.01"/>
                                <ColorAnimation
                                    Storyboard.TargetName="LeftShadingColor"
                                    Storyboard.TargetProperty="Color"
                                    To="{Binding Source={StaticResource PlaybackResource}, Path=LowlightColor}"
                                    Duration="0:0:0.01"/>
                                <ColorAnimation
                                    Storyboard.TargetName="LowerShadingColor"
                                    Storyboard.TargetProperty="Color"
                                    To="{Binding Source={StaticResource PlaybackResource}, Path=HighlightColor}"
                                    Duration="0:0:0.01"/>
                                <ColorAnimation
                                    Storyboard.TargetName="RightShadingColor"
                                    Storyboard.TargetProperty="Color"
                                    To="{Binding Source={StaticResource PlaybackResource}, Path=HighlightColor}"
                                    Duration="0:0:0.01"/>
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger.Actions>
                </EventTrigger>
                <EventTrigger RoutedEvent="MouseUp">
                    <EventTrigger.Actions>
                        <BeginStoryboard>
                            <Storyboard>
                                <ColorAnimation
                                    Storyboard.TargetName="UpperShadingColor"
                                    Storyboard.TargetProperty="Color"
                                    To="{Binding Source={StaticResource PlaybackResource}, Path=HighlightColor}"
                                    Duration="0:0:0.01"/>
                                <ColorAnimation
                                    Storyboard.TargetName="LeftShadingColor"
                                    Storyboard.TargetProperty="Color"
                                    To="{Binding Source={StaticResource PlaybackResource}, Path=HighlightColor}"
                                    Duration="0:0:0.01"/>
                                <ColorAnimation
                                    Storyboard.TargetName="LowerShadingColor"
                                    Storyboard.TargetProperty="Color"
                                    To="{Binding Source={StaticResource PlaybackResource}, Path=LowlightColor}"
                                    Duration="0:0:0.01"/>
                                <ColorAnimation
                                    Storyboard.TargetName="RightShadingColor"
                                    Storyboard.TargetProperty="Color"
                                    To="{Binding Source={StaticResource PlaybackResource}, Path=LowlightColor}"
                                    Duration="0:0:0.01"/>
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger.Actions>
                </EventTrigger>
                <EventTrigger RoutedEvent="MouseLeave">
                    <EventTrigger.Actions>
                        <BeginStoryboard>
                            <Storyboard>
                                <ColorAnimation
                                    Storyboard.TargetName="UpperShadingColor"
                                    Storyboard.TargetProperty="Color"
                                    To="{Binding Source={StaticResource PlaybackResource}, Path=HighlightColor}"
                                    Duration="0:0:0.01"/>
                                <ColorAnimation
                                    Storyboard.TargetName="LeftShadingColor"
                                    Storyboard.TargetProperty="Color"
                                    To="{Binding Source={StaticResource PlaybackResource}, Path=HighlightColor}"
                                    Duration="0:0:0.01"/>
                                <ColorAnimation
                                    Storyboard.TargetName="LowerShadingColor"
                                    Storyboard.TargetProperty="Color"
                                    To="{Binding Source={StaticResource PlaybackResource}, Path=LowlightColor}"
                                    Duration="0:0:0.01"/>
                                <ColorAnimation
                                    Storyboard.TargetName="RightShadingColor"
                                    Storyboard.TargetProperty="Color"
                                    To="{Binding Source={StaticResource PlaybackResource}, Path=LowlightColor}"
                                    Duration="0:0:0.01"/>
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger.Actions>
                </EventTrigger>
            </Rectangle.Triggers>
        </Rectangle>
    </Grid>
</Canvas>

【讨论】：