Question

I am trying to put an animation on a border as follows

    <LinearGradientBrush x:Key="RedButtonBrushUp" StartPoint=".5,0" EndPoint=".5,1">
        <GradientStop Color="#ffaaaa" Offset="0"/>
        <GradientStop Color="#cc6666" Offset="0.6"/>
        <GradientStop Color="#bb2222" Offset="1"/>
    </LinearGradientBrush>

    <LinearGradientBrush x:Key="ButtonBrushUp" StartPoint=".5,0" EndPoint=".5,1">
        <GradientStop Color="#aaccff" Offset="0"/>
        <GradientStop Color="#7799ff" Offset="0.6"/>
        <GradientStop Color="#555599" Offset="1"/>
    </LinearGradientBrush>


<Border x:Name="BorderUp" BorderThickness="2,2,2,2" CornerRadius="4,4,4,4" Background="{StaticResource RedButtonBrushUp}">
                    <Border.Triggers>
                        <EventTrigger RoutedEvent="Border.Loaded">
                            <BeginStoryboard>
                                <Storyboard >
                                    <DoubleAnimation Storyboard.TargetName="BorderUp"
                                     Storyboard.TargetProperty="Background"
                                     RepeatBehavior="Forever"
                                     AutoReverse="True"
                                     To="{StaticResource ButtonBrushUp}"
                                     Duration="0:0:0.5" ></DoubleAnimation>
                                </Storyboard>
                            </BeginStoryboard>
                        </EventTrigger>
                    </Border.Triggers>
                </Border>

But it says {StaticResource ButtonBrushUp} is an invalid type for this. What am I doing wrong?

Answer 1

The To can’t accept such a change needed for the gradient brush stops.

Here is a working example of what you are trying to do

    <Window.Resources>
        <Storyboard x:Key="OnLoaded1">
            <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderBrush).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Storyboard.TargetName="myBorder">
                <EasingColorKeyFrame KeyTime="0:0:1" Value="#FFC53838"/>
            </ColorAnimationUsingKeyFrames>
        </Storyboard>
    </Window.Resources>
    <Window.Triggers>
        <EventTrigger RoutedEvent="FrameworkElement.Loaded" SourceName="myBorder">
            <BeginStoryboard Storyboard="{StaticResource OnLoaded1}"/>
        </EventTrigger>
    </Window.Triggers>
    <Grid>
 <StackPanel x:Name="stackPanel" Orientation="Vertical" HorizontalAlignment="Center">
    <Border x:Name="myBorder" Background="#99FFFFFF" BorderThickness="3"
    Margin="0,60,0,20" Padding="20"  >
        <Border.BorderBrush>
            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                <GradientStop Color="Black" Offset="0"/>
                <GradientStop Color="White" Offset="1"/>
            </LinearGradientBrush>
        </Border.BorderBrush>
      <TextBlock>
        This example shows how to have a border change color after an initial load.
      </TextBlock>
    </Border>
  </StackPanel>