Simple UWP Button Animation

Question

To test out UWP, I made a very simple small sample application that uses just the base classes to make a nice and scalable UI. One of the most recent problems that I have come across is making the button animate. In WPF this was a trivial process; however, in UWP, I came across a roadblock almost instantly when working with the Storyboard's attachable properties. I tried many variations of the following code, but all of them either said that the animation values were not valid for the object, or that it could not evaluate the values. The following sample errors with The TypeConverter for "DependencyObject" does not support converting from a string. What am I doing wrong? I know it has something to do with Storyboard.Target, but if I set the value to something else like {Binding ElementName=Start}, it would throw another error, saying No installed components were detected. Cannot resolve TargetProperty Background on specified object.

<Button Grid.Row="2" Name="Start" HorizontalAlignment="Center" Content="START" FontFamily="Nexa Bold" FontSize="10" BorderThickness="0" Foreground="AntiqueWhite" FontWeight="Black">
<Button.Triggers>
    <EventTrigger RoutedEvent="Button.Click">
        <EventTrigger.Actions>
            <BeginStoryboard>
                <Storyboard AutoReverse="True" Duration="0:0:0:1.000">
                    <ObjectAnimationUsingKeyFrames Storyboard.Target="Start" Storyboard.TargetProperty="Background">

                    </ObjectAnimationUsingKeyFrames>
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger.Actions>
    </EventTrigger>
</Button.Triggers>

All help is appreciated. Thanks!

Have a look at [this](https://stackoverflow.com/questions/31929071/trigger-element-xaml-is-not-supported-in-a-uwp-project). Triggers are not supported in UWP. — Justin XL, Aug 25 '17 at 23:41
@JustinXL Well, that's rather annoying. To get this straight, you can change the properties on an event, but not animate them. Is there any possible way to achieve the animation? Would using the code-behind alleviate this problem? — Alex Fanat, Aug 26 '17 at 08:21
Actually you still can. I can write an answer to show you how but can you first tell me exactly what you are trying to animate? My guess is you want to animate the background of your button to another color and reverse it? Do you want smooth color animation or instant brush change? — Justin XL, Aug 26 '17 at 08:32
@JustinXL Exactly! Then, from there I can dissect the code and use in other situations. Thank you very much for your help; I greatly appreciate it. — Alex Fanat, Aug 26 '17 at 08:54
Sure. :) Then you probably don't want to animate the brushes 'cause they are not really animatable (the color will just change instantly). I will write you one with smooth color animations. — Justin XL, Aug 26 '17 at 08:56

score 4 · Accepted Answer · answered Aug 26 '17 at 09:49

There's no built-in Trigger support in UWP but with the help of Behavior, this also can be done elegantly.

First, we need to install the Behavior SDK from Nuget.

Install-Package Microsoft.Xaml.Behaviors.Uwp.Managed -Version 2.0.0

Then, include the following namespace in your XAML page.

xmlns:Interactivity="using:Microsoft.Xaml.Interactivity"
xmlns:Core="using:Microsoft.Xaml.Interactions.Core"

Next, define your Storyboard in the Resource section of the page.

<Page.Resources>
    <Storyboard x:Name="BackgroundColorStoryboard"
                AutoReverse="True">
        <ColorAnimation Duration="0:0:1"
                        To="Red"
                        Storyboard.TargetProperty="(Control.Background).(SolidColorBrush.Color)"
                        Storyboard.TargetName="Start"
                        d:IsOptimized="True" />
    </Storyboard>
</Page.Resources>

Finally, we want to pick a behavior called ControlStoryboardAction that comes from the SDK and attach it to your Button. Note this ControlStoryboardAction is wrapped within a EventTriggerBehavior of which EventName is set to Click. This means, whenever the Click event of the attached element (i.e. your Button) is invoked, the Storyboard of the ControlStoryboardAction will be kicked off. This is similar to what Triggers do in WPF.

<Button x:Name="Start">
    <Interactivity:Interaction.Behaviors>
        <Core:EventTriggerBehavior EventName="Click">
            <Media:ControlStoryboardAction Storyboard="{StaticResource BackgroundColorStoryboard}" />
        </Core:EventTriggerBehavior>
    </Interactivity:Interaction.Behaviors>
</Button>

There are tons of other useful behaviors included in this SDK. You can check them all out from here. Hope this helps!

score 1 · Answer 2 · answered Aug 26 '17 at 03:02

1

Since you already have a Storyboard, how about just playing it in Click handler of your button?

MyStoryboard.Begin();

answered Aug 26 '17 at 03:02

Jessica

2,057
1
15
24

Sorry, but the XAML wont compile without the storyboard targets set, and as I have mentioned, I get errors if I try to set them. Good thought though. – Alex Fanat Aug 26 '17 at 08:17

Simple UWP Button Animation

2 Answers2