DEV Community

Cover image for Animate your .NET MAUI Windows app
Mohammad Hossein Rastegarinia
Mohammad Hossein Rastegarinia

Posted on

8 1

Animate your .NET MAUI Windows app

If you're new to Windows development with .NET MAUI, you may not be familiar with some of the native tricks available. However, developers experienced in UWP and WinUI have knowledge of these tricks! Currently, .NET MAUI uses WinUI for Windows development, and there are a lot of impressive animations in WinUI that we can incorporate into our .NET MAUI apps. Let's explore some of them.

Animate moving elements

One of the animations available is the RepositionThemeTransition, which works when an element moves, such as when you resize your window or when certain events occur in your C# code. You can also utilize Triggers and VisualStates in XAML to trigger this animation. I'm absolutely enamored by this animation, It's truly remarkable. You just need to have a responsive design to witness its magic.
To animate any layout by targeting a Panel, you can use the following XAML code snippet:

    <maui:MauiWinUIApplication.Resources>
        <Style TargetType="Panel">
            <Setter Property="ChildrenTransitions">
                <Setter.Value>
                    <TransitionCollection>
                        <RepositionThemeTransition />
                    </TransitionCollection>
                </Setter.Value>
            </Setter>
        </Style>
    </maui:MauiWinUIApplication.Resources>
Enter fullscreen mode Exit fullscreen mode

You can also animate individual elements like Button by specifying the target type accordingly.

Changing Page Navigation Animation

If you wish to modify the default page animation in .NET MAUI for Windows, which is the SlideNavigationTransition, here's the code you need:

    <maui:MauiWinUIApplication.Resources>
        <Style TargetType="Page">
            <Setter Property="Transitions">
                <Setter.Value>
                    <TransitionCollection>
                        <EdgeUIThemeTransition Edge="Bottom" />
                    </TransitionCollection>
                </Setter.Value>
            </Setter>
        </Style>
    </maui:MauiWinUIApplication.Resources>
Enter fullscreen mode Exit fullscreen mode

That's all there is to it! Just remember to include these code snippets in the Platforms/Windows/App.xaml file of your project. Additionally, I've created a sample repository where you can access the code here.
Also you can learn more about Windows animations from here.

I hope you find these animations useful and enjoy enhancing your .NET MAUI Windows app with delightful visual effects!

Image of Datadog

The Future of AI, LLMs, and Observability on Google Cloud

Datadog sat down with Google’s Director of AI to discuss the current and future states of AI, ML, and LLMs on Google Cloud. Discover 7 key insights for technical leaders, covering everything from upskilling teams to observability best practices

Learn More

Top comments (0)

Heroku

Build apps, not infrastructure.

Dealing with servers, hardware, and infrastructure can take up your valuable time. Discover the benefits of Heroku, the PaaS of choice for developers since 2007.

Visit Site