Sands of MAUI: Issue #66

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 August 1, 2022:

Catering to Desktop and Mobile

.NET MAUI is the modern .NET cross-platform development framework, allowing developers extensive platform reach from a single codebase. What started as an evolution of Xamarin.Forms with a mobile-first mindset now includes desktop support as a first-class citizen.

While .NET MAUI effortlessly reaches mobile and desktop, the reality of varying form factors demands thinking through app design for optimum user experience (UX). Screen real estate varies widely between mobile and desktop form factors, and good .NET MAUI apps should honor the differences—and cater to distinctive desktop and mobile UX.

Thankfully, catering to different form factors from a single codebase but with slightly different UX is not difficult. Simple checks on which platform a given .NET MAUI app is running on makes it easy for developers to serve up different experiences. App content and navigation patterns can be adjusted on the fly as well—MenuBar and Flyouts work well for desktop, while Tabs can provide better UX on mobile. Essentially, .NET MAUI apps and developers will do well honoring form factor differences and catering appropriate UX for mobile/desktop.

Multi-Windows in .NET MAUI

.NET MAUI apps run seamlessly on iOS, Android, Windows and MacOS and developers get to share code from a single codebase. One framework feature that caters to desktop form factors is multi-window support—it is a common UX to expect multiple app windows when running on desktop. However, larger mobile form factors like tablets or folding dual screen devices can benefit from apps spawning up multiple windows of content as well.

Leomaris Reyes wrote up an article on the .NET MAUI multi-window support and how developers can leverage the framework feature to deliver more from their apps.

While Android/Windows do not need any additional setup, iOS/MacOS require explicit info.plist declarations and a scene delegate before supporting app multi-window features. Beyond that, and as Leomaris points out, developers can tap into the Application.Current object—which refers to the current instance of the app running. There is a magical OpenWindows() method which expects a Window object with a specified view, and voila, developers can spin up new app windows.

There are options to manage and close existing app windows as well—overall, multi-window is a much-required .NET MAUI feature that serves mostly desktop, but some mobile form factors as well.

Auth0 with .NET MAUI

As developers start building more sophisticated cross-platform .NET MAUI apps, a much-needed app functionality would be user identity management—to authenticate and authorize users to app features. The Auth0 identity platform can help—developers get to centralize/manage users from multiple identity providers and provide a branded seamless signup and login experiences.

Andrea Chiarelli wrote up an article on how to add authentication to .NET MAUI apps with Auth0—a wonderful step-by-step guide.

Developers first need to register their app on the Auth0 dashboard—this is to make Auth0 aware of the .NET MAUI app. Next would be adding the OpenID Connect Client NuGet package to the .NET MAUI app and writing the code that integrates the app with Auth0. An Auth0 client needs to created that manages communications with Auth0—yes, there are web browsers involved and the app needs to configured right, but all done with straightforward steps. There are some platform-specific changes to be made for the .NET MAUI app—this is to instruct the app on how to handle the callback URI that Auth0 will redirect the user to after their authentication.

After all the settings are in place, developers can wire up Login/Logout UI—and allow Auth0 to do the authentication/authorization heavy lifting. This is a must-read article for anyone looking to add user identity management to .NET MAUI apps—thanks, Andrea, for the writeup.

Discord UI with .NET MAUI

The MAUI UI July series hosted by Matt Goldman has provided plenty of UI inspiration to developers—it has been heartwarming to see the community step up and recreate amazing UIs that showcase the power of .NET MAUI. Mid-July was the turn for Tylah Kapa and the chosen UI to recreate was the popular Discord app—Tylah also wrote up the experience along with a GitHub repository for easy access to the code.

Discord is a popular app and the Discord generic chat interface is the perfect UI to recreate as a challenge. Tylah breaks down the complex chat interface into UI sections to create the header, chat message interface and the user input section as footer. Tylah uses the Shell with some built-in colors and styling, but the use of FontImageSource to display glyphs using the MaterialIcons font family is awesome.

With the use of Grids, StackLayouts, Frames, ScrollViews and some fake data, the chat interface comes to life, complete with circular images and icons to match Discord's UI. For someone relatively new to .NET MAUI, it is interesting to see a rich chat UI being put together—cheers to Tylah and the flexibility of .NET MAUI.

.NET MAUI Graphics Inspiration

It is hard to look away from the MAUI UI July series—there is just so much inspiration for .NET MAUI developers. Late July saw Shaun Lawrence take his turn—and the goal was to build a clone for the popular drawing game Draw Something.

While throughout the month, average humans recreated some amazing UIs with .NET MAUI, trust Shaun to step it up and actually build a clone with full app functionality.

Shaun started out breaking down the Draw Something interface into sections, with a corresponding Page and ViewModel holding everything together. The most involved part was creating the drawing surface—Shaun uses the built-in .NET MAUI GraphicsView, which allows rendering 2D graphics onto a drawable canvas. With a pure C# implementation, Shaun is able to slowly build up the drawing functionality—the ability to select color, line thickness, track user interaction and render the drawing content on canvas.

While the .NET MAUI Community Toolkit offers a DrawingView control that provides much of this functionality built-in, Shaun's motivation was to showcase the power of .NET MAUI Graphics—and leave the rest of us awestruck and inspired.

That's it for now.

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

Cheers, developers!