Xaml - VisualStates - changing background between color and animation

Question

I have custom control which looks like this:

<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>

I just want to change states of button. First (default) which button has that BlueGradient brush and second where there is animation (like in RightAnswer state). This code is partly working. When I set RightAnswer state to button then I change it to Normal and then when I tried set it to RightAnswer I get this error:

Cannot resolve TargetProperty (Border.Background).(SolidColorBrush.Color) on specified object.

I think the problem is that in one state I got Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" and in second Storyboard.TargetProperty="(Border.Background)". I tried to change that but it's not working. So how can I fix this?

Edit:

BlueGradient

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

Answer 1

You have a LinearGradientBrush as the brush of Background property, but you try to access (SolidColorBrush.Color) on it (essentially it fails at casting LGB to SCB).

For this case, you cannot use resources that are brushes since the type of brush determines the Storyboard that you will need to run. You have to go one level lower and use Color as your resources.

(currently I'm not using my dev machine so the syntax may be a bit off)

First, in resources

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

Then, in the template

<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>

And finally in the storyboard

<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>