VisualState内のグラデーションストップのためのコニュラミリメーションの開始時の問題
-
12-11-2019 - |
質問
私はコロニウム化に非常に奇妙な問題を抱えています。私がやりたいことはかなり簡単です(私は思う):私は背景としてグラデーションブラシの長方形を持っています。この長方形は、グラデーションの色を変える異なる視覚的なステートを持っています。私は状態間の移行のためにアニメーションを置きたいです。問題は、状態を変更すると、アニメーションは現在の色から始まりますが、デフォルトの色では開始されます。
これはあなたがこれを再現するのに役立つコードスニペットです:
<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
があります)、それは期待どおりに機能します。この問題を再現した唯一の状況は、例の1つです。
私は何か悪いことをしていますか?私が考えたいのですか?
解決
リニアグレードのアニメーションは、ターゲットを直接グラデーションストップの色に変更すると機能します。
<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>
. 所属していません StackOverflow