Animating a GradientBrush in UWP

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>

score 2 · Answer 1 · edited May 23 '17 at 12:10

2

Did you make sure to set EnableDependentAnimation to true?

You can look at my answer to another similar question for a complete example.

edited May 23 '17 at 12:10

Community

1
1

answered Nov 09 '16 at 12:29

Decade Moon

32,968
8
81
101

Yes, this property is enabled and I tried to animate the offset (DoubleAnimation) or the color (ColorAnimation). I have updated my question for more details. – Bertrand C. Nov 09 '16 at 12:57

score 0 · Answer 2 · edited May 23 '17 at 12:17

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();

I tried this solution but there is no color animation at all. My storyboard is well launched (i've tried with others animations), don't know where is the problem. The property "EnableDependentAnimation" was set to true. — Bertrand C., Feb 24 '17 at 10:41
@BertrandC: I put a minimal, self-contained project up on GitHub (see updated answer). If that doesn't work for you, I don't know what the problem is. — Petter Hesselberg, Feb 25 '17 at 01:16

Animating a GradientBrush in UWP

2 Answers2

XAML

Code-behind

Edit