我有一个有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类的关键)
“'PlaybackButtonResources'名称在'System.Windows.Shapes.Rectangle'的名称范围内找不到。”
我尝试将资源添加到矩形,但得到了相同的错误消息。
这归结为“如何从事件触发器中为绑定数据设置动画?”
欢迎提出任何指示。
答案 0 :(得分:1)
您需要将Storyboard
目标设置为要设置动画的GradientStop
,而不是绑定值。
尝试将ColorAnimation
更改为以下内容:
<ColorAnimation Storyboard.TargetName="UpperShadingColor"
Storyboard.TargetProperty="Color"
To="{Binding Source={StaticResource PlaybackResource}, Path=LowlightColor}"
Duration="0:0:1"/>
答案 1 :(得分:0)
在上面的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>