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

时间:2013-07-30 13:55:59

标签: c# wpf data-binding eventtrigger coloranimation

我有一个有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'的名称范围内找不到。”

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

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

欢迎提出任何指示。

2 个答案:

答案 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>