Sands of MAUI: Issue #154

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 August 5, 2024:

VS Code Setup

.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. 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. James Montemagno produced a video that might help—the complete setup guide for .NET MAUI development in VS Code.

VS Code is the uber-popular lightweight code editor that works seamlessly across Windows/macOS/Linux—it brings a rich Extensions ecosystem and provides consistency of developer experiences. James begins with the basics of installing .NET/.NET MAUI workloads and then setting up VS Code with the .NET MAUI Extension. 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. James brings in XCode and Android dependencies, and showcases the complete .NET MAUI development/debugging experience in VS Code toward building cross-platform apps—developer productivity for the win.

Chasing Curiosity

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, this was a great opportunity for .NET MAUI developers to learn from each other—MAUI UI July happened throughout July 2024. The next article comes from David Ortinau with an inspiring writeup on his 50th birthday—chasing curiosity.

For anyone writing software, David has wonderful advice—embrace curiosity and the perpetual learning that it fuels. It is often curiosity that makes us want to push the envelope of what's possible—like using the Microsoft.Maui.Graphics to create UI and ribbons for .NET MAUI apps.

David dives into IWindowOverlay in Microsoft.Maui.Graphics—the mystical graphics canvas used for painting and managing Windows overlays. David starts out adding circles to UI with IWindowOverlayElement, before diving into making colorful ribbons overlayed on top of .NET MAUI apps. Thanks for the inspirations, David, and cheers to new adventures for your next 50.

UI Markup

.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 MAUI UI July perfectly celebrates developer excitement around .NET MAUI—there was fresh content ready to be bookmarked every day of July. The next MAUI UI July article comes from Brandon Minnick with a wonderfully practical writeup—upgrading from Xamarin.CommunityToolkit.Markup to CommunityToolkit.Maui.Markup.

While XAML has had a long checkered history as a UI markup language, many modern .NET MAUI developers might prefer a different option—building UI visual trees entirely in C#. The CommunityToolkit.Maui.Markup package helps developers with all of the plumbing needed to build .NET MAUI UIs in C#, and Brandon wrote up how to get started with CommunityToolkit.Maui.Markup.

Being a part of the .NET MAUI Community Toolkit, developers can easily get going with a NuGet package dependency and take inspiration from Brandon recreating the default templated UI in C# instead of XAML. Brandon also points out key differences in .NET MAUI vs Xamarin Markup packages—developers will do well understanding how to use Typed Bindings and Relative Bindings.

Screen Size Management

.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. While it is wonderful that a single codebase can power apps across various platforms, the sheer variety of screen sizes in devices can pose challenges for developers. Developers may have to cater to app needs where UI elements need to be proportional to each other across varying screen sizes—potential solutions need to take into account status/navigation bars and app resizing. Ed Schimmel wrote up an excellent article that might help—managing screen sizes in .NET MAUI apps.

Ed was developing a Smart Letter Board .NET MAUI app where UI elements needed to be big and proportional across screen sizes. Device dimensions are not enough—different mobile/desktop platforms use varying sizes for status, navigation and tab bars. Ed chose to use the OnSizeAllocated() method of .NET MAUI ContentPages—width/height reported represent the drawable area of the page and this is honored across page resizing.

Developers, however, should not be wiring up performance-intensive actions in OnSizeAllocated event handlers—this gets invoked continuously during resizing. To size UI elements proportionally based on the screen size, Ed starts with default style pixels and uses multipliers to scale UI up/down. With Factory and Observable patterns, Ed showcases how screen size management can be done efficiently and elegantly for .NET MAUI apps—thanks for the pointers.

Infuse AI

It is the age of artificial intelligence. AI is slowly changing the way we live and work, and AI’s popularity is driving adoption in enterprise and consumer apps. AI presents a huge opportunity for .NET developers to infuse apps with solutions powered by Generative AI and Large Language Models (LLMs). Bruno Capuano wrote up a wonderful post that makes it easier for developers to tap into AI smartness—adding AI easily to .NET apps with Prompty.

Prompty is a powerful new tool for developers looking to infuse AI into .NET apps—a Visual Studio Code Extension designed to facilitate the integration of LLMs like GPT-4o. Developed by Microsoft, Prompty provides an intuitive interface to interact with LLMs directly from development environments, making it easy for developers to add AI features to projects.

After walking through a typical developer workflow of installation/configuration of Prompty, Bruno dives into an actual use case—a sample WebAPI app bringing in AI smartness. With easy setup and automatic code generation with Semantic Kernel/Langchain, Prompty aims to ease developer pain in integrating AI services—quite a handy tool for all .NET and .NET MAUI developers.

That's it for now.

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

Cheers, developers!