Chapter 8 Advanced UI Concepts

Now that you have covered building animations and some possible examples of using them, let’s combine them with your trigger knowledge to really make your AddWidgetFrame look great when it becomes visible.

Combining Triggers and Animations

Animations are a really powerful tool but they require view knowledge. This is where having the ability to trigger them from a trigger allows you to keep with the MVVM approach and keep your view and view model cleanly separated.

Now that you have covered how to apply an animation to your overlay view and looked at separating view from view model through the use of triggers, you can combine the two together to trigger the animation and keep the separation.

Let’s return to the ShowOverlayTriggerAction.cs file and add in the animation from the “Concurrent animations” section (changes are in bold).

namespace WidgetBoard.Triggers;

public class ShowOverlayTriggerAction : TriggerAction<VisualElement>

{

public bool ShowOverlay { get; set; }

protected async override void Invoke(VisualElement sender)

{

if (ShowOverlay)

{

sender.Scale = 0; sender.IsVisible = true; sender.Opacity = 0;

252

Chapter 8 Advanced UI Concepts

await Task.WhenAll( sender.FadeTo(1),

sender.ScaleTo(1, 500, Easing.SpringOut));

}

else

{

await sender.ScaleTo(0, 500, Easing.SpringIn);

sender.Opacity = 0;

sender.IsVisible = false;

}

}

}

The trigger action now provides two key visual changes when the ShowOverlay property value changes. When the property becomes true, the AddWidgetFrame control will both fade in over 250ms and scale up from 0 to 1 over 500ms. You also make use of the Easing.SpringOut option to give a slightly more fluid feel to the changes in the animation.

When ShowOverlay becomes false, you just reverse the scale animation to show it shrink. Once the animation has completed, you then make sure that the control is no longer visible.

This concludes the sections on triggers and animations. You have seen how they can help to both simplify the views and view models you create while at the same time provide some really great functionality to make your applications feel alive. I would recommend taking the application for a spin and observing the animations in action, sadly we can’t show that functionality off in printed form.

253