题
I have a rectangle that has a LinearGradientBrush. one of the brush's colors is bound to an external resource. The rectangle looks like:
https://stackoverflow.com/questions/17949069
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian<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>
The bound data is a simple color property:
public Color UpperLeftColor
{
get
{
return _upperleftColor;
}
set
{
_upperleftColor = value;
SetPropertyChanged("UpperLeftColor");
}
}
I actually have several rectangles stacked on top of each other and on the topmost rectangle I would like to create an animation to change the value of the bound color when the top rectangle is clicked (MouseDown). I tried:
<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>
but this produced the the error: (PlaybackResource is the key for the class PlaybackButtonReources)
"'PlaybackButtonResources' name cannot be found in the name scope of 'System.Windows.Shapes.Rectangle'."
I tried to add the resource to the rectangle, but got the same error message.
This boils down to "How can I animate bound data from an event trigger?"
Any pointers are welcome.
解决方案
You need to set the Storyboard target to the GradientStop that you want to animate, not the bound value.
Try changing your ColorAnimation to the following:
<ColorAnimation Storyboard.TargetName="UpperShadingColor"
Storyboard.TargetProperty="Color"
To="{Binding Source={StaticResource PlaybackResource}, Path=LowlightColor}"
Duration="0:0:1"/>
其他提示
In the answer from Richard E above, he points out that I can't modify the bound data, only the XAML property (which will propagate back to the bound data). Since I was trying to modify data in a different rectangle than the rectangle that triggered the MouseDown event, I was having a great deal of difficulty. I punted and managed to get all the functionality into one rectangle using a VisualBrush and a DrawingBrush. I'll post the resulting XAML below. Caution, it's long.
<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>
