Chapter 8 Advanced UI Concepts

<DataTrigger.ExitActions>

<triggers:ShowOverlayTriggerAction ShowOverlay="False" />

</DataTrigger.ExitActions>

</DataTrigger>

This can now be interpreted as, when the IsAddingWidget property value changes to true, a ShowOverlayTriggerAction will be invoked with ShowOverlay set to true. This will result in the AddWidgetFrame control becoming visible. Then, when the IsAddingWidget property value changes to false, a ShowOverlayTriggerAction will be invoked with ShowOverlay set to false. This will result in the AddWidgetFrame control becoming invisible.

It is also worth noting that you can define triggers in styles, meaning this type of functionality can be reused multiple times without having to duplicate the code.

Let’s take a break from triggers for now to take a look at how you can animate controls in .NET MAUI. Then you will return and combine triggers and animations together to really show off the power of the action you just created.

Further Reading

You have only scratched the surface on the functionality that can be achieved with triggers. I recommend checking out the

Microsoft documentation to see more ways triggers can be useful: https://learn.microsoft.com/dotnet/maui/fundamentals/triggers.

Animations

This feels like it could be a challenging topic to show off in printed form given the dynamic nature of an animation but it is one of my favorite topics so I am going to show it off as best I can. Animations provide you with the building blocks to make your applications feel much more natural and organic.

242

Chapter 8 Advanced UI Concepts

.NET MAUI provides two main ways to perform an animation against any VisualElement. You will take a look at each approach and how some animations can be built using them.

Basic Animations

.NET MAUI ships with a set of prebuilt animations available via extension methods. These methods provide the ability to rotate, translate, scale, and fade a VisualElement over a period of time. Each of these methods have a To suffix, for example ScaleTo. It is worth noting that each of the methods for animating are asynchronous and will therefore need to be awaited

if you wish to know when they have finished. The full list of animation methods are as follows:

243

Chapter 8 Advanced UI Concepts

The overlay view you added in the previous section just shows immediately and disappears immediately based on the IsVisible binding you created. What if you animate your overlay to grow from nothing up to the required size? Don’t worry about adding this code to your application just yet. You will look over some examples and then add it to Visual Studio in the “Combining Triggers and Animations” section. The main reason for not adding it immediately is because the animations API relies on direct access to the view-related information, and this breaks the MVVM pattern. However, once you look over how to animate, you can take this learning and add it into your ShowOverlayTriggerAction implementation.

The code to animate a VisualElement is surprisingly small, as you can see in the following example:

AddWidgetFrame.Scale = 0;

await AddWidgetFrame.ScaleTo(1, 500);

First, you make sure that the AddWidgetFrame has a Scale of 0 and then you call ScaleTo, telling it to grow to a Scale of 1 (which is 100%) over a duration of 500 milliseconds.

All of the prebuilt animation methods apart from the ones that start with Rel perform the animation against the VisualElements existing value (e.g., for ScaleTo it will change from the existing Scale property value). This means that it is entirely possible that no animation will take place if both the existing property and the value provided to the method are the same.

244