Sands of MAUI: Issue #111

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 (.NET MAUI)—the evolution of modern .NET cross-platform developer experience. Going forward, developers will be empowered with .NET MAUI technology stack and tooling to build native cross-platform apps for mobile/desktop from single shared codebase. 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 towards developer knowledge 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 July 24, 2023:

Animations in .NET MAUI

User attention is precious for any app user experience, particularly on mobile devices. Animations are a valuable addition to enhance app design—they draw user attention and help create a more pleasant/intuitive UX. If building modern cross-platform apps with .NET MAUI, developers thankfully have a lot of help—basics of animations are built-in and can be added to any shared UI.

Animations hold a lot of promise for .NET MAUI developers, if well understood and Leomaris Reyes wrote up the perfect article—Exploring Basic Animations in .NET MAUI.

Leomaris begins with the basics—.NET MAUI provides a set of basic animations that gradually change a visual element's property value over a period of time, allowing users to perceive UI animation. The ViewExtensions class provides a set of extension methods to apply animations to any visual element and Leomaris walks through some popular implementations—FadeTo, TranslateTo, ScaleTo and RotateTo.

With easy walk-throughs of each type of animation and parameters to customize the animation, Leomaris makes animations accessible to all developers—a wonderful way to up the UX game and draw user attention in modern mobile/desktop apps.

Going Native with Blazor

The promise of Blazor Hybrid is big—bring Blazor web goodness to native mobile/desktop apps. Thanks to modern WebView components, developers can reuse Blazor components/styles/routing inside native apps—for .NET MAUI, WinForms and WPF.

However, developers may be curious to see if Blazor can pull off native functionality inside mobile/desktop apps? Thanks to a shared .NET runtime, Blazor code can easily tap into all of .NET MAUI platform APIs and an aging developer wrote up an article as a part of MAUI UI July—going native with Blazor.

The .NET MAUI with Blazor project template is a great way to get started with Blazor Hybrid—the scaffolded project is a native .NET MAUI app that includes Blazor UI components hosted inside a BlazorWebView. Blazor isn’t running on a web server or using WebAssembly—it is on the metal running on the same .NET runtime like the rest of the .NET MAUI app. All of the .NET MAUI platform APIs that provide access to device functionality are readily available from Blazor code—C# shines for web and native apps.

It is fun to see Blazor-driven UI pull off some very native features—like geolocation, media, file and device sensor access. Blazor Hybrid invites web developers to native land—web UI components and styles are now welcome on mobile/desktop form factors, with full access to .NET MAUI platform APIs. Developers have more ways of mix and matching web with native UI, and enable more code sharing. Cheers to that.

Modernization with Blazor Hybrid

While Blazor is on the agenda, why not go all in? Blazor Hybrid welcomes web developers to build native mobile/desktop apps with .NET MAUI. Blazor Hybrid also has a huge potential to aid in app migration and codebase modernization—modern web goodness is welcome on traditional desktop technology stacks, like WPF, WinForms or WinUI.

The all-in-web developer in Ed Charbeneau found himself in company of an all-in-native developer on Microsoft Redmond campus and the duo utilized the opportunity to do a livestream from Microsoft DevRel Studios—modernization with Blazor Hybrid.

The livestream got kickstarted by special guest Daniel Roth from the ASP.NET/Blazor team. Ed and Dan talked about all things new in Blazor—there are lot of exciting framework/tooling enhancements coming with .NET 8. The conversation then switched to Blazor Hybrid and unpacking the promise of welcoming web development stack to native apps.

Multiple demos showcased the ease of maintaining one solution with Blazor serving up UI for web and native apps—components, routes and styles can all be shared. Hopefully, Blazor Hybrid opens the funnel for more developers to feel welcome building new .NET MAUI apps or modernizing existing desktop apps with shared UI.

Credit Card View with .NET MAUI

Based on an idea originally started for Xamarin by Steven Thewissen, MAUI UI July is a month-long community-driven event, where anyone gets to share enthusiasm and passion for .NET MAUI. Run by Matt Goldman, MAUI UI July this year has seem some fabulous contributions—good UI is always inspiring.

Modern credit cards offer global standards for financial transactions and representing credit cards has also become ubiquitous in most modern apps. Sebastian Jensen recently posted his contribution for MAUI UI July—creating a credit card view in .NET MAUI.

Sebastian starts out grabbing Font Awesome fonts—the popular font library includes icons that can be used for the different types of credit cards. Next begins the process of building up a .NET MAUI view from scratch to display credit cards—some of the steps include registering fonts, adding custom styles for colors and using regular expressions for credit card numbers. Sebastian writes up the core pieces of the credit card view with built-in UI controls and wires up all the styles with icons—positioning accuracy matters. And voila—out comes a modern app view showing a list of credit cards perfectly, accurate down to the last detail. As Sebastian showcases with credit card view, building solid cross-platform UI in .NET MAUI is totally possible—needs inspiration and perseverance.

.NET MAUI CollectionView Layouts

MAUI UI July is continuing to produce wonderful pieces of content for .NET MAUI developers—signs of a passionate developer community. Spearheaded by Matt Goldman, MAUI UI July is seeing articles/videos from fellow .NET MAUI developers all month long and UI is the center of it. Almir Vuk is up next with a practical piece of content—understanding CollectionView Layouts in .NET MAUI.

Turns out, most modern mobile/desktop apps often need to show a collection of things—no wonder the CollectionView UI component is so popular. CollectionView is basically flexible and performant UI control for presenting lists of data using various layout specifications, often the go-to component for .NET MAUI developers.

Almir dives into the various layouts supported by the CollectionView, starting with the single column or row list—these can be vertical or horizontal. The CollectionView shines bright in multi-column or multi-row grid layouts, which can be vertical or horizontal as well. The CollectionView and ListView controls may seem similar, but Almir points out some key differences in API and performance. What follows is a detailed look at the CollectionView bound to the same data collection, but displaying the list in various layout configurations—a real handy comparison of the various modes, as suited for individual apps. Kudos Almir and thanks for the detailed walkthrough.

That's it for now.

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

Cheers, developers!