Animating a GradientBrush in UWP - xaml

Question

I want to animate a GradientBrush (LinearGradientBrush in my case) used by a control's fill property. I tried to change the gradient stops values (offset or color) in my storyboard but it doesn't seem to work. I target a grid's background for the example:
<Grid x:Name="LogoGrid" Height="512" Width="512">
<Grid.Background>
<LinearGradientBrush x:Name="LogoBackgroundBrush" StartPoint="0 0" EndPoint="1 1">
<GradientStop x:Name="Stop0" Color="Transparent" Offset="0" />
<GradientStop x:Name="Stop1" Color="#80FFFFFF" Offset="0.5" />
<GradientStop x:Name="Stop2" Color="Transparent" Offset="1" />
</LinearGradientBrush>
</Grid.Background>
</Grid>
And the storyboard:
<Storyboard x:Key="LoadingStoryBoard">
<ColorAnimationUsingKeyFrames Storyboard.TargetName="LogoGrid"
Storyboard.TargetProperty="(UIElement.Background).(LinearGradientBrush.GradientStops)[1].(GradientStop.Color)"
RepeatBehavior="Forever" EnableDependentAnimation="True">
<LinearColorKeyFrame Value="#40000000" KeyTime="0:0:1" />
<LinearColorKeyFrame Value="#A0FFFFFF" KeyTime="0:0:2" />
</ColorAnimationUsingKeyFrames>
</Storyboard>

Answer 1

Did you make sure to set EnableDependentAnimation to true?
You can look at my answer to another similar question for a complete example.

Answer 2

You didn't mention how you start the storyboard. Anyway, I made it work by replacing x:Key with x:Name (otherwise I can't reference the storyboard from code).
XAML
<Grid x:Name="LogoGrid">
<Grid.Resources>
<Storyboard x:Name="LoadingStoryBoard">
<ColorAnimationUsingKeyFrames
Storyboard.TargetName="LogoGrid"
Storyboard.TargetProperty="(UIElement.Background).(LinearGradientBrush.GradientStops)[1].(GradientStop.Color)"
RepeatBehavior="Forever"
EnableDependentAnimation="True">
<LinearColorKeyFrame Value="#40000000" KeyTime="0:0:1" />
<LinearColorKeyFrame Value="#A0FFFFFF" KeyTime="0:0:2" />
</ColorAnimationUsingKeyFrames>
</Storyboard>
</Grid.Resources>
<Grid.Background>
<LinearGradientBrush x:Name="LogoBackgroundBrush" StartPoint="0,0" EndPoint="1,1">
<GradientStop x:Name="Stop0" Color="Transparent" Offset="0" />
<GradientStop x:Name="Stop1" Color="#80FFFFFF" Offset="0.5" />
<GradientStop x:Name="Stop2" Color="Transparent" Offset="1" />
</LinearGradientBrush>
</Grid.Background>
</Grid>
Code-behind
public sealed partial class MainPage
{
public MainPage()
{
InitializeComponent();
Loaded += (sender, args) => LoadingStoryBoard.Begin();
}
}
Here is a complete demo project on GitHub.
Edit
Tangetial: This shows how to access the storyboard through x:Key instead of my x:Name. The trick is to access the storyboard through Resources, e.g.:
((Storyboard)Resources["LoadingStoryboard"]).Begin();