Welcome to the Sands of MAUI—newsletter-style issues dedicated to bringing together the latest .NET MAUI content relevant to developers.
A particle of sand—tiny and innocuous. But put a lot of sand particles together and we have something big—a force to reckon with. It is the smallest grains of sand that often add up to form massive beaches, dunes and deserts.
.NET developers are excited with the reality of .NET Multi-platform App UI (.NET MAUI)—the evolution of modern .NET cross-platform developer technology stack. With stable tooling and a rich ecosystem, .NET MAUI empowers developers to build native cross-platform apps for mobile/desktop from single shared codebase, while inviting web technologies in the mix.
While it may take a long flight to reach the sands of MAUI island, developer excitement around .NET MAUI is quite palpable with all the created content. Like the grains of sand, every piece of news/article/documentation/video/tutorial/livestream contributes toward developer experiences in .NET MAUI and we grow a community/ecosystem willing to learn & help.
Sands of MAUI is a humble attempt to collect all the .NET MAUI awesomeness in one place. Here’s what is noteworthy for the week of July 8, 2024:
Parallax Effect in .NET MAUI
It’s July and time for #MAUIUIJuly again. Based on an idea originally started for Xamarin by Steven Thewissen, MAUI UI July is a month-long community-driven event where anyone gets to share enthusiasm and passion for .NET MAUI. Run by Matt Goldman, this is a great opportunity for .NET MAUI developers to learn from each other—MAUI UI July is happening again for 2024. Matt Goldman was also the first one to start things off for MAUI UI July with a wonderful article—parallax effect in .NET MAUI.
Parallax is the term for when things in the foreground appear to move more quicky than things in the background. Parallax is one of those effects that is dangerously easy to overuse in your apps, but equally, when done right, can add an extra wow factor that elevates an otherwise flat app to give it some depth.
Matt showcases how to build parallax effect into .NET MAUI apps with a simple superheroes information app that shows a series of cards with a picture and some text. Starting from the vanilla CollectionView, Matt builds in the parallax effect by manipulating the position of the images relative to the card, so that it appears the images are moving faster than the cards when scrolled—this makes the image appear closer than the background, which creates the illusion of depth.
To implement the parallax effect, Matt explains the math logic and demonstrates the customizations needed for Android and iOS. This is brilliant inspiration for anyone looking to add the sense of depth in .NET MAUI apps.
New Blazor Hybrid Template
.NET MAUI is squarely meant for developers to build native mobile/desktop apps—however, armed with modern smart WebViews, .NET MAUI is more than capable to welcome web content to native land. In fact, Blazor/JavaScript developers should feel empowered to bring web UI components, routing, styling and more to native cross-platform .NET MAUI apps, while gaining complete native platform API access. There is good news for anyone interested in sharing code through Blazor Hybrid apps, and James Montemagno produced a video—say hello to the new Blazor Hybrid + Web .NET MAUI template.
Blazor and .NET MAUI share the same underlying .NET runtime—the ease of welcoming Blazor developers to native mobile/desktop world should be well-established by now. James shared his excitement about the new Blazor Hybrid with Web solution template—folks need to be on .NET 9 Previews to use it. The goal would be to have a shared Razor class library, so developers can share Blazor UI/styles across native and web apps. The template sets up multiple projects nicely, with Blazor UI driving customized experiences for web apps, as well as native .NET MAUI apps. With implementations of C# Interfaces driving customizations across platforms, Blazor UI can truly be shared between web, mobile and desktop apps—more developer flexibility for the win.
Lists in .NET MAUI
.NET MAUI is built to enable .NET developers to create cross-platform apps for Android, iOS, macOS and Windows, with deep native integrations, platform-native UI and hybrid experiences that extend the reach of Blazor/JS web UI technologies. MAUI UI July perfectly celebrates developer excitement around .NET MAUI—there will be fresh content ready to be bookmarked almost every day of July. The next MAUI UI July article comes from David Ortinau with an epic writeup—all about lists in .NET MAUI.
Most mobile apps inevitably have a list of things to display—the UI component used makes all the difference. There are some key considerations for developers—specialized needs may not be met by generalized controls and simple flat layouts perform better than complex UI. Performance and UX should be key considerations—developers should always evaluate the best way to display lists given the requirements.
David explores several common UI components—.NET MAUI provides CollectionView, ListView and BindableLayout, while VirtualListView and VirtualizeListView are community-driven. For each popular list UI, David demonstrates different approaches to work through, along with corresponding strengths and weaknesses. Developers should always keep some performance considerations in mind—like layout lifecycles, binding modes, image handling, build configuration and testing on devices. List of things on mobile devices can make or break an app—thanks David for exploring the various ways and the detailed writeup with most of the considerations.
Light or Dark Mode
.NET MAUI is the evolution of modern .NET cross-platform development stack, allowing developers to reach mobile and desktop form factors from single shared codebase. And the .NET MAUI Community Toolkit is a collection of reusable elements for application development with .NET MAUI, including animations, behaviors, converters, effects and helpers.
Modern times call for apps to offer both light and dark mode options for user interfaces—it is just good UX and better for accessibility. While .NET MAUI offers ways for developers to this conventionally, things can be easier, and Leomaris Reyes wrote up an article—simplifying light and dark modes in .NET MAUI apps.
The conventional way to handle light/dark mode in .NET MAUI apps is by adding the AppThemeBinding markup extension inside the property of a control and then defining values for modes. Instead of repeating for each control, developers can create a style that already assigns colors for both modes or used in conjunction with existing styles.
Leomaris introduces developers to AppThemeObject and AppThemeColor markup extensions—both part of the .NET MAUI Community Toolkit. These extensions assist in creating thematic resources for .NET MAUI apps, simplifying the management of colors, images and other resources. They also automatically adapt based on the app’s current appearance mode—great for supporting light/dark modes.
Leomaris starts with the basics of .NET MAUI Community Toolkit and explores the properties of AppThemeObject/AppThemeColor markup extensions in detail. With easy to follow sample code, Leomaris showcases usage of AppThemeObject/AppThemeColor markup extensions in .NET MAUI apps, as well as leveraging theme-aware resources as a ResourceDictionary in existing XAML styles—great content for .NET MAUI developer knowledge.
Animated Splash Screens
Modern mobile apps are complicated and demanding—developers can use all the help available to keep users engaged. One of the ways to make a good first impression or to keep the user interested while a mobile app is loading up is the app splash screen. Movement or animations are always great for user attention, and Luis Beltran authored an article as a part of MAUI UI July—animated Android splash screens in .NET MAUI apps.
Beginning with Android 12, the splash screen API allows developers to define an animated splash screen that plays when the app starts. This works without the usual hacks of custom activity with a GIF or fake animation view. Luis starts off describing the process to pull off the wonderful UX—an animated splash screen in Android is defined as an Animated Vector Drawable.
The steps are to grab a NuGet package, add an Animated Vector Drawable as an AndroidResource, define a theme and, finally, invoke the splash screen API from Android’s MainActivity. The result is a wow-worthy start for .NET MAUI Android apps, with tons of developer flexibility to customize the experience. Thanks for the inspirations Luis.
That’s it for now.
We’ll see you next week with more awesome content relevant to .NET MAUI.
Cheers, developers!