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. 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!

Answer 1

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 (ie your Button ) is invoked, the Storyboard of the ControlStoryboardAction will be kicked off. This is similar to what Trigger s 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!

Answer 2

既然您已经有了一个故事板，那么只需在按钮的Click处理程序中播放它即可？

MyStoryboard.Begin();