Sands of MAUI: Issue #129

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 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 January 16, 2024:

Welcome to .NET 8

The next big milestone for .NET is here with .NET 8 carrying the LTS badge—the latest .NET 8 release empowers millions of apps across the web, mobile, desktop, gaming, IoT and more. Developers can take advantage of latest framework updates, performance tuning, power of AI, expressive programming languages, mature tooling and rich ecosystems—it’s a good time to be a .NET developer. To celebrate all things modern .NET and increased developer productivity, folks at Progress Telerik recently hosted a webinar—Welcome to .NET 8.

The webinar goal was to unpack most of the cool enhancements in .NET 8 across various technology stacks, and share developer perspective. Ed Charbeneau took the stage with an aging developer to share excitement around all things .NET 8. Discussions started with rich ecosystem, matured tooling, AI help with GitHub Copilot, easy Cloud apps, slimmer containerization and more.

It was then time to dive into all the hot new bits in .NET 8—what’s new in web, mobile, desktop and cross-platform development. With major updates around Blazor, .NET MAUI, Blazor Hybrid and AI, there is plenty to keep .NET developers busy. Telerik UI suites add a sprinkling of polished UI and developer productivity on top of modern .NET. Cheers.

Scanning in .NET MAUI

.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. For mobile apps in particular, scanning QR and barcodes is a rather common user requirement and, thankfully, .NET MAUI developers have it easy. One simply needs to know what to use, and James Montemagno produced a helpful video—easy Barcode and QR Code scanning in .NET MAUI.

For anyone looking to implement barcode scanning in .NET MAUI, the Zxing.Net.Maui (pronounced Zebra Crossing) NuGet package from Jonathan Dick is indispensable—this one library lights up barcode scanning and generation functionality needed in most apps.

James begins with an introduction to the Zxing.Net.Maui library, followed by installing the NuGet package and configuring a .NET MAUI app to utilize Zxing.Net.Maui. Both iOS and Android would need user permissions configured before using the camera—once done, setting up a barcode reader control is trivial. James shows off a simple example of how developers can handle barcode detection with embedded Zxing.Net.Maui UI—barcode and QR code scanning in .NET MAUI apps is a done deal.

January XAML Fest

While .NET MAUI provides flexibility for .NET developers wanting to build cross-platform native mobile/desktop apps, the large majority of .NET MAUI developers will likely end up using C#/XAML to define app UI. There is good news for developers wanting to polish up their UI building skills—say hello to January XAML Fest by Leomaris Reyes, a month-long celebration dedicated to all things XAML in .NET MAUI. The goal of the special series is to delve deep into the world of UI design by replicating key portions of UI from renowned apps—this should be inspirational for .NET MAUI developers.

Throughout January, Leomaris plans to roll out a collection of articles—each tackling a different piece of UI, breaking down the XAML code, and providing developers with a clear, concise guide to crafting such UI themselves. It’s more than a learning experience—it’s a festival of code and design, where developers are invited to celebrate, learn and enhance UI skills. Leomaris has big plans for January XAML Fest, showcasing replication of polished UI from Uber, X, LinkedIn and Instragram—plenty of learning and inspiration for .NET MAUI developers.

.NET MAUI Minutes

.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. With increased stability and a rich ecosystem, there are lot more developers building cross-platform apps with .NET MAUI. Developer attention is precious though, and knowledge is often best gained in bite-sized pieces. Maddy Montaquila has started a new series of short videos for developers called .NET MAUI Minutes and the second one is up—customizing borders and corners in .NET MAUI.

Modern mobile/desktop apps should sport delightful UX and that often starts with pixel-perfect UI. Visual adornments on UI elements is often done using borders and corners—.NET MAUI provides a lot of flexibility for developers to customize any UI component.

Maddy starts off explaining the nuances of how to work with corners on buttons with easy-to-follow examples, before showing off more customizations with the border control. With XAML Hot Reload, XAML Live Preview and Live Visual Tree, developers have all the ammunition needed to get their XAML visual tree markup exactly right—borders and corners can help make beautiful UI.

.NET MAUI Flyout

With .NET MAUI, developers can power native mobile and desktop apps from a single shared codebase. However, while the same code works on touch or mouse-keyboard form factors, the UX should not be the same. In fact, developers are encouraged to cater to specific mobile or desktop experiences based on device/platform, and app navigation is the perfect place to differentiate with smooth UX. The AppShell with Flyout is a common navigation paradigm and Daniel Hindrikes produced a video—creating Shell Flyouts in compact mode with .NET MAUI.

As a part of the .NET MAUI default templates, AppShell usage and Flyout-based content organization/navigation have become popular amongst developers. The Flyouts within the AppShell have the default behavior of expand/collapse, but it may be desirable to alter the UX for larger desktop/tablet form factors. It would be nice if the Flyout menu stays open in compact mode all through for desktop, and goes back to expand/collapse mode for mobile.

Daniel starts with the basics of using AppShell with Flyouts—customizations begin with Flyout width, footer content and animations. With Visual State Manager changes and gesture recognizers, Daniel showcases how the humble AppShell Flyout can be rendered in always-open compact mode—ready to be expanded at user’s discretion. Delightful UX that caters specific experiences for each platform—it’s easy with .NET MAUI.

That’s it for now.

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

Cheers, developers!