0

ColorAnimationに非常に奇妙な問題があります。私がやりたいことは非常に単純です（私は思います）：背景としてGradientBrushを使用した長方形があります。この長方形には、グラデーションの色を変更するさまざまなVisualStateがあります。状態間の遷移のアニメーションを入れたいと思います。私の問題は、状態を変更すると、アニメーションが現在の色ではなく、デフォルトの色で開始されることです。

これを再現するのに役立つコードスニペットを次に示します。

<Window x:Class="TestColorAnimation.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" Height="350" Width="525">

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition />
        <RowDefinition Height="30" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>

    <Rectangle Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" x:Name="rect">
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup>
                <VisualStateGroup.Transitions>
                    <VisualTransition GeneratedDuration="0:0:0.5"/>
                </VisualStateGroup.Transitions>
                <VisualState x:Name="OrangeState">
                    <Storyboard>
                        <ColorAnimation Storyboard.TargetProperty="Color"
                                        Storyboard.TargetName="stop1"
                                        To="Orange" />
                    </Storyboard>
                </VisualState>
                <VisualState x:Name="RedState">
                    <Storyboard>
                        <ColorAnimation Storyboard.TargetProperty="Color"
                                        Storyboard.TargetName="stop1"
                                        To="Red" />
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
        <Rectangle.Fill>
            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                <GradientStop x:Name="stop1" Color="LightGray" Offset="0" />
                <GradientStop x:Name="stop2" Color="LightGray" Offset="1" />
            </LinearGradientBrush>
        </Rectangle.Fill>
    </Rectangle>

    <Button Grid.Row="1" Grid.Column="0" Content="Go to orange"
     x:Name="orangeButton" Click="orangeButton_Click" />
    <Button Grid.Row="1" Grid.Column="1" Content="Go to red"
     x:Name="redButton" Click="redButton_Click" />
</Grid>
</Window>

イベントハンドラーは、状態の変更を要求するだけです。

private void orangeButton_Click(object sender, RoutedEventArgs e)
{
    VisualStateManager.GoToElementState(this.rect, "OrangeState", true);
}

private void redButton_Click(object sender, RoutedEventArgs e)
{
    VisualStateManager.GoToElementState(this.rect, "RedState", true);
}

この場合、オレンジ色の状態にすると、アニメーションは灰色からオレンジ色に変わります。しかし、その後、赤の状態になると、アニメーションは灰色から赤に変わります。オレンジから赤に変えたい（そして期待している）。

SolidColorBrushの代わりにを使用しようとしましたLinearGradientBrushが、期待どおりに遷移が発生しています。VisualStatesまた、 （ただし）の外でストーリーボードを使用しようとしましたがLinearGradientBrush、期待どおりに機能します。私がこの問題を再現した唯一の状況は、例の1LinearGradientBrushつColorAnimationですVisualState。

私は何か間違ったことをしていますか？私が欲しいことは可能ですか？

4

1 に答える 1

1

ターゲットをGradientStopColorに直接変更すると、LinearGradientsのアニメーションが機能します。

<VisualState x:Name="OrangeState">
    <Storyboard>
        <ColorAnimation 
            Storyboard.TargetProperty = "(Rectangle.Fill).(LinearGradientBrush.GradientStops)[0].(GradientStop.Color)"
            Storyboard.TargetName="rect"
            To="Orange" />
    </Storyboard>
</VisualState>
<VisualState x:Name="RedState">
    <Storyboard>
        <ColorAnimation 
            Storyboard.TargetProperty = "(Rectangle.Fill).(LinearGradientBrush.GradientStops)[0].(GradientStop.Color)"
            Storyboard.TargetName="rect"
            To="Red" />
    </Storyboard>
</VisualState>
于 2011-03-27T14:43:05.067 に答える