Sands of MAUI: Issue #108

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 June 20, 2023:

.NET MAUI Release

The next milestone in the evolution of modern .NET is coming up soon—a lot of work is being put into .NET 8, scheduled for November 2023. A new preview release for .NET 8 is now out, aka Preview 5, along with tooling update of Visual Studio 17.7 Preview 2 on Windows. For cross-platform developers, .NET MAUI is riding the .NET 8 waves wonderfully and David Ortinau wrote up the post for the latest release—.NET MAUI for .NET 8 Preview 5 is now out.

The latest .NET MAUI for .NET 8 Preview 5 release focuses on quality improvements, with lots of bug fixes and performance enhancements for modern cross-platform app development. There are some key enhancements, like improved scrolling behavior of the iOS keyboard, performance improvements in data binding and layouts and a plethora of bug fixes. David talks about how developers can update to the latest .NET MAUI bits for .NET 8 Preview 5—included .NET MAUI workloads with Visual Studio 17.7 Preview 2 make it super easy on Windows, while developers on macOS just have to get the updated workloads manually.

For existing .NET MAUI projects, upgrading to the latest 8.0.0-preview.5.8529 bits is not difficult either—developers will need to first grab .NET 8 Preview 5 SDK and then update .NET MAUI NuGet package dependencies in the project. Onwards and upwards towards the .NET MAUI journey for .NET 8—cheers.

WPF to Blazor Hybrid

Windows Presentation Foundation (WPF) has long been the cornerstone of Windows desktop development—with a solid framework and rich tooling ecosystem, WPF has enabled .NET developers to deliver complex but delightful desktop experiences. However, the C#/XAML codebase of a WPF app may be aging—developers have some choices to be modernize a WPF app to reach platforms outside of just Windows.

With .NET MAUI Blazor Hybrid, developers have a way to bring in web goodness to desktop apps and Rossitza Fakalieva wrote up a wonderful article—porting a WPF App to .NET MAUI Blazor Hybrid.

Rossi starts out with the two major options for modernizing WPF apps—while native .NET MAUI may be enticing for C#/XAML .NET developers, Blazor Hybrid can bring in Blazor web UI inside desktop apps. With Blazor Hybrid, developers can have truly unified UI shared between web/native apps with full platform API access—any unique Blazor web components are now welcome on WPF/.NET MAUI apps.

Rossi details out the steps of how to bring in Blazor goodness inside desktop apps—particularly relevant when developers are trying to bring in Telerik Blazor UI web components inside WPF/.NET MAUI apps with included dependencies. Modernizing a WPF app to .NET MAUI/Blazor Hybrid isn't for the faint-hearted, but Rossi astutely points out ways developers can reuse as much as code as possible, while tweaking where needed to reap the benefits of a modern .NET cross-platform codebase.

Remove Borders

As a modern cross-platform .NET developer, sometimes it is the little things that keep you awake—the desire to tweak something small in UI or annoying platform differences. Entries and Pickers are very popular UI components used in most mobile/desktop apps, but they can be little tricky to customize—both iOS and Android render them per platform design guidelines. What if the app/requirements call for removing the borders for Entry/Pickers and styling them with custom colors?

Thankfully, .NET MAUI provides the necessary hooks for developers to customize UI components on a per-platform basis and Victor Hugo Garcia wrote up a nice article—remove Entry and Picker borders in .NET MAUI.

One of the benefits of .NET MAUI is the updated UI rendering architecture—Handlers provide generic interfaces as to how each platform renders UI components. There are specific mappings when Handlers turn around to render platform native UI from abstracted code—perfect opportunities for developers to customize any needed UI changes.

Victor shows off how to write custom Handlers for Entry/Picker components—with platform specific compiler conditionals, developers can easily step down to native code and customize the UI rendering to exact specifics. With the custom Handlers registered, developers can remove borders and render transparent background colors—the perfect setup to style any needed UI components to heart's desire.

Obscure Sensitive Screens

User privacy is important to most modern mobile apps and developers may have a need to obscure specific screens that present sensitive information. Be it someone looking over the shoulder when using phone apps or sneaky hands picking up a tablet lying around, obscuring screens is a good tactic to protect sensitive content. Thankfully for cross-platform .NET MAUI developers, a new Plugin makes this easy and Gerald Versluis produced a video—obscure sensitive screens in .NET MAUI apps.

Gerald starts out explaining the need for obscuring screens, before introducing Plugin.Maui.ScreenSecurity—the Plugin that does the needful for .NET MAUI developers. It's easy for developers to get started with the Plugin by grabbing the NuGet package and doing the usual setup for registering Plugins—Dependency Injection works as well.

Gerald starts out adding security to the default screen in the .NET MAUI template and shows off how obscuring screen functionality works—with slick demos on Android and iOS. From task switcher to multi-app views, desired app screens in .NET MAUI apps can be blanked out or blurred against screenshots or peeking eyes—user privacy for the win.

CSS Styling

Cascading Style Sheets (CSS) is the most common way to style visual UI elements for web apps—it’s always been popular among developers and is a powerful way to organize/compose styling in a reusable way. However, could CSS play a role in styling native mobile/desktop apps made with .NET MAUI? CSS can totally work with C#/XAML-based UI elements, and Leomaris Reyes had written up the definitive guide earlier in the year—styling apps with CSS in .NET MAUI.

While it may feel unnatural for XAML purists, styling .NET MAUI UI with CSS makes a fair bit of sense—developers building web and native mobile/desktop apps can share CSS styles across platforms towards a consistent design system.

Leomaris starts out with a walk-through of how developers can add CSS files to .NET MAUI projects, mark them with a specific build action and reference/load the stylesheet in C#/XAML code. What follows is a comprehensive explanation of CSS features for the uninitiated—selector elements, property references, limitations and the nuances of parent-child visual element hierarchy.

Much of the power of CSS is now usable in native mobile/desktop apps, with some very specific .NET MAUI properties and an easy way to share styles across web/native platforms. With Blazor Hybrid, developers can also style regular Blazor UI components with CSS—they just happen to render inside native mobile/desktop apps.

That's it for now.

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

Cheers, developers!