如何设置来自事件触发器的绑定数据的动画
本文关键字：触发器 事件 绑定 动画 数据 何设置 设置 | 更新日期: 2023-09-27 18:25:41
我有一个矩形，它有一个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是类PlaybackButtonResources的密钥）
"在System.Windows.Shapes.Rectangle的名称范围中找不到'PlaybackButtonResources'名称。"
我试图将资源添加到矩形中，但收到了相同的错误消息。
这可以归结为"如何从事件触发器中动画化绑定数据？"
欢迎提出任何建议。
您需要将Storyboard目标设置为要设置动画的GradientStop，而不是绑定值。
尝试将ColorAnimation更改为以下内容：
<ColorAnimation Storyboard.TargetName="UpperShadingColor"
Storyboard.TargetProperty="Color"
To="{Binding Source={StaticResource PlaybackResource}, Path=LowlightColor}"
Duration="0:0:1"/>
在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>