Sands of MAUI: Issue #48

Welcome to the Sands of MAUI—newsletter-style issues dedicated to bringing together 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.

Most .NET developers are looking forward to .NET Multi-platform App UI (MAUI)—the evolution of Xamarin.Forms with .NET 6. Going forward, developers should have much more confidence in the technology stack and tools as .NET MAUI empowers native cross-platform solutions on mobile and desktop.

While it is a long flight until we reach the sands of MAUI, developer excitement is palpable in all the news/content as we tinker and prepare for .NET MAUI. Like the grains of sand, every piece of news/article/video/tutorial/stream contributes towards developer knowledge and we grow a community/ecosystem willing to learn and 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 March 14, 2022:

.NET MAUI Preview 13 Overview

.NET MAUI Preview 13 has been out for a while and Preview 14 is almost done cooking. However, a lot of developers are playing catchup with the frenzied pace of preview releases of .NET MAUI and early adopters are often migrating apps from previous versions.

Gerald Versluis produced a video on .NET MAUI Preview 13 overview—a holistic look at where things are today and how to move between preview versions.

Gerald started with the .NET MAUI Preview 13 announcement blog post and walked through the major features—better app bootstrapping and performance tuning were the big takeaways. Developers on bleeding edge with .NET MAUI have to acknowledge the fun and pain often associated with preview bits/tooling—new feature hotness is nice, but breaking changes are also a reality.

Gerald walked through much of .NET MAUI documentation and wiki—there is now documented information on how to move older .NET MAUI projects to latest previews. Developer lives are close to getting better as .NET MAUI runtimes, templates and tooling get solidified ahead of Release Candidate builds coming up shortly.

MVVM Source Generators

Model View ViewModel (MVVM) is a battle-tested design pattern and it works really well for XAML/C# codebases—so it squarely fits Xamarin.Forms and .NET MAUI. However, rolling MVVM on your own often means writing a lot of boilerplate code—implementing INotifyPropertyChanged for two-way data binding, defining Commands or writing up an elaborate ViewModelBase class. Turns out, these days developers do not have to write all that boilerplate code and have auto-generated MVVM implementation out of the box.

James Montemagno produced a video on MVVM Source Generators—now part of .NET Community Toolkit.

James starts off with MVVM basics with INotifyPropertyChanged/Command implementations—something every XAML/C#/.NET developer should know. However, grab the preview CommunityToolkit.Mvvm NuGet package, and you'll start seeing benefits right away.

Developers can annotate a ViewModel class with the INotifyPropertyChanged attribute and make it a partial class—all the boilerplate PropertyChanged event wiring is autogenerated with Source Generators. Alternatively, developers could extend the ObservableObject interface and annotate individual properties as ObservableProperty—much of the boilerplate code for data binding is auto generated by the Toolkit Analyzers. Decorate a method with the ICommand attribute and you get an implementation of IRelayCommand/IAsyncRelayCommand automatically. James does the usual great job of demonstrating features with easy-to-follow code—so developers, go check out the latest .NET Community Toolkit.

StateLayout with Collections

Some time back, Steven Thewissen had created a wonderful plugin which allowed displaying a specific UI component view when the content is in a specific state. This is now a part of the Xamarin Community Toolkit as StateLayout.

Charlin Agramonte wrote a nice article on how to use StateLayout to load data into collections for Xamarin.Forms/.NET MAUI apps.

Developers need to grab the Xamarin Community Toolkit NuGet package to get started with the Statelayout—it allows for different views according to specific states and views change automatically with current state. There are pre-defined states like Loading, Error, Success, Saving and more, but developers can also define their own custom state. And there can be animated transitions when switching between states.

Charlin goes on to talk about how to use StateLayout with CollectionView with custom templated UI—for empty containers or bound to actual data. Add some animations and developers can have a polished UI as data loads into the CollectionView—this can be really handy for lazy-loading data.

Blazor for Web and Beyond

.NET FrontEnd Day was a full day virtual conference for all things modern client development with .NET—speakers and attendees from all over the world got together to share their love of .NET. Unsurprisingly, a lot of the cool new frontend things happening with .NET are with Blazor and .NET MAUI. Daniel Roth did a fun session to talk about the state of affairs with Blazor for web and native mobile/desktop apps.

Dan started with Blazor updates in .NET 6 and showed off latest tooling with hot reload. While Blazor server-side is a nice way to start for beginners, Blazor WebAssembly has seen a lot of improvements, optimizations and performance tuning.

Dan then got to what matters for .NET MAUI developers—Hybrid apps bringing Blazor goodness into cross-platform mobile/desktop apps. Powered by BlazorWebView, Blazor components can now be rendered inside native apps bootstrapped with .NET MAUI—this gives developers all the native API access from Blazor code.

Dan, the master of fast paced demos, showed off an example of how a .NET MAUI cross-platform project and a Blazor project for the web can co-exsist within the same solution. Developers can share the exact Blazor components between web and .NET MAUI—this should be a big win for code reuse.

Dan also talked about how Blazor Hybrid apps offer a nice way to consider modernization of older desktop apps—the BlazorWebView strategy of embedded web content can be brought to WinForms and WPF as well. Dan finished off with planned roadmap of Blazor in .NET 7, for web and beyond. You know there is developer excitement about Blazor and .NET MAUI when the Q/A for the session was almost as long as the session itself—good times ahead for .NET developers.

Animations with Lottie

Shaun Lawrence wrote another article in his wonderful series of building a mobile game in Xamarin.Forms—everything totally applicable to .NET MAUI.

This time, Shaun talks about adding some wow factor to your app—animations with Lottie. Lottie is an animation library that was open-sourced by Airbnb. It parses Adobe After Effects animations to JSON files and renders them natively on iOS/Android. Talented designers build native animations with Lottie and share on Lottie Files—free or paid animations ready to embed in apps.

Lottie animations are easy to customize and use within Xamarin.Forms/.NET MAUI—simply grab the Com.Airbnb.Xamarin.Forms.Lottie NuGet package. Developers can then add ready-made or customized Lottie animations as .json files in respective iOS/Android projects with corresponding build actions to include them in app packages.

What's left to do is bring the Lottie namespace in XAML files and use the AnimationView to render the .json files—it's quite easy to add lively custom animations to apps and keep users engaged.

That's it for now.

We'll see you next week with more awesome content relevant to .NET MAUI.

Cheers, developers!