0

I have a rectangle that has a LinearGradientBrush. one of the brush's colors is bound to an external resource. The rectangle looks like:

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

4

2 回答 2

1

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

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

<ColorAnimation Storyboard.TargetName="UpperShadingColor"
            Storyboard.TargetProperty="Color"
            To="{Binding Source={StaticResource PlaybackResource}, Path=LowlightColor}"
            Duration="0:0:1"/>
于 2013-07-30T14:57:09.347 回答
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>
于 2013-07-30T17:26:20.207 回答