ColorAnimation Gradient On WPF

Question

   <LinearGradientBrush x:Key="BrushPrincipalBorderBlue" EndPoint="1.3,1" StartPoint="-0.2,0">
        <GradientStop Color="#FF030637" Offset="1"/>
        <GradientStop Color="#FF0E0F31" Offset="0.166"/>
        <GradientStop Color="#FF2E2F70" Offset="0.629"/>
        <GradientStop Color="#FF030637" Offset="0.63"/>
    </LinearGradientBrush>

    <Storyboard x:Key="GoToBlue">
        <ColorAnimation Storyboard.TargetName="border" Storyboard.TargetProperty="Background.GradientStops[3].Color" Duration="0:0:0.5"  
       To="{DynamicResource BrushPrincipalBorderBlue.GradientStops[3].Color}" />
    </Storyboard>

How i can Set in the 'To' property to an GradientStop Color of my brush? because calling the way im calling it doesnt work.

Answer 1

Not sure what you want to do but Offset is a double number, hence you need to use DoubleAnimation like this one:

        <Canvas.Triggers>
            <EventTrigger RoutedEvent="Canvas.Loaded">
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation
                            Storyboard.TargetName="BlackCanvasGradient"
                            Storyboard.TargetProperty="Offset"
                            From="0" To="0.8" Duration="0:0:2" >
                        </DoubleAnimation>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </Canvas.Triggers>

Answer 2

The BrushPrincipalBorderBlue name is just a key it is not an actual LinearGradientBrush therefore it does not have any Propertys. I was able to get the error to go away by adding a name to the Brush. See if that works for you.

<Window.Resources>
    <LinearGradientBrush  x:Name="myBrush" x:Key="BrushPrincipalBorderBlue" EndPoint="1.3,1" StartPoint="-0.2,0"> 
    <GradientStop Color="#FF030637" Offset="1"/> 
    <GradientStop Color="#FF0E0F31" Offset="0.166"/> 
    <GradientStop Color="#FF2E2F70" Offset="0.629"/> 
    <GradientStop Color="#FF030637" Offset="0.63"/> 
</LinearGradientBrush> 

<Storyboard x:Key="GoToBlue">
        <ColorAnimation Storyboard.TargetName="border" Storyboard.TargetProperty="Background.GradientStops[3].Color" Duration="0:0:0.5" To="{DynamicResource myBrush.GradientStops[3].Color}"  />
</Storyboard> 

The only way I was able to access the colors was to define them seperatly i.e.

<Window.Resources>
    <Color x:Key="BrushPrincipalBorderBlue.Color1">
        <Color.A>#FF</Color.A>
        <Color.B>#03</Color.B>
        <Color.R>#06</Color.R>
        <Color.G>#37</Color.G>
    </Color>
    <Color x:Key="BrushPrincipalBorderBlue.Color2">
        <Color.A>#FF</Color.A>
        <Color.B>#0E</Color.B>
        <Color.R>#0F</Color.R>
        <Color.G>#31</Color.G>
    </Color>
    <Color x:Key="BrushPrincipalBorderBlue.Color3">
        <Color.A>#FF</Color.A>
        <Color.B>#2E</Color.B>
        <Color.R>#2F</Color.R>
        <Color.G>#70</Color.G>
    </Color>
    <Color x:Key="BrushPrincipalBorderBlue.Color4">
        <Color.A>#FF</Color.A>
        <Color.B>#03</Color.B>
        <Color.R>#06</Color.R>
        <Color.G>#37</Color.G>
    </Color>
    <LinearGradientBrush  x:Key="BrushPrincipalBorderBlue" EndPoint="1.3,1" StartPoint="-0.2,0">
        <GradientStop Color="{DynamicResource BrushPrincipalBorderBlue.Color1}" Offset="1"/>
        <GradientStop Color="{DynamicResource BrushPrincipalBorderBlue.Color2}" Offset="0.166"/>
        <GradientStop Color="{DynamicResource BrushPrincipalBorderBlue.Color3}" Offset="0.629"/>
        <GradientStop Color="{DynamicResource BrushPrincipalBorderBlue.Color4}" Offset="0.63"/>
    </LinearGradientBrush>
    <LinearGradientBrush  x:Key="BrushPrincipalBorderOriginal" EndPoint="1.3,1" StartPoint="-0.2,0">
        <GradientStop Color="#FFFFFFFF" Offset="1"/>
        <GradientStop Color="#FFFFFFFF" Offset="0.166"/>
        <GradientStop Color="#FFFFFFFF" Offset="0.629"/>
        <GradientStop Color="#FFFFFFFF" Offset="0.63"/>
    </LinearGradientBrush>
</Window.Resources>
<Grid Name="myGrid" Background="{DynamicResource BrushPrincipalBorderOriginal}" >
    <Grid.Triggers>
        <EventTrigger RoutedEvent="Canvas.Loaded">
            <BeginStoryboard>
                <Storyboard>
                    <ColorAnimation Storyboard.TargetName="myGrid" Storyboard.TargetProperty="Background.GradientStops[3].Color" Duration="0:0:2"  To="{DynamicResource BrushPrincipalBorderBlue.Color3}"  AutoReverse="True" RepeatBehavior="Forever"/>
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </Grid.Triggers>
</Grid>