Movatterモバイル変換


[0]ホーム

URL:


Skip to content
DEV Community
Log in Create account

DEV Community

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

Posted on

     

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 inUWP andWinUI have knowledge of these tricks! Currently, .NET MAUI usesWinUI 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 theRepositionThemeTransition, 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 aPanel, you can use the following XAML code snippet:

<maui:MauiWinUIApplication.Resources><StyleTargetType="Panel"><SetterProperty="ChildrenTransitions"><Setter.Value><TransitionCollection><RepositionThemeTransition/></TransitionCollection></Setter.Value></Setter></Style></maui:MauiWinUIApplication.Resources>
Enter fullscreen modeExit fullscreen mode

You can also animate individual elements likeButton 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 theSlideNavigationTransition, here's the code you need:

<maui:MauiWinUIApplication.Resources><StyleTargetType="Page"><SetterProperty="Transitions"><Setter.Value><TransitionCollection><EdgeUIThemeTransitionEdge="Bottom"/></TransitionCollection></Setter.Value></Setter></Style></maui:MauiWinUIApplication.Resources>
Enter fullscreen modeExit fullscreen mode

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

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

Top comments(0)

Subscribe
pic
Create template

Templates let you quickly answer FAQs or store snippets for re-use.

Dismiss

Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment'spermalink.

For further actions, you may consider blocking this person and/orreporting abuse

Buy me marshmallows and I'll be your friend. 👀 💻#WinUI,📱#MAUI and 🌐#Blazor Developer.
  • Joined

More fromMohammad Hossein Rastegarinia

DEV Community

We're a place where coders share, stay up-to-date and grow their careers.

Log in Create account

[8]ページ先頭

©2009-2025 Movatter.jp