CODEWITHSUNDEEP
c#xamlanimationuwp
Francois Gagnon
Francois Gagnon

Reputation: 362

Animating background color of CommandBar in UWP crashes

I've been working at animating the background color and opacity of CommandBar over an image for it to become more opaque when the mouse cursor is moved.

The XAML code I'm using for the animation is as follows: 

<Storyboard x:Name="topbagroundfadeinout">
    <DoubleAnimationUsingKeyFrames Storyboard.TargetName="topcmdbar" Storyboard.TargetProperty="Background.Color">
        <EasingDoubleKeyFrame KeyTime="0" Value="Transparent" />
        <EasingDoubleKeyFrame KeyTime="0:0:1" Value="Black" />
        <EasingDoubleKeyFrame KeyTime="0:0:4" Value="Black" />
        <EasingDoubleKeyFrame KeyTime="0:0:6" Value="Transparent" />
    </DoubleAnimationUsingKeyFrames>
</Storyboard>

And the C# event handler looks like this:

private void raiseopacity(object s, PointerRoutedEventArgs e)
{
    if (topcmdbarfadeinout.GetCurrentState()!=ClockState.Active)
    {              
        topcmdbarfadeinout.Begin();
        topbagroundfadeinout.Begin();
    }
}

If I include only the fade in/out of the opacity, everything works fine. However, as soon as I uncomment the XAML code for the background color animation, the program compiles but execution crashes with a weird error

Failed to create a 'Windows.Foundation.Double' from the text 'Transparent'. [Line: 0 Position: 0]

Anyone knows what's wrong? Or anyone has a better way to do this?

Upvotes: 0

Views: 268

Answers (1)

Martin Zikmund
Martin Zikmund

Reputation: 39082

DoubleAnimation is meant for double data type. Instead in this case you are animating Windows.UI.Color, which has a dedicated ColorAnimation and its EasingColorKeyFrame elements.

Also, you will probably need to modify the Storyboard.TargetProperty to (CommandBar.Background).(SolidColorBrush.Color), as it is a complex property. 

<Storyboard x:Name="topbagroundfadeinout">
    <ColorAnimationUsingKeyFrames Storyboard.TargetName="topcmdbar" 
     Storyboard.TargetProperty="(CommandBar.Background).(SolidColorBrush.Color)">
        <EasingColorKeyFrame KeyTime="0" Value="Transparent" />
        <EasingColorKeyFrame KeyTime="0:0:1" Value="Black" />
        <EasingColorKeyFrame KeyTime="0:0:4" Value="Black" />
        <EasingColorKeyFrame KeyTime="0:0:6" Value="Transparent" />
    </ColorAnimationUsingKeyFrames>
</Storyboard>

Also note, that Transparent color is actually a white color with 0 opacity. This can prove to be a problem, as the animation will essentially fade from white to black instead of from invisible black to black. I have written more about this in on my blog.

In your case, you may be better off specifying the transparent black instead of Transparent manually:

<Storyboard x:Name="topbagroundfadeinout">
    <ColorAnimationUsingKeyFrames Storyboard.TargetName="topcmdbar" 
     Storyboard.TargetProperty="(CommandBar.Background).(SolidColorBrush.Color)">
        <EasingColorKeyFrame KeyTime="0" Value="#00000000" />
        <EasingColorKeyFrame KeyTime="0:0:1" Value="Black" />
        <EasingColorKeyFrame KeyTime="0:0:4" Value="Black" />
        <EasingColorKeyFrame KeyTime="0:0:6" Value="#00000000" />
    </ColorAnimationUsingKeyFrames>
</Storyboard>

Although the difference might not be noticeable in all situations, you may try both solutions to see which better fits with your intended use.

Upvotes: 0

Related Questions