0

LinearGradientBrush を持つ四角形があります。ブラシの色の 1 つが外部リソースにバインドされています。長方形は次のようになります。

<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' の名前スコープで見つかりません。」

四角形にリソースを追加しようとしましたが、同じエラー メッセージが表示されました。

これは、「イベント トリガーからバインドされたデータをアニメーション化するにはどうすればよいですか?」に要約されます。

どんなポインタでも大歓迎です。

4

2 に答える 2

0

上記の Richard E からの回答で、彼はバインドされたデータを変更することはできず、XAML プロパティ (バインドされたデータに反映される) のみを変更できると指摘しています。MouseDown イベントをトリガーした四角形とは別の四角形のデータを変更しようとしていたため、非常に苦労しました。VisualBrush と DrawingBrush を使用してパントし、すべての機能を 1 つの四角形に収めることができました。結果の 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 に答える