Sands of MAUI: Issue #85

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 excited with .NET Multi-platform App UI (MAUI)—the evolution of modern .NET cross-platform developer experience. Going forward, developers should have much more confidence in the technology stack and tools as .NET MAUI empowers native cross-platform solutions on both mobile and desktop.

While it may take a long flight to reach the sands of MAUI island, developer excitement around .NET MAUI is quite palpable in all the shared content. Like the grains of sand, every piece of news/article/documentation/video/tutorial/livestream contributes towards developer knowledge 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 December 19, 2022:

Combine .NET MAUI and Blazor

.NET MAUI and Blazor seem to be a match made in heaven—they share the exact same .NET runtime. Armed with a modern WebView, .NET MAUI allows for Blazor web components/styles to now work inside native mobile/desktop apps. Turns out, there are a few ways to mix and match .NET MAUI with Blazor—developers can truly share a lot of code and get the best of both worlds. The Gerald Versluis produced another wonderful video—three ways to combine .NET MAUI and Blazor Hybrid inside a single native app.

Gerald starts out explaining Blazor Hybrid and how the BlazorWebView component wires everything up inside .NET MAUI apps. Developers can combine Blazor and .NET MAUI full pages—there is nothing stopping a Tabs based navigation pattern serving up web pages, components or .NET MAUI pages interchangeably.

While Blazor C# code can invoke .NET MAUI platform APIs, developers may sometimes want to inject native .NET MAUI pages while inside a Blazor Hybrid app with all web content—this is totally possible and easy. In case a very native app experience is desired while using Blazor Hybrid mode, Gerald showcases scanning Barcodes functionality by pulling up .NET MAUI Popup from Blazor code.

Blazor and .NET MAUI combined is a great playground—.NET developers can mix and match and cater the desired UI/UX while sharing code.

Blazor Across Web and Native

Blazor is understandably the most exciting web framework for .NET developers, allowing C# to run server-side or entirely client-side through WebAssembly. And .NET MAUI ushers in the next generation of native cross-platform development on .NET, effortlessly reaching mobile/desktop platforms from a single codebase. With a modern WebView UI component, .NET MAUI welcomes Blazor to native land—web components and styles can be rendered inside native apps on iOS/Android/Windows/Mac.

Even though Blazor is powering UI/UX across web and native apps, there may be differences to how things work across platforms. While Blazor components/styles can render the same UI across web, desktop and mobile, the UX should not be the same. In fact, developers will want to have the flexibility to do different things with Blazor across various platforms. Generic interfaces with platform-specific implementations can allow developers to have consistent shared code that happens to work differently across web and mobile/desktop platforms.

A struggling developer wrote up an article on sharing code between .NET MAUI and Blazor—yet having varying implementations of Blazor code across web and native platforms.

.NET MAUI Release

.NET MAUI for .NET 7 was a milestone release, bringing runtime maturity to the .NET MAUI framework and stable tooling across Windows/macOS. Change is the only thing that's permanent, so the .NET MAUI engineering work moves onwards for what's next.

David Ortinau pointed out a new release—.NET MAUI 7.0.52 Service Release 1.1 is now out.

What's new in the latest .NET MAUI service release? The .NET MAUI release bits are compatible with Visual Studio 17.4.3 on macOS and Windows, adding to improved platform stability. Looks like updating to the latest in Apple/iOS/macOS ecosystem is big on the agenda—there is now support for Xcode 14.1 for iOS, iPadOS and Mac Catalyst version 16.1. Other platforms are not be left behind, either—there is freshly added support for Android API 33 and Windows App SDK 1.2.221109.1.

A type converter change has also greatly improved the number of XAML Hot Reload successes—things look to be settled for Mac Catalyst. There is new API documentation and lots of fixed issues—onwards and upwards.

Pointer Gestures in .NET MAUI

.NET MAUI is the next generation of .NET cross-platform strategy across mobile and desktop—this means touch and mouse have equal footing. Most tablet/desktop app users would interact with .NET MAUI apps with mouse/keyboard and .NET MAUI tries to help developers out with the new Pointer Gesture Recognizers.

Leomaris Reyes is here to educate fellow developers and wrote up a nice article about all things Pointer Gesture Recognizer in .NET MAUI.

The new Pointer recognizers in .NET MAUI allow developers to track user actions to add interactions, make decisions, change Visual States and update overall UX. Given an assigned part of the visual tree, Pointer Gesture Recognizer allows for detection of pointer movements—for Entry, Movement and Exit corresponding to the bounding area. The PointerGestureRecognizer class does all the heavy lifting and exposes corresponding Events/Commands.

Leomaris drives the point home with easy-to-follow code examples, and points out that Pointer gesture recognition, as expected, is supported only on iPadOS, Mac Catalyst and Windows.

Audio Streaming in .NET MAUI

Since the early previews of .NET MAUI, developers have wondered how to play media files such as video or MP3 and how to stream from an endpoint. With integrated media playback, things get tricky quickly across platforms—there are specific settings for iOS/Android and background streaming takes additional work. Thankfully, Gerald Versluis and team are putting in solid work for the MediaElement in the .NET MAUI Community Toolkit and Christian Jacob wrote up a nice article as a part of the .NET MAUI Advent Calendar—Background audio streaming with CommunityToolkit.Maui.MediaElement.

Christian starts out breaking down the complexities of the game, with details about ExoPlayer for Android and AVPlayer for iOS. The MediaElement is very promising, but in Preview as an active Pull Request on the .NET MAUI Community Toolkit GitHub repository.

Chrstian walks through how .NET MAUI developers can grab the preview MediaElement NuGet package for their projects and use the extension method to register all necessary Handlers. With the initial setup, one can theoretically initialize and start using the MediaElement in .NET MAUI pages for basic use cases. However, Christian quickly points out the additional setup needed for more complex scenarios—security settings required in Android to stream from HTTP endpoints and enabling background streaming on iOS through app lifecycle hooks.

There are lots of complexities and platform-specific nuances to background media playback on iOS/Android/Windows—cheers, Christian, for writing up the details.

That's it for now.

We'll take a two-week break for the holidays, and see you back here January 9 with more awesome content relevant to .NET MAUI. Happy Holidays!

Cheers, developers!