Sands of MAUI: Issue #126

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.

.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 towards 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 December 4, 2023:

Context Menus 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. While targeting mobile platforms of iOS/Android is obvious given the evolution from Xamarin, .NET MAUI takes the bold step of adding desktop support—developers can build native apps for Windows and macOS.

However, desktop users demand unique experiences with mouse/keyboard and Gerald Versluis produced a video on a common desktop paradigm—adding context menus with .NET MAUI.

A context menu, often known as a right-click menu, offers contextual commands that are specific to the control being clicked on. In .NET MAUI, a context menu can be added to any control that derives from Element—this covers almost any type of UI.

Gerald starts off explaining the basics of context menus, including a bit of iOS/Android support, before diving into practical implementations of context menus. Why only stop at context menus, when it is equally easy to render separators and submenus? A rich right-click user experience is easy to create for .NET MAUI developers.

Visual States in .NET MAUI

As users interact with apps, the changes in UI states can be written up entirely in code or through visual tree markup—the latter is usually much more succinct. In .NET MAUI, Visual State Manager provides a structured way to make visual changes to the user interface and XAML can include markup describing how the Visual State Manager affects the UI visuals. Thankfully, all this works consistently across platforms and Daniel Hindrikes produced a video—visual states in .NET MAUI.

The Visual State Manager introduces the concept of visual states—a .NET MAUI UI can have several different visual appearances depending on its underlying state. Daniel begins with how the .NET MAUI Visual State Manager allows definition of visual state groups named CommonStates—some common visual states include Normal, Disabled, Focused, Selected and PointerOver. It may be prudent to share the same visual states across multiple UI views—shared visual states can be also be defined in a Style.

With easy-to-follow sample code, Daniel showcases the power of shared Visual State Manager in .NET MAUI and goes on to demonstrate the usage of custom visual states. Visual State Manager allows the definitions of fluent change of UI visual appearances driven by user interactions—everything is defined right within the visual tree markup and happens to work seamlessly across platforms.

GitHub CoPilot

It is the age of Artificial Intelligence (AI) and turns out, developers can benefit big time. Say hello to GitHub CoPilot—the AI coding assistant meant to elevate developer workflows. DevReach 2023 recently wrapped up in beautiful Sofia, Bulgaria—the premier developer conference in eastern Europe and Todd Anglin took the stage for a wonderful session, tips and tricks to get the most out of GitHub CoPilot.

Todd begins with the basics of GitHub CoPilot—the AI-powered pair programmer to developer workflows. As the name suggests, developers are still the pilots while GitHub CoPilot is meant to lend a supporting hand—it helps to understand how AI tooling works and learns within coding contexts.

Todd explained how Large Language Models (LLMs) power GitHub CoPilot and what the limitations are—GitHub CoPilot is only meant to suggest, not be the code compiler. While GitHub CoPilot learns from the vastness of open sourced codebases, context matters, and developers always have choices with suggestions—to accept, reject or iterate.

With easy-to-follow demos, Todd showcases the power and benefits of GitHub CoPilot—for writing code, tests, documentation and help with pull requests. AI has the potential to transform developer workflows—developers can embrace and reap huge benefits from GitHub CoPilot with solid understanding of the underlying technologies.

Blazor Hybrid Local Data

.NET MAUI is squarely meant for developers to build native mobile/desktop apps—however, armed with modern smart WebViews, .NET MAUI is more than capable to welcome web content to native land. In fact, Blazor/JavaScript developers should feel empowered to bring web UI components, routing, styling and more to native cross-platform .NET MAUI apps, while gaining complete native platform API access. It's also December, and time for Advent calendars for developers—say hello to .NET MAUI Advent Calendar 2023, an initiative led by Héctor Pérez, Alex Rostan, Pablo Piovano, and Luis Beltrán.

To start off strong, Luis Beltrán wrote up an article—storing local data in a .NET MAUI Blazor Hybrid app using IndexedDB.

The most commonly used option for storing structured data locally in a .NET MAUI app is SQLite database. However, because it is possible to create a .NET MAUI Blazor Hybrid app, a new option opens up—IndexedDB, a database that is built inside browsers.

Luis starts with the basics of creating a Blazor Hybrid apps and taps into using the experimental MauiHybridWebView—this enables easy communication between the code running inside the WebView with the WebView host, so .NET and JS can freely talk to each other. Luis walks through wiring up a dbscript.js file within a Blazor Hybrid app—this would include code to work with the IndexedDB database within the context of the WebView component. Once set up, developers can initialize the database, and read/write records—all doable from the .NET MAUI app with easy .NET-JS communications.

Luis showcases the use of IndexDB with easy to follow code and even manages the database with browser developer tools—the possibilities are big to reuse web code with native .NET MAUI apps.

Blazor Render Modes

Blazor is the free, open-source and much beloved web framework for building modern web apps. Developers wanting to stay away from JavaScript can leverage the power of .NET, C# and modern tooling to build interactive beautiful web apps. The Blazor component model, rendering engine and styling mechanisms offer flexibility, and there is a rich ecosystem for developers to be productive. Modern web apps should honor light/dark modes to cater to user preferences and Jefferson S. Motta wrote up an article—how to toggle between light and dark modes in Blazor.

Dark mode has grown in popularity across various digital platforms—beyond aesthetics, dark mode has eye and health benefits for most. For folks using Telerik UI for Blazor in modern web apps, supporting light and dark modes should not be difficult—Jefferson has the perfect writeup to follow along.

Powered by Kendo UI light/dark themes, it takes just a little code to listen to browser/system preferences and switch up the applied styles accordingly. If folks are building mobile/desktop apps with Blazor Hybrid, the same techniques can be used to listen to .NET MAUI system preference changes and switch up Blazor styling accordingly. Developers get to honor system/user preferences with switchable Blazor Hybrid render modes and reusable styles—flexibility for the win.

That's it for now.

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

Cheers, developers!