在VisualAction的GradientStop的ColorAnimation開始時出現問題

Question

我對ColorAnimation有一個很奇怪的問題。我想要做的事很簡單（我認爲）：我有一個帶有GradientBrush的Rectangle作爲背景。這個矩形有不同的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）以外的故事板，它也按預期工作。我轉載此問題的唯一情況是示例中的一個：LinearGradientBrush和ColorAnimation，其中VisualState。

我做錯了什麼？我想要什麼？

Answer 1

動畫的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>