Building Cross-Platform Applications with .NET MAUI/

...

/

Animations

Animations

Learn how animations work in .NET MAUI.

We'll cover the following...

Like any other software development framework for building user interfaces, .NET MAUI has many ways of working with animations. Not only are many different animation types supported by .NET MAUI, but these animations are also highly configurable. We can delay an animation, control its speed, combine multiple animations together, and so on.

We'll demonstrate how to work with animations by using the following project. This project contains several examples of various animations supported by MAUI. We also have an example of combining multiple animations together.

<?xml version = "1.0" encoding = "UTF-8" ?>
<Application xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:MauiGraphicsDemo"
             x:Class="MauiGraphicsDemo.App">
    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="Resources/Styles/Colors.xaml" />
                <ResourceDictionary Source="Resources/Styles/Styles.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
</Application>
.NET MAUI project with graphics demonstrated

Changing object scale

Scaling an object makes it either bigger or smaller than its original size. A scale of 1 represents the original size. Any number smaller than this represents a proportionally smaller size. Any number larger than 1 represents a proportionally larger size. For example, the value of 0.5 represents half the original size, while the value of 2 represents double the original size.

In .NET MAUI, we can scale objects on the page by calling the ScaleTo method on the object we want to change the scale of. ...