Xaml - VisualStates -在颜色和动画之间改变背景

Question

我有自定义控件，如下所示：

<Style TargetType="local:AnswerButton">
<Setter Property="Background" Value="{StaticResource BlueGradient}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="local:AnswerButton">
<Grid>
<vsm:VisualStateManager.VisualStateGroups>
   <vsm:VisualStateGroup x:Name="CommonStates">
      <vsm:VisualState x:Name="Normal">
        <Storyboard>
           <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.Background)" Storyboard.TargetName="myBorder">
             <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource BlueGradient}" />
           </ObjectAnimationUsingKeyFrames>
        </Storyboard>
      </vsm:VisualState>
      <vsm:VisualState x:Name="RightAnswer">
         <Storyboard RepeatBehavior="Forever" BeginTime="00:00:00" AutoReverse="True">
            <ColorAnimation Duration="0:0:0.6" From="Orange" To="Green" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" Storyboard.TargetName="myBorder"/>
         </Storyboard>
      </vsm:VisualState>
    </vsm:VisualStateGroup>
  </vsm:VisualStateManager.VisualStateGroups>
  <Border BorderBrush="Blue" BorderThickness="2" CornerRadius="10">
    <Border Name="myBorder" Background="{TemplateBinding Background}" CornerRadius="9" Opacity="1">
       <Grid>
         <Grid.ColumnDefinitions>
            <ColumnDefinition Width="100"/>
            <ColumnDefinition Width="*" />
         </Grid.ColumnDefinitions>
         <TextBlock Grid.Column="0"
                    TextAlignment="Center" VerticalAlignment="Center" 
                    Text="{TemplateBinding Option}" Foreground="Yellow" />
         <TextBlock Grid.Column="1"
                    TextAlignment="Left" VerticalAlignment="Center" 
                    Text="{TemplateBinding Text}" Foreground="White" />
        </Grid>
      </Border>
    </Border>
  </Grid>
  </ControlTemplate>
  </Setter.Value>
  </Setter>
  </Style>

我只想改变按钮的状态。第一个(默认)哪个按钮有那个BlueGradient画笔，第二个按钮有动画(比如在RightAnswer状态下)。这段代码部分起作用了。当我将RightAnswer状态设置为按钮时，我将其更改为Normal，然后当我尝试将其设置为RightAnswer时，会得到以下错误：

无法解析指定对象上的TargetProperty (Border.Background).(SolidColorBrush.Color)。

我认为问题在于，在一种状态下，我得到了Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)"，而在第二种状态下，得到了Storyboard.TargetProperty="(Border.Background)"。我试过要改变但这行不通。那我该怎么解决呢？

编辑：

BlueGradient

<LinearGradientBrush x:Key="BlueGradient"  
    StartPoint="0,0" EndPoint="1,1">
        <GradientStop Color="#12449d" Offset="0" />
        <GradientStop Color="#0a2554" Offset="1" />
    </LinearGradientBrush>

Answer 1

您有一个LinearGradientBrush作为Background属性的画笔，但是您尝试在它上访问(SolidColorBrush.Color) (本质上它在将LGB转换为SCB时失败)。

在这种情况下，您不能使用刷子资源，因为刷子的类型决定了您需要运行的Storyboard。您必须降低一个级别并使用Color作为您的资源。

(目前我没有使用我的dev机器，所以语法可能有点错误)

首先，在资源方面

<Color x:Key="ColorBlueFirstStop">#12449d</Color>
<Color x:Key="ColorBlueSecondStop">#0a2554</Color>

然后，在模板中

<Border Name="myBorder" CornerRadius="9" Opacity="1">
    <Border.Background>
        <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
            <GradientStop Color="{StaticResource ColorBlueFirstStop}" Offset="0" />
            <GradientStop Color="{StaticResource ColorBlueSecondStop}" Offset="1" />
        </LinearGradientBrush>
   ......
</Border>

最后在故事板上

<Storyboard RepeatBehavior="Forever" BeginTime="00:00:00" AutoReverse="True">
    <ColorAnimation Duration="0:0:0.6" 
                    From="Orange" 
                    To="Green" 
                    Storyboard.TargetProperty="(Border.Background).(LinearGradientBrush.GradientStops)[0].(GradientStop.Color)" Storyboard.TargetName="myBorder"/>
    <ColorAnimation Duration="0:0:0.6" 
                    From="Orange"  
                    To="Green" 
                    Storyboard.TargetProperty="(Border.Background).(LinearGradientBrush.GradientStops)[1].(GradientStop.Color)" Storyboard.TargetName="myBorder"/>
</Storyboard>