Sands of MAUI: Issue #149

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 1, 2024:

VS Code Extension

.NET MAUI is the evolution of modern .NET cross-platform development stack, allowing developers to reach mobile and desktop form factors from a single shared codebase. With increased stability and a rich ecosystem, there are lots more developers building cross-platform apps with .NET MAUI—many seeking consistent building experiences from Windows/macOS/Linux developer machines. The answer is Visual Studio Code, and the .NET MAUI developer experience in VS Code is constantly getting better. There is big news and Maddy Montaquila wrote up the announcement—the .NET MAUI Extension for Visual Studio Code is now generally available.

Visual Studio Code is the uber-popular lightweight code editor that works seamlessly across Windows/macOS/Linux. While Visual Studio continues to be the rich IDE for .NET MAUI development on Windows, VS Code represents the engineering consolidation of developer tooling across platforms. The lightweight editor brings a rich Extensions ecosystem and provides consistency of developer experiences. The .NET MAUI Extension is built on top of C# Dev Kit and the C# extension, which bring in a Solution Explorer, C# Hot Reload, powerful C# IntelliSense and much more.

The .NET MAUI extension adds the ability to target mobile and desktop devices with full debugging capabilities, and the potential of AI-powered development workflows with GitHub Copilot. The latest releases of the .NET MAUI Extension for VS Code also brings in two huge features—XAML IntelliSense and XAML Hot Reload, both aimed at developer productivity. The .NET MAUI Extension keeps the VS Code developer experience simple, streamlined and consistent across platforms—time to leverage stable tooling to write some wonderful apps.

MediaElement Updates

.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.

One key part of the .NET MAUI Community Toolkit is the MediaElement—an UI component meant to streamline developer effort in playing media content. There are some big updates in the latest version 4.0 release of the .NET MAUI Community Toolkit MediaElement, and Gerald Versluis produced a video—background media playback, metadata and lock screen controls with MediaElement.

Gerald starts off with the basics of .NET MAUI Community Toolkit MediaElement—it is brought in easily with a separate NuGet package and an initializer, with the goal to simplify developer tasks when playing media across .NET MAUI–supported platforms. There are lots of nuances to modern media playback, and things get tricky for developers across platform differences. The latest release of the .NET MAUI Community Toolkit MediaElement allows for adding metadata—album/artist information along with artwork enables richer experiences across mobile/desktop devices.

Gerald talks about adding lock screen controls with .NET MAUI Community Toolkit MediaElement—this takes a little configuration across platforms, but means much better UX for the user. And finally, the latest edition of the .NET MAUI Community Toolkit MediaElement now allows developers the ability to enable background media playback—.NET MAUI apps can keep playing media content with full control while the app is not in the foreground. Gerald showcases all the functionality with easy to follow sample code and demonstrates the user experience across platforms—the .NET MAUI Community Toolkit MediaElement makes life so much easier for developers wanting modern full fidelity media playback in .NET MAUI apps.

Uniform Layouts

.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. While the single shared codebase is a big benefit, .NET MAUI developers often have to grapple with platform differences when it comes to having consistent layouts of UI components in the visual tree. There is some help for developers, and Leomaris Reyes wrote up an article—getting started with UniformItemsLayout in .NET MAUI Community Toolkit.

The .NET MAUI Community Toolkit is an open-source library serving as a companion to .NET MAUI development, offering developers a rich set of controls, converters and helpers designed to accelerate app development. With a focus on community-driven innovation and developer productivity, the .NET MAUI Community Toolkit has become an indispensable tool for developers looking to enhance .NET MAUI app development.

Leomaris starts with how developers can get started with the .NET MAUI Community Toolkit, before diving into the UniformItemsLayout—a UI container meant to keep sizing consistent for all components across rows/columns. The UniformItemsLayout allows developers to specify the maximum number of rows and columns in which the UI elements can be arranged. Leomaris demonstrates how consistent rendering looks with the UI container. Developers can control UI behaviors with MaxColumn/MaxRow properties, but skipping them leads to automatic division of content within the layout.

The .NET MAUI Community Toolkit is always here to augment .NET MAUI developer experiences, and Leomaris showcases how to achieve consistent UI layouts across platforms—developer productivity for the win.

Upgrade Assistant Updates

Modern .NET is powerful, open-source, cross-platform and welcoming to all with mature tooling accompanied by rich ecosystems. However, the sheer long history of .NET means enterprise apps run on a variety of .NET runtimes, from .NET Framework all the way to .NET 8/9. The .NET Upgrade Assistant is a Visual Studio extension and a command-line tool that tries to help—the goal is to upgrade apps from previous versions of .NET/.NET Framework to the latest runtime versions of .NET. There is some welcome news for developers looking to upgrade to latest .NET, and Marco Goertz wrote up the announcement—third-party API and package map support in .NET Upgrade Assistant.

One of the challenges of upgrading an older app to the latest version of .NET is finding the equivalent APIs and NuGet packages from third-party libraries. This is especially challenging when developers upgrade to a new platform, such as from UWP to WinUI or Xamarin.Forms to .NET MAUI. The .NET Upgrade Assistant wants to help more.

The .NET Upgrade Assistant includes a comprehensive set of known mappings for Microsoft-owned libraries, and now includes third-party API and package maps. This feature allows anyone to specify maps for their own libraries that contain information about the old and new APIs/packages. The new mapping aids in the upgrade process being able to automatically replace packages for newer .NET runtimes, as well as swap out APIs from third-party library dependencies.

Marco also points out additional help for developers doing the Xamarin.Forms to .NET MAUI upgrade—the .NET Upgrade Assistant extension includes a C# analyzer and code fixer for manual upgrades. The analyzer looks for Xamarin.Forms namespaces that need to updated in .NET MAUI and the lightbulb code fix applies code changes based on the built-in mappings as well as the new third party API mappings. This is great news for anyone still looking to upgrade from Xamarin.Forms to .NET MAUI.

Hybrid Development in .NET 9

.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 are some big things cooking to welcome more web content in native apps, and Beth Massi chimed in from Microsoft Build—what’s coming in .NET 9 for hybrid app development.

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. Beth teased a new proposed Blazor Hybrid with Web solution template. The goal would be to have a shared Razor-less library, so developers can share Blazor UI/styles across native and web apps.

But why stop at Blazor when JavaScript web developers can also be welcomed to .NET MAUI land? With the experimental HybridWebView for .NET MAUI, developers have a more flexible WebView to host web content inside .NET MAUI apps. This could be for SPA apps written with Angular/React/Vue and more. The real benefit with HybridWebView is easy communication between the code running inside the WebView with the WebView host—.NET and JS can freely talk to each other. Developers now have a lot of flexibility to mix and match native UI with web UI for seamless code sharing—the Hybrid story and developer experience is poised to get better with .NET 9.

That’s it for now.

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

Cheers, developers!