Forem: David Ortinau

5 years of work in 2 weeks

David Ortinau — Sun, 15 Feb 2026 02:03:00 +0000

These past two weeks have been some of the most exciting days I’ve had as a developer. I need to commemorate them.

The shift I'm seeing is simple but profound: when Copilot can run the app, see the UI/DOM, and read logs and screenshots without me babysitting it, iteration speed stops being linear. It feels like years of work compressing into days.

Here’s the haul so far:

MAUI Sherpa
MauiDevFlow
PolyPilot
.NET MAUI Terminal
.NET MAUI Linux
.NET MAUI macOS and tvOS
.NET MAUI Bootstrap Themes
.NET MAUI Skills

The common thread here is simple: once Copilot can run the app, inspect UI/DOM, and read logs/screenshots without me babysitting it, iteration speed goes nonlinear. Below is the proof and it's B-A-N-A-N-A-S!

MAUI Sherpa

MAUI Sherpa is a Blazor Hybrid app that puts a face to a set of CLI tools for managing your Android and iOS developer environment. That includes SDKs, Devices, Simulators, Emulators, keystores, certificates, provisioning profiles, and so much more.

Managing your environment, installing the right things, knowing what is even installed, and then handling all the certs and provisioning can be among the most frustrating aspect of cross-platform development. This app makes it much easier for you.

Redth / MAUI.Sherpa

Let MAUI Sherpa guide you through all your .NET MAUI dev environment needs!

MAUI Sherpa

Your guide to .NET MAUI development

MAUI Sherpa is a desktop application for macOS, Windows, and Linux that helps manage your .NET MAUI development environment. It provides a unified interface for Android SDK management, Apple Developer tools, environment diagnostics, DevFlow app inspection, and GitHub Copilot integration.

🌐 Visit the website →

✨ Features

🩺 MAUI Doctor

Check your development environment health
Diagnose .NET SDK, workloads, and dependencies
AI-powered fix suggestions via Copilot
One-click environment repairs

📦 Android SDK Management

Browse and install SDK packages
Manage platform tools, build tools, and system images
Search and filter packages
Track installed vs available packages

📱 Android Emulators

Create, edit, and delete emulators
Start and stop emulators
Create snapshots for quick boot
View emulator details and configuration

🔑 Android Keystores

Create and manage Android signing keystores
View certificate signatures and details
Export PEPK keys for Google Play
Cloud sync keystores…

View on GitHub

Jon Dick built this app in just a few hours, and the key thing he did here that blew my mind involved his new tool MauiDevFlow which essentially gave eyes and hands to Copilot so it could work uninterrupted to build and validate the app. In very short order this app was built, beautiful, and shipped.

MauiDevFlow

This CLI tool builds upon the Apple and Android tools Jon built over the years for Xamarin and .NET MAUI (and Avalonia and Uno). Onto it he added all the things we have been bolting onto our Copilot experiences to help Copilot do more for .NET MAUI projects without needing our intervention.

Redth / MauiDevFlow

Agentic Dev Loop Assists for .NET MAUI apps

MauiDevFlow

Unified tooling for automating and debugging .NET MAUI apps — both native MAUI and Blazor Hybrid Built to enable AI agents (and humans) to build, deploy, inspect, and debug MAUI apps entirely from the terminal.

What This Is (and Isn't)

MauiDevFlow is designed for agentic development workflows — giving AI coding agents full autonomy over the MAUI dev loop: build, deploy, inspect, interact, diagnose, fix, and repeat.

It is not a UI testing framework, and it is not meant to ship in your app. The agent and debug bridge are intended for #if DEBUG only. Think of it as giving your AI pair-programmer eyes and hands inside the running app so it can close the feedback loop on its own — verify its changes work, see what went wrong when they don't, and iterate without waiting for a human to manually check the simulator.

Features

Native MAUI Automation —…

View on GitHub

Features include:

App automation - it can see the UI tree, tap, type, interact, swipe, scroll, and all the things plus screenshot
BlazorWebView debugging - doesn't just stop at the native elements, but goes deep in the DOM and JS
Unified logging - quit asking me what the error is and to paste it into the session! Copilot can read for itself.
Port broker to work with multiple apps simultaneously
CLI tool for calling commands to automate all the things
Driver Library for platform specific orchestration
Skills! to superpower Copilot (and Claude)

The skill will install a NuGet in your project, wire up the host builder to create hooks needed, and you're all set. Kick back and watch Copilot got fully autonomous at your command.

PolyPilot

PolyPilot assists you in orchestrating as many Copilot sessions as your tokens and terminals will allow from a beautiful dashboard, but that's just the start.

Shane Neuville at the time of this writing ranks among the heaviest users of Copilot in all of Microsoft, and his creation PolyPilot is a big reason why.

This week the MAUI team has gone wild evolving PolyPilot and crushing work at the same time. It has been one of the most invigorating team experiences I've ever had!

The secret sauce is that PolyPilot helps you work on PolyPilot while you use PolyPilot. See something you want to improve or change? Do it. PolyPilot will do the work, rebuild, and reload the app in flight. It has all the observability we just talked about with MauiDevFlow and so much more.

You've got 5 sessions running on different tasks and want to step away? No sweat. PolyPilot is on your phone too, participating over a devtunnel (and recently added direct connection on your LAN).

Tell PolyPilot what you need from the couch, the dinner table, the...um, gym.

And the same self improvement loop works here too. PolyPilot can build and deploy the mobile app and refresh you on the fly. It's completely intoxicating the feeling of productivity and power I get.

PureWeen / PolyPilot

PolyPilot

Your AI Fleet Commander — Run an army of GitHub Copilot agents from a single app.

Multi-agent orchestration • Real-time streaming • Cross-platform • Remote access from your phone

What is PolyPilot?

PolyPilot is a multi-agent control plane for GitHub Copilot. It's a cross-platform native app (macOS, Windows, Android, iOS) built with .NET MAUI and Blazor that lets you spin up, orchestrate, and monitor dozens of parallel Copilot coding agents — each with its own model, working directory, and conversation — all from one dashboard.

Think of it as mission control for AI-powered development: you launch agents, assign them tasks across different repos, watch them work in real time, and manage everything from a single pane of glass — or from your phone while you're away from your desk.

Why PolyPilot?

The Copilot CLI is powerful, but it's one agent in one terminal. What if you could:

View on GitHub

.NET MAUI Terminal

MAUI.TUI is a terminal UI backend for .NET MAUI. Of minimal value in practical use, this experiment demonstrates how well (and quickly) Copilot can build a fresh backend for .NET MAUI.

If you're unfamiliar with this use of "backend", .NET MAUI backend is the rendering/input implementation for a platform: UIKit for iOS, WinUI for Windows, etc.

Redth / Maui.TUI

TUI (Terminal UI) Backend for .NET MAUI

Maui.TUI

A terminal UI backend for .NET MAUI. Write your app with the familiar MAUI API — ContentPage, Button, Label, Grid, etc. — and render it in your terminal.

Built on XenoAtom.Terminal.UI for high-performance terminal rendering.

MAUI-TUI-Demo.mov

Features

Full MAUI handler pipeline — uses the standard ViewHandler<TVirtualView, TPlatformView> architecture, no fork required
25+ control handlers — Label, Button, Entry, Editor, CheckBox, Switch, Slider, ProgressBar, Picker, DatePicker, TimePicker, Stepper, RadioButton, CollectionView, ActivityIndicator, ScrollView, Border, Frame, and more
Layout support — VerticalStackLayout, HorizontalStackLayout, Grid, AbsoluteLayout, FlexLayout via MAUI's cross-platform layout engine
Navigation — NavigationPage (push/pop), TabbedPage, FlyoutPage, modal pages
Alerts & dialogs — DisplayAlert, DisplayActionSheet, DisplayPromptAsync rendered as TUI modal dialogs
SVG rendering — render your UI to SVG for testing and documentation (--svg)
Visual tree dump — inspect the rendered control tree for debugging (--dump)

Requirements

.NET 10 SDK (preview)
…

View on GitHub

.NET MAUI Linux

With Maui.TUI showing the way, Jon set his sights on Linux. In short order he produced a very functional Linux backend with GTK4.

You can try it today! Instructions are on the repository below.

Redth / Maui.Gtk

GTK based backend for .NET MAUI

Platform.Maui.Linux.Gtk4

A community-driven .NET MAUI backend for Linux, powered by GTK4. Run your .NET MAUI applications natively on Linux desktops with GTK4 rendering via GirCore bindings.

Status: Early / experimental — contributions and feedback are welcome!

MAUI-Linux-GTK-Backend-Demo-Feb25.mov

Screenshots

Home & Sidebar Navigation	Interactive Controls
CollectionView (Virtualized)	FontAwesome Icons
Shapes & Graphics	Layouts
ControlTemplate & ContentPresenter	Pickers & Search
FormattedText & Spans	Transforms & Effects
GraphicsView (Cairo)

Features

Controls (43 handlers)

Category	Controls
Basic Controls	Label, Button, Entry, Editor, CheckBox, Switch, Slider, Stepper, ProgressBar, ActivityIndicator, Image, ImageButton, BoxView, RadioButton
Input & Selection	Picker, DatePicker, TimePicker, SearchBar
Collections	CollectionView (virtualized `Gtk.ListView`), ListView, TableView, CarouselView, SwipeView, RefreshView, IndicatorView
Layouts	StackLayout, Grid, FlexLayout, AbsoluteLayout, ScrollView, ContentView, Border, Frame
Pages & Navigation	ContentPage, NavigationPage, TabbedPage, FlyoutPage, Shell (flyout, tabs, route navigation)
Shapes	Rectangle, Ellipse, Line, Path, Polygon, Polyline — Cairo-rendered with fill, stroke, dash patterns
Other	GraphicsView (Cairo), WebView (WebKitGTK), MenuBar (`Gtk.PopoverMenuBar`

…

View on GitHub

.NET MAUI macOS and tvOS

Not to be left out, Allan Ritchie took the challenge from Jon to do the same for adding a macOS backend with AppKit to .NET MAUI. Today .NET MAUI's official backend for macOS is Mac Catalyst, which looks great and works well for most use cases, but occasionally you may want a more pure desktop SDK.

Allan and Jon discuss and demo their projects in this week's GoneDotNet podcast which you should absolutely watch.

shinyorg / mauiplatforms

.NET MAUI for AppleTV & MacOS

.NET MAUI Backends for Apple TV & macOS (AppKit)

Custom .NET MAUI backends targeting platforms not officially supported by MAUI — Apple TV (tvOS via UIKit) and macOS (native AppKit, not Mac Catalyst).

Both backends use the platform-agnostic MAUI NuGet packages (net10.0 fallback assemblies) and provide custom handler implementations that bridge MAUI's layout/rendering system to the native platform UI frameworks.

Inspiration: The Xamarin.Forms project previously had a macOS AppKit backend (Xamarin.Forms.Platform.MacOS). While this project uses MAUI's handler architecture rather than the legacy renderer approach, some of that codebase is useful as a reference for mapping AppKit native controls.

MAUI-macOS-Demo.mov

Quick Start — Setting Up a macOS MAUI App

1. Create the project

<Project Sdk="Microsoft.NET.Sdk"&gt
  <PropertyGroup>
    <TargetFramework>net10.0-macos</TargetFramework>
    <OutputType>Exe</OutputType>
    <UseMaui>true</UseMaui>
    <SingleProject>true</SingleProject>
    <SupportedOSPlatformVersion>14.0</SupportedOSPlatformVersion

…

View on GitHub

.NET MAUI Bootstrap Themes

This library will let you drop any Bootstrap css into your .NET MAUI resources and wire it in as your app theme over native controls.

This is a bit of a 2-for-1 story. Inspired by the productivity Jon and Shane were having with Blazor Hybrid in Sherpa and PolyPilot, I chose to try porting my language learning app Sentence Studio from native controls to Blazor Hybrid.

Native controls

With the combination of the maui-ai-debugging skill that uses MauiDevFlow in Copilot CLI (yes, I did yolo it), this conversion only took a few minutes to get to a usable stable, and then some polish and improvements over the course of a few days. When you give Copilot eyes and hands to be able to validate its own work and keep the forward progress going, it's next level stuff.

Blazor Hybrid with Bootstrap

Everything just looks so polished with minimal effort. And I can swap to any theme in an instant. Making the UI look and feel more natural on mobile was also not hard at all.

Then I thought, "wouldn't it be cool to have the same styling for .NET MAUI native controls and layouts?" This isn't crazy to pursue, it's just that .NET lacks the same deep commitment to a singular way of theme and styling as web does with Bootstrap.

In London last week Matt Goldman showed his library Flagstone-UI which provides a couple of controls that support Bootstrap styling tokens. This is the common way I've seen this done: .NET MAUI controls don't support all the styling properties that Bootstrap expects and so you need to create a custom control. Why? Because amending and extending handlers across all the platforms can be time consuming and complex.

But what was hard in the past is just a few minutes of Copilot time now. The thing that was hours of research and days of trial and error is now just minutes of Copilot time. Nothing is beyond your reach.

So here is the first iteration of .NET MAUI Bootstrap Theme support over native controls with no custom controls used.

davidortinau / MauiBootstrapTheme

Bootstrap CSS theming for stock .NET MAUI controls

MauiBootstrapTheme

Use any Bootstrap or Bootswatch CSS theme in your .NET MAUI app — no custom controls required.

Drop a Bootstrap CSS file into your project, call .UseBootstrapTheme(), and at build time the CSS is parsed into a native ResourceDictionary with styles for stock MAUI controls.

How It Works

Build time — The MauiBootstrapTheme.Build MSBuild task reads your Bootstrap CSS files and generates C# ResourceDictionary source files (.g.cs) via XAML Source Gen.
Runtime — The generated dictionaries are merged into Application.Resources, providing StyleClass-based styles for all stock MAUI controls.
No wrappers — Your Button, Entry, Label, Border, etc. remain standard MAUI controls. Styling is applied through StyleClass and DynamicResource.

Quick Start

1. Install

dotnet add package Plugin.Maui.BootstrapTheme

2. Add a Bootstrap CSS file

Place any Bootstrap or Bootswatch CSS file in your project's Resources/Themes/ folder (e.g., Resources/Themes/bootstrap.min.css). Mark it…

View on GitHub

.NET MAUI Skills

Ever since skills reached Copilot the results I'm getting are substantially better. These are what I wanted Copilot instruction prompts to be so many months ago. Load up useful skills and if Copilot is being diligent it will use them when the right words are spoken. In addition to detailed information, code snippets, and prompt instructions, a skill can include executable code like shell scripts, python scripts, etc.

My first attempt at a skill was maui-speech-to-text which does exactly what it says. I tested it on several apps including my Barista Notes app where I instructed Copilot to enable any user to speak to the app and do anything the app can do.

This worked so well, so consistently I wondered what more I should put into a skill.

Where is the best knowledge about .NET MAUI on the internet? Microsoft Learn, of course. So I pointed Copilot at Learn with a skill to create skills and the result is davidortinau/maui-skills, a set of 34 skills and growing to help you with .NET MAUI development tasks like adding local and push notifications, Aspire, authentication, and more.

davidortinau / maui-skills

.NET MAUI skills for GitHub Copilot and Claude Code

.NET MAUI Skills

A collection of 37 skills for .NET MAUI development and Xamarin migration, designed for use with GitHub Copilot CLI and Claude Code. Each skill provides focused, expert-level guidance on a specific area of .NET MAUI app development or migration from Xamarin.

Skills are loaded on-demand when your prompt matches the skill's topic, injecting detailed guidance, code examples, and platform-specific notes into the AI's context.

Available Skills

Skill	Description
maui-accessibility	Guide for making .NET MAUI apps accessible — screen reader support via SemanticProperties, heading levels, AutomationProperties visibility control, programmatic focus and announcements, and platform-specific gotchas for TalkBack, VoiceOver, and Narrator.
maui-animations	.NET MAUI view animations, custom animations, easing functions, rotation, scale, translation, and fade effects.
maui-app-icons-splash	.NET MAUI app icon configuration, splash screen setup, SVG to PNG conversion at build time, composed/adaptive icons, and platform-specific icon and splash screen requirements for Android, iOS, Mac Catalyst, and Windows.
maui-app-lifecycle

…

View on GitHub

How to replicate this

Here's what I would recommend everyone do:

Install MAUI Sherpa and run doctor on your environment
Use MauiDevFlow with Copilot to close the loop
Install maui-skills to sharpen Copilot's solutions
Multiply this by adding PolyPilot

My current rules are to keep the tasks simple and understood, make sure to keep the loop closed empowering Copilot to solve issues on its own, and be explicit about exit criteria.

Celebration

We didn’t get here overnight—and this week reminded me it’s never just one person. It’s the tools, the skills, the feedback loops, and a team willing to push them until they click.

Yes, it’s tokens and models and prompts. But the real unlock is removing the constant “pause and explain” tax. Once the loop closes (build, run, observe, tweak) progress compounds fast.

If you haven’t felt the “five years in two weeks” thing yet, I get it. I’ve watched other people describe it and wondered what I was missing. For me, the difference was going further, for longer, with better instrumentation. And when it lands… it’s honestly hard to go back.

My Top 5 UI Moments of 2025 (So Far)

David Ortinau — Wed, 30 Jul 2025 15:36:27 +0000

We are now at the end of the month, and I've had the benefit of reading everyone's MAUI UI July 2025 posts. They have been fantastic!

As the product owner for .NET MAUI I get go talk to so many of you and peek behind the scenes at the amazing cross-platform experiences you're building with .NET MAUI. You are the real pros. You work in the trenches between demanding users and often more demanding stakeholders. I applaud you! Please continue sharing your wisdom with our amazing .NET community.

In this blog I'm NOT going to rehash Telepathy, the AI infused task app that I showcased at Build 2025 and blogged about. Here are the links and if you explore the code there are quite a few fun little UI design things in there like animation, SkiaSharp animation, gradient text, and gradient borders.

Now here are my top 5 UI moments from 2025 (so far).

One: Do I Need WYSIWYG?

Every quarter we send out a survey asking for feedback about developers' experiences building .NET MAUI apps. This July we saw steady annual improvement in our customer satisfaction score (+13%) and our net promoter score (+43%). It turns out, you like the quality focus we've been giving the product for the last several releases.

One of the things that regularly shows up as a dislike is the lack of a drag and drop visual designer. We don't have one and we don't have plans to do one. What then is the best way to achieve your design goals without a WYSIWYG surface?

Let me feature 2 options I've found to be very useful.

GitHub Copilot Vision

Recently I was spinning up a series of UI examples to validate some .NET 10 safe area work the team had started, and I didn't have much time to build them. A part of our culture these days is to immediately ask "how could I do this with AI". I started prompting.

Create a new ContentPage called AirBnBPage.xaml and create a page to imitates the design of the detail view from the AirBnB app with a hero image that extends to the top of the screen. It should scroll and have sample content like the real app.

Use the new APIs for SafeArea described here https://github.com/dotnet/maui/issues/28986 and here https://github.com/dotnet/maui/pull/30337

Update the MainPage to be a navigation to sub pages like this new one. We will add more pages in the future

It did an okay job originally, but I suddenly had a foggy recollection of a feature I knew we were working on whereby I could provide GitHub Copilot an image and it could render that UI in XAML. I wasn't sure it had shipped, so I just gave it a go. I took a couple screenshots of the AirBnB app on my phone to capture different states of the UI, air dropped them to my Macbook, and dragged them into the chat box.

Update the AirBnB page to reflect this design. The 3 images are all the same page in different states of scrolling vertically.

The results were excellent! I now needed to just provide some more clarity on behavior.

the buttons for back, share, and like should not scroll with the content. They should remain in the same position always.

All-in this probably took me 15 minutes, mostly patiently watching Copilot do the work.

btw - if you're interested in how to use the new SafeAreaEdges API in .NET 10, here's the gist. This new API works on all platforms, not just iOS. And instead of being an attached property, it's now a property on specific containers.

Layout.SafeAreaEdges
ContentView.SafeAreaEdges
ContentPage.SafeAreaEdges
Border.SafeAreaEdges
ScrollView.SafeAreaEdges

When setting SafeAreaEdges you'll set flags for Left, Top, Right, and Bottom.

public enum SafeAreaRegions
{
    None = 0,          // Edge-to-edge content (no safe area padding)
    SoftInput = 1,     // Always pad for keyboard/soft input
    Container = 2,     // Flow under keyboard, stay out of bars/notch  
    Default = 4,       // Platform default behavior
    All = int.MaxValue // Obey all safe area insets
}

Here's an example of how I did this for the Spotify page. All I really care about is making sure some of the content starts and flows to the top edge. By default the rest will obey the safe area edges. As you can see, setting the value doesn't propagate down the visual tree.

<ContentPage>
  <Grid SafeAreaEdges="None">
    <ScrollView x:Name="MainScrollView" SafeAreaEdges="None">
      <VerticalStackLayout Spacing="0">
        <Grid x:Name="HeroSection">
          <Image Source="hero.png" />
          <!-- more code -->
        </Grid>
      </VerticalStackLayout>
    </ScrollView>

    <Grid x:Name="TopNavigation" SafeAreaEdges="All">
      <!-- more code -->
    </Grid>

Did you know about the Vision capability of GitHub Copilot? If you didn't catch the announcement of this feature, read about it here. This is not only for design. Use it for anything you want to SHOW to Copilot.

You can also read more about it here and watch it in action here.

Figma to Code with MCP

Figma has several integration options, and this year is of course the year of the MCP (Model Context Protocol). At Build 2025 we included a brief demo of using an MCP to bring a Figma design into VS and render the design. For years now Figma has been my primary design tool, so this is very appealing to me.

Check out GLips/Figma-Context-MCP for details on how to setup and use this MCP in your preferred editor.

Two: I Relearned How to Draw

The main app that I keep iterating on is Sentence Studio, a playground for language learning. As you can see from the screenshots, it has a minimal design aesthetic. Last year I had it running on my e-ink Boox tablet, and any heavier design would have been a waste. I digress.

When I see some activity that could support my studies, I bring that idea into the app. Why not just use the various apps out there? I found that it was unproductive to constantly be switching between different vocabulary contexts and leveling (what is beginner vs intermediate). With my app I control the vocab and grammar skills, and pair them with different activities.

Shadowing is a technique where you repeat a phrase just exactly as you hear it. The goal is to mimic the intonation and pacing while also practicing fundamental pronunciation. I thought to myself, wouldn't it be great to clip some audio and be able to play it back with some visual cues to practice against?

Solving good audio

Ideally, I would love to have native speaker recordings to play back. I tried quickly to use the YouTube API and grab one of the audio streams by providing the URL and timecodes I wanted to grab, however that didn't come together quickly. I had already been using the OpenAI text to speech feature, so I just implemented that. The results for Korean (my target language), were laughable. Seriously, Rachel just lol'd at me when I sent it to her.

Then I found ElevenLabs, a company using AI to model native speaker voices. You can actually even use it to record and model your own voice (or model Gerald and have his voice narrate all your videos). The library of voice profiles was much better for my purposes, so I grabbed a selection of Korean models and implemented that instead.

For the visualization I wanted to produce a waveform of the audio. I had done something similar pre-Microsoft for a startup that was watermarking audio and video to prove provenance. So, somewhere in my brain I had the understanding of working with an audio byte stream, and somewhere on a NAS I have the code. But this story isn't about how to write the code, it's about how to get the result.

Despite having AI at my fingertips, the initial results were not great. In fact, it had the peaks inverted. I had what looked like a waveform, but it just didn't match what I expected. I compared the drawing it created with the actual wave in Adobe Audition, and that's when I realized it was inside out.

Through this exercise I (re)learned:

coding is a collaborative exercise with Copilot
use Copilot to refresh your understanding of fundamentals, (i.e. audio encoding/decoding, file formats)
point Copilot to documentation resources and constantly add them to the copilot-instructions.md

This drawing uses .NET MAUI GraphicsView and Microsoft.Maui.Graphics for drawing. MauiReactor made it really easy to work with interactions on the GraphicsView

var graphicsView = new MauiReactor.GraphicsView(graphicsViewRef => _graphicsViewRef = graphicsViewRef)
    .Drawable(_drawable)
    .HeightRequest(_height)
    .HStart()
    .VCenter()
    .OnStartInteraction(OnWaveformStartInteraction)
    .OnEndInteraction(OnWaveformEndInteraction)
    .OnDragInteraction(OnWaveformDragInteraction);

If you want to explore this deeper, head to davidortinau/SentenceStuedio and click the Copilot button at the top of the page. Ask something like:

Explain to me the drawing implementation on ShadowingPage and how it renders the waveform

Three: Why So Slow

One of the activities I added this month to Sentence Studio is a reading view. The idea is that I can take a transcript from any content I'm studying, generate natural audio for it, and then read along as it highlights sentence by sentence. In addition, I can see vocabulary highlighted and tap those words to get translations. Other words are also tappable and will retrieve translations from OpenAI.

So I prompted this feature and the initial implementation was very close to exactly the experience I wanted. There was one exception. The UI was absurdly slow! The sentence highlighting lagged behind the audio and any touch interaction started a cascade of freezes. (I wish I could find a video to show you.)

I tried release mode and it was certainly much better. Still, it wasn't acceptable. Why? There were actually several problems that I needed to work through before I got to the big win, and unfortunately, I couldn't YOLO a fix with Copilot this time.

the generated code was guessing at the timing
the generated audio wasn't including the transcript timecode metadata despite me providing the documentation ahead of time (I didn't explicitly tell the model which API to use)
the highlighting code was looping over loops over loops
the text was all Label and Span rendering thousands of UI elements

So, once I set it straight on the API to use, and directed it to STOP guessing (work smarter not harder) the results were much improved, but I still needed to solve the thousands of UI elements.

If you've read any of the other articles this month, you've likely seen SkiaSharp mentioned already. While drawing and text aren't usually a combination I consider, I figured it was worth a shot. I asked Copilot first for an analysis of what the improvement might be along with a plan.

Alright! Why not, let's do it. My prompt was something like.

Do it!

My first run was VERY fast, but the reading experience was lacking something (can you guess what it was from the image?). This led me to figuring out how to best surface fonts to the SkiaSharp context since it's not the same as a MauiFont which is loaded into memory.

using var fontStream = await FileSystem.OpenAppPackageFileAsync("fonts/bm_yeonsung.ttf");
typeface = SKTypeface.FromStream(fontStream);

In order however to make sure the build process doesn't exclude a file as duplicate, I needed to call out the font I wanted here with a unique logical name. I received good pointers from this issue discussion, as well as by nagging Matthew Leibowitz directly.

<!-- Custom Fonts -->
<MauiFont Include="Resources\Fonts\*" />

<!-- Korean font also as MauiAsset for SkiaSharp direct access (different logical name) -->
<MauiAsset Include="Resources\Fonts\bm_yeonsung.ttf" LogicalName="fonts/bm_yeonsung.ttf" />

Four: I'm a game developer (once again)

If you've followed me for any duration, it's not long before I drop my favorite F-bomb. That's right. Flash. From around 1998 until shortly after the letter I wrote a lot of ActionScript and it was often some kind of game. Those were good times!

Back in April an ad kept popping up in my Instagram feed for a kids game device called GiiKER Super Decode. It just looked really cool! If you have little kids you want to keep occupied maybe without a screen, then go snag one.

It inspired me to see if I could prompt my way to a decent little game. I took a bit of Wordle, some arcade cabinet button designs, and learned how Mastermind was actually played (I _never _understood that game as a kid). I think davidortinau/CodeBreakerGame turned out pretty darn good!

The thing I really loved about my experience making this game was just how easy it was to try different things! If I were coding it all myself by hand like a cave man, I would have thought twice about experimenting with whacky ideas. Now though, all I had to do was type a few directives and walk about for a few minutes while Copilot churned it out.

The ROI on this kind of iteration is amazing! I can have an idea, try it out for a few minutes and see how it feels. Oh, the game is too easy? Too hard? Too fast? The buttons are too small? What if the buttons to disable when not in play? On and on I can poke at ideas and in only an afternoon I have an app.

Five: Colors

Whenever I start a new app I copy over a theme file (ResourceDictionary) from another app. I have a variety of semantic styles I like to use, and what really needs to change is just a few colors.

When I was working on Telepathy, I wanted to set it apart visually from the default sample content template we ship with .NET MAUI (You know about that right? dotnet new maui -n AwesomeToDo -sc). As you can see below, I went through quite a few color theme variations.

What I wanted to experiment with was creating an app that would generate an entire color palette and theme that I could copy/paste into a project.

I saw that Ado blogged about Reactor Theme earlier this month, so I'll look at incorporating that too.

I spent quite a bit of time with ChatGPT back in April going over the best approaches to creating such a theme that worked independently from Material Design, Fluent Design, etc. What I decided on was entering 2 colors, a primary and secondary. From those, the app would generate everything I needed for a light and dark mode by using sensible defaults for the light and dark background colors which I could override if I so desired.

The app will output a ResourceDictionary or C# theme file in a variety of formats:

AppThemeColor
AppThemeBinding
DynamicResource
MauiReactor

AppThemeColor from the .NET MAUI Community Toolkit is one of my favorites because I only need to create one color with 2 variations.

<toolkit:AppThemeColor x:Key="Primary"
        Light="#0078D4"
        Dark="#219EFE" />

It's applied using a markup extension like this.

<Setter Property="BackgroundColor" Value="{toolkit:AppThemeResource Primary}" />

AppThemeBinding is the default way to do theme aware colors in .NET MAUI.

<Setter Property="Stroke" Value="{AppThemeBinding Light={StaticResource Gray200}, Dark={StaticResource Gray500}}" />

DynamicResource is an often overlooked option. It's suitable for supporting more than light and dark themes. Perhaps you have dozens of themes the user can choose from. Then you'd use DynamicResource so the user can apply them at runtime. I would typically keep colors in separate RDs, and then load the one I want to use. As the color Primary changes, the dynamic resources pick those changes up.

 <Setter Property="Background" Value="{DynamicResource Primary}" />

In fact, this is the approach that this app takes. In my case I'm generating the

public void ApplyThemeColors(string primary, string secondary,
                            string lightBackground, string darkBackground)
{
    // Check if the app is in dark mode
    var isDark = Application.Current?.RequestedTheme == AppTheme.Dark;

    // Generate the theme using the new overload that handles both light and dark backgrounds
    // and automatically generates appropriate dark variants of primary and secondary colors
    var theme = ColorThemeGenerator.Generate(
        primary: Color.FromArgb(primary),
        secondary: Color.FromArgb(secondary),
        lightBackground: Color.FromArgb(lightBackground),
        darkBackground: Color.FromArgb(darkBackground),
        isDarkTheme: isDark);

    // Apply the theme
    Application.Current?.Resources.ApplyTheme(theme, isDark);
}

public static void ApplyTheme(this ResourceDictionary resources, ColorTheme theme, bool isDarkMode)
{
        resources[nameof(theme.Primary)] = isDarkMode ? theme.PrimaryDark : theme.Primary;
        resources[nameof(theme.OnPrimary)] = isDarkMode ? theme.OnPrimaryDark : theme.OnPrimary;

        resources[nameof(theme.Secondary)] = isDarkMode ? theme.SecondaryDark : theme.Secondary;
        resources[nameof(theme.OnSecondary)] = isDarkMode ? theme.OnSecondaryDark : theme.OnSecondary;

        resources[nameof(theme.Background)] = isDarkMode ? theme.BackgroundDark : theme.Background;
        resources[nameof(theme.Surface0)] = isDarkMode ? theme.Surface0Dark : theme.Surface0;
        resources[nameof(theme.Surface1)] = isDarkMode ? theme.Surface1Dark : theme.Surface1;
        resources[nameof(theme.Surface2)] = isDarkMode ? theme.Surface2Dark : theme.Surface2;
        resources[nameof(theme.Surface3)] = isDarkMode ? theme.Surface3Dark : theme.Surface3;
        resources[nameof(theme.OnBackground)] = isDarkMode ? theme.OnBackgroundDark : theme.OnBackground;
        resources[nameof(theme.OnSurface)] = isDarkMode ? theme.OnSurfaceDark : theme.OnSurface;

        resources[nameof(theme.Error)] = isDarkMode ? theme.ErrorDark : theme.Error;
        resources[nameof(theme.Success)] = isDarkMode ? theme.SuccessDark : theme.Success;
        resources[nameof(theme.Info)] = isDarkMode ? theme.InfoDark : theme.Info;
}

And finally, my preferred way to write apps, MauiReactor.

IndicatorViewStyles.Default = _ => _
  .IndicatorColor(IsLightTheme ? Gray200 : Gray500)
  .SelectedIndicatorColor(IsLightTheme ? Gray950 : Gray100);

I'd say this app is definitely an Alpha state, so please if you're interested, use it and send some PRs! Or do a really good job on an Issue description and I'll assign it to the GitHub Copilot agent. :)

In Conclusion

I've had a very productive year so far, both in terms of learning and producing. Our space is moving so quickly, and information is so widely available that I'm not sure if I'm ahead or behind! Are you also experiencing this wonderful boom of productivity and creativity? Let me know in the comments!

Boosting GitHub Copilot Accuracy

David Ortinau — Mon, 10 Mar 2025 14:36:28 +0000

A key challenge when using any AI coding assistance is accuracy. If the results are not reliable, that creates additional work reviewing and correcting the output. It's still great to get 80% results, but how can I get closer to 100%?

During the March 7th .NET MAUI Community Standup, I did a demo and walkthrough on using both Copilot repository-level instructions and prompt instructions -- which I'll describe in more detail below.

Copilot Instructions

GitHub Copilot provides a couple of ways to steer it toward better results, starting with copilot-instructions.md. This little file is a place to put your preferences and workspace context so that they're included with every interaction you have with Copilot. Here's what I put in one for my language learning app Sentence Studio:

Please call me Captain and talk like a pirate.

This is a .NET MAUI project that targets mobile and desktop. 

It uses the MauiReactor (Reactor.Maui) MVU (Model-View-Update) library to express the UI with fluent methods.

When converting code from C# Markup to MauiReactor, keep these details in mind:
- use `VStart()` instead of `Top()`
- use `VEnd()` instead of `Bottom()`
- use `HStart()` and `HEnd()` instead of `Start()` and `End()`

As I discover mistakes that Copilot makes, I add more instructions here.

This file resides at the root of my project folder in the .github directory. Read more about Copilot instructions in the GitHub documentation.

Copilot Prompt Instructions

Now this is where things start to get more fun. Building on the idea of repository-level instructions, you can add more specific and detailed context that is included as needed with your prompts.

For example, I noticed that I wasn't getting perfect results when generating async/await code, which resulted in a deadlock in my app. To provide the model with additional context ONLY when I asked it to do work on async/await, I created a prompt instruction file. This yielded better results.

Implementing Prompt Instructions

There isn't a prescribed format for these files, so I compiled several verified resources about async/await and had AI summarize them into a list of Do's and Don'ts.

### ✅ DOs

- **Always Await Your Tasks:**  
  Always use the `await` keyword on async operations to ensure exceptions are captured and to avoid blocking the calling thread.  

- **Use Async Task/Task<T> Methods:**  
  Prefer returning `Task` or `Task<T>` over `async void` so that exceptions can be observed, and your methods are easily composable and testable.  

- **Name Methods with the "Async" Suffix:**  
  Clearly differentiate asynchronous methods (e.g., `GetDataAsync()`) from synchronous ones.  

- **Pass Cancellation Tokens:**  
  Allow cancellation by accepting a `CancellationToken` in your async methods.  

- **Use ConfigureAwait(false) When Appropriate:**  
  In library code or server-side processes, use `ConfigureAwait(false)` to avoid unnecessary context switches and potential deadlocks.  

- **Keep Async Code “Async All the Way”:**  
  Propagate async all the way from the entry point (like event handlers or controller actions) rather than mixing sync and async code.  

- **Report Progress and Handle Exceptions Properly:**  
  Use tools like `IProgress<T>` to report progress and always catch exceptions at the appropriate level when awaiting tasks.  

---

### ❌ DON'Ts

- **Avoid async void Methods:**  
  Except for event handlers, never use `async void` because their exceptions are not observable and they’re difficult to test.  

- **Don’t Block on Async Code:**  
  Avoid using `.Wait()` or `.Result` as these can lead to deadlocks and wrap exceptions in `AggregateException`. If you must block, consider using `GetAwaiter().GetResult()`.  

- **Don’t Mix Blocking and Async Code:**  
  Blocking the calling thread in an otherwise async flow (e.g., by mixing synchronous calls with async ones) may cause deadlocks and performance issues.  

- **Avoid Wrapping Return Task in Try/Catch or Using Blocks:**  
  When a method returns a `Task`, wrapping it in a try/catch or using block may lead to unexpected behavior because the task completes outside those blocks.  

- **Don’t Overuse Fire-and-Forget Patterns:**  
  Unobserved tasks (fire-and-forget) can swallow exceptions and cause race conditions—if needed, use a “safe fire-and-forget” pattern with proper error handling.

Source

I can then, in the Copilot chat window, explicitly add this particular file or, better yet, simply use a keyword I’ve chosen and expect Copilot to include it. To setup keywords, I saw this pattern in another repository and it worked for me as well.

Set up a root prompt file in the workspace (named .github/prompts/prompts.prompt.md), and use the VS Code command "Chat: Use Prompt" to include this file in the chat session.

# Prompt Instructions

Include these prompt instructions if their link's name is used.

- [maui](dotnet/maui/maui.prompt.md)
- [async](dotnet/async.prompt.md)

Now when I mention "async", I expect Copilot to include that file with the additional instructions and context.

To be even more granular I've been experimenting with nesting my keywords. For instance, if I mention "maui" and also "layout" I want to include the file maui-layouts.prompt.md. So for that purpose "maui" loads the maui.prompt.md which in turn lists the file maui-layouts.prompt.md for the keyword "layout".

I haven't found this to be 100% reliable, so some experimentation is warranted. For example, you'll notice in the screenshot above that ALL of my prompt files were not only seen initially, but read as a part of resolving my prompt. A few days ago that wasn't the case, and it does seem to differ depending on the AI model I choose.

Using all the files isn't ideal, especially as my repository grows. I've also tried prefixing my keywords with symbols, but that hasn't yet yielded the specificity I want. Nonetheless things are moving so quickly with GitHub Copilot and Visual Studio that I trust it will continue to improve, and I'm prepared to experiment and adapt along the way. It's a great ride!

Learn more about these prompt files in the GitHub documentation.

Contributions Welcome: Building a knowledge base of instructions

As I continue to uncover areas where AI models can benefit from additional instructions -- bringing the generated code closer to 100% accuracy -- I've begun adding more prompt files to a new repository.

To get started, clone the repository below and add or merge the .github folder into your workspace.

If you think this would be helpful for your workflow, please try it out and consider contributing.

davidortinau / dotnet-prompt-instructions

Prompt Instructions

https://docs.github.com/en/copilot/customizing-copilot/adding-repository-custom-instructions-for-github-copilot#about-prompt-files

This repository contains some instruction files to assist with building .NET applications, starting with common shortcomings I've noticed when reviewing the code generated by various AI models.

Current Instructions

View on GitHub

Chasing Curiosity

David Ortinau — Mon, 29 Jul 2024 15:35:44 +0000

This blog is part of the .NET MAUI UI July 2024 series with a new post every day of the month. See the full schedule for more.

Today marks my 50th birthday. Like many of you who have made a career out of software, I wrote my first line of code before I was a teenager. I recall sitting in a windowless classroom with PCs on long folding tables lined against the walls leaving a no-mans-land in the middle. The only light came from the dim glow of the dark monitors with white text and lines. I performed exercises in BASIC or similar trying to coax the machine into drawing boxes and other shapes to match the instructions of poorly copied lesson sheets. My primary recollection from this quarter-length class was how quickly others completed their tasks and how that left me thinking I must not be any good.

This feeling of futility was later reinforced when my parents gifted me a programming book with which to continue feeding my curiousity. As classic underperforming student when it came to grades at that time, I was generally well above average at most things...well, except coding apparently.

Btw, this is what 50 looks like for me -- hanging out with my granddaughter and playing in my wife's newly (and very pinkly) decorated home office.

Graphics

.NET MAUI introduced a cross-platform drawing abstraction via the gracious contribution of Microsoft.Maui.Graphics from Jon Lipsky. When using this library, the platform-specific graphics engine is used. By comparison SkiaSharp provides its own engine.

When I saw Roman Jasek's contribution to this blog series about creating a ".NET MAUI Environment Ribbon", I became curious: could I achieve the same using Microsoft.Maui.Graphics and the IWindowOverlay in .NET MAUI? What I wanted was a ribbon that told me I was running a Debug build (not Release).

IWindowOverlay is a graphics canvas that caught some attention early in the development of .NET MAUI, but we intentionally don't promote it. This canvas sits above all the Shell and ContentPages of the app at the Window level. Yes, every .NET MAUI app has at least 1 window. The primary use of the IWindowOverlay is for Visual Studio tooling to draw the adorners you see in the Visual Studio XAML Live Preview, and not really for use by everyone. If your app or library uses it, but another library also uses it, and one of you removes all overlays from the window...you can see how this might not go well.

Despite the dangers, I remained curious. The primary benefits of using this approach are that the UI can appear anywhere in the Window and be maintained in a single place.

After some digging, I started asking around about how I could use IWindowOverlay. I didn't get an immediate response, so I just started trying it myself.

Here's some unsolicited advice:

Do your research: you don't want to receive a RTFM, right? Read the docs, the source code, the source code tests, and look for samples and articles.
Ask questions: if you must...
Don't delay trying things yourself: this is the big one IMO. The time it takes you to create/clone a project and try the thing yourself will likely be shorter than waiting for a response to your questions. I always learn something along the way too.

Creating an Overlay

My first step was to simply make an overlay and add a circle to it.

To get the Window I could override the CreateWindow method in the App, or get the Window from a ContentPage.



public partial class App : Application
{
    public App()
    {
        InitializeComponent();

        MainPage = new MainPage();
    }

    protected override Window CreateWindow(IActivationState? activationState)
    {
        var window = base.CreateWindow(activationState);

        // add an overlay
        window.AddOverlay(new WindowOverlay(window));

        return window;
    }
}

To add my circle to the overlay, I need to create an IWindowOverlayElement. Within that class is a Draw method where I could draw my circle. This interface requires I implement that method as well as a Contains method for hit detection (more on that later). Although I spent more than a decade writing drawing code in ActionScript, I leaned on my Copilot to provide the code. :)

"Copilot, draw a 300 purple circle in the middle of the canvas using Microsoft.Maui.Graphics", I pleaded. Immediately I received something like this:



public class CircleElement : IWindowOverlayElement
{
    public bool Contains(Point point)
    {
        return false;
    }

    public void Draw(ICanvas canvas, RectF dirtyRect)
    {
        canvas.FillColor = Colors.Purple;
        canvas.FillCircle(dirtyRect.Width / 2, dirtyRect.Height / 2, 150);
    }
}

Voila! In truth, it didn't all work my first try, and IIRC I hadn't added the window to the overlay, or the overlay to the window...something like that. In the end I prevailed, and even integrated it into my .NET Hot Reload handler where I'd been pursuing other curiosities. I have blogged previously about tapping into the MetaDataUpdateHandler, and you can learn more about the ICommunityToolkitHotReloadHandler I use below in the Learn documentation.



class HotReloadHandler : ICommunityToolkitHotReloadHandler
{
    public async void OnHotReload(IReadOnlyList<Type> types)
    {   
        if (Application.Current?.Windows is null)
        {
            return;
        }

        foreach (var window in Application.Current.Windows)
        {
            if (window.Page is not Page currentPage)
            {
                return; 
            }

            await AlertReloadViaWindowOverlay(window);

            // I do other things here like calling a Build method on a ContentPage
        }
    }

    private async Task AlertReloadViaWindowOverlay(Window window)
    {
        var overlay = window.Overlays.FirstOrDefault();

        if (overlay is null)
        {
            overlay = new WindowOverlay(window);
        }

        await window.Dispatcher.DispatchAsync(() =>
        {
            overlay.AddWindowElement(new HotReloadElement());
            window.AddOverlay(overlay);
        });

        await Task.Delay(5000);

        await window.Dispatcher.DispatchAsync(() =>
        {
            overlay.RemoveWindowElements();
            window.RemoveOverlay(overlay);
        });
    }

    public class HotReloadElement : IWindowOverlayElement
    {
        public bool Contains(Point point) => true;

        public void Draw(ICanvas canvas, RectF dirtyRect)
        {
            canvas.FillColor = Colors.Purple;
            canvas.FillCircle(dirtyRect.Width / 2, dirtyRect.Height / 2, 150);
        }
    }
}

Wrapping with a Ribbon

Once I had confidence I could draw something on the screen, it was time to make that something a ribbon with text. Once again I leaned on my Copilot. While I got a rectangle filled with a color and text above it, it was not at all in the right location. After a few zillion iterations and even doing some math on paper, I got the result I was after.

Why a few zillion iterations? Cuz coordinate systems are tricky between global and local, and then adding in translation of the position and rotation things got Doctor Strange. This took me right back to being in my early 30s making some funky Flash animation at 3am hoping I'd be done before the sun came up (my lifetime record was about 50/50 on that score).



public void Draw(ICanvas canvas, RectF dirtyRect)
{
    Debug.WriteLine("Drawing DebugOverlay");
    Debug.WriteLine($"Width: {dirtyRect.Width}, Height: {dirtyRect.Height}");

    // Define the dimensions of the ribbon
    float ribbonWidth = 130;
    float ribbonHeight = 25;

    // Calculate the position of the ribbon in the lower right corner
    float ribbonX = dirtyRect.Right - (ribbonWidth * 0.25f);
    float ribbonY = dirtyRect.Bottom - (ribbonHeight + (ribbonHeight * 0.05f));

    // Translate the canvas to the start point of the ribbon
    canvas.Translate(ribbonX, ribbonY);

    // Save the current state of the canvas
    canvas.SaveState();

    // Rotate the canvas 45 degrees
    canvas.Rotate(-45);

    // Draw the ribbon background
    canvas.FillColor = _ribbonColor;
    PathF ribbonPath = new PathF();
    ribbonPath.MoveTo(-ribbonWidth / 2, -ribbonHeight / 2);
    ribbonPath.LineTo(ribbonWidth / 2, -ribbonHeight / 2);
    ribbonPath.LineTo(ribbonWidth / 2, ribbonHeight / 2);
    ribbonPath.LineTo(-ribbonWidth / 2, ribbonHeight / 2);
    ribbonPath.Close();
    canvas.FillPath(ribbonPath);

    // Draw the text
    canvas.FontColor = Colors.White;
    canvas.FontSize = 12;
    canvas.Font = new Microsoft.Maui.Graphics.Font("ArialMT", 800, FontStyleType.Normal);
    canvas.DrawString("DEBUG", 
        new RectF(
            (-ribbonWidth / 2), 
            (-ribbonHeight / 2) + 2, 
            ribbonWidth, 
            ribbonHeight), 
        HorizontalAlignment.Center, VerticalAlignment.Center);


    // Restore the canvas state
    canvas.RestoreState();
}

Success or Success?

Around the time I was in 7th grade, my parents' VCR in their bedroom stopped working. Before they could throw it out I convinced them to let me try to fix it. I had zero confidence and even less knowledge of electronics to do the job, but I had curiosity. Opening the case on the floor of their bedroom, I closely inspected the circuit board and various inner workings to get an idea of how this thing worked. I hoped I might spot where things were going wrong. I don't recall what other tools I had with me, but I certainly know I had a screw driver. Why? Because I learned that a screwdriver touching the circuit board of a 1980's VCR that was PLUGGED IN would short and scare the crap out of me as I fell back from the smoking box. Gone was any chance of fixing the beast. A definitive failure, this short adventure still taught me plenty: a success.

Dare I Share?

I was still undecided as I was noodling on this curiosity about what I would blog for my birthday installment of #MauiUIJuly. If I was to include the ribbon example, I thought I should make it a bit more interesting and useful. I came up with a few more requirements:

the developer should be able to choose the background color
a user should be able to tap the ribbon and toggle between DEBUG and the version of .NET MAUI with which the app was built
the developer should be able to consume this as a NuGet and configure this in the MauiProgram

Ribbon background color

Introducing a background color customization was pretty easily accomplished by adding a parameter to the constructor of the DebugRibbonElement. I wanted make this optional though, so I tried setting a default color of purple to it. The compiler complained I shouldn't be allowed to code, or something similar...I don't recall the exact error message, so I turned to my Copilot for an answer. By making the default null and then providing the default within the constructor, I was once more on good terms with the compiler.



public DebugRibbonElement(WindowOverlay overlay, Color ribbonColor = null)
{
    _overlay = overlay;
    _ribbonColor = ribbonColor ?? Colors.MediumPurple;
}

Tap, toggle, profit

In "graphics land" there is no such thing as a gesture recognizer or click events on controls to handle. This is the wild wild west of points and hit testing. Thankfully, I discovered that WindowOverlay provides a Tapped event I could handle.



private void DebugOverlay_Tapped(object? sender, WindowOverlayTappedEventArgs e)
{
    Debug.WriteLine("Tapped");
    if (_debugRibbonElement.Contains(e.Point))
    {
        // do things
    }
    else
    {
        // ignore things
        Debug.WriteLine("Tapped outside of _debugRibbonElement");
    }

}

Now the tricky part was implementing the Contains method on the overlay element. The tricky part was translating the local coordinates to global so I was comparing the same system. Additionally, the rotation of the ribbon canvas threw off the "hit area" I wanted. To solve this I used an old Flash solution where I would make the hit area an invisible rectangle that was more generous than the visible art.

Before drawing on the canvas and translating and rotating, I made a RectF to store the location of the ribbon using the global coordinates.



private RectF _backgroundRect;

public void Draw(ICanvas canvas, RectF dirtyRect)
{
    Debug.WriteLine("Drawing DebugOverlay");

    // Define the dimensions of the ribbon
    float ribbonWidth = 130;
    float ribbonHeight = 25;

    // Calculate the position of the ribbon in the lower right corner
    float ribbonX = dirtyRect.Right - (ribbonWidth * 0.25f);
    float ribbonY = dirtyRect.Bottom - (ribbonHeight + (ribbonHeight * 0.05f));

    _backgroundRect = new RectF((dirtyRect.Right - 100), (dirtyRect.Bottom - 80), 100, 80);
    // canvas.FillColor = Colors.Black;
    // canvas.FillRectangle(_backgroundRect);

    // do the drawing
}

You'll note that I had some different numbers in the rect than you might expect given the width and height of the ribbon. The explanation is that I don't really care to exactly match the size of it, I only care to specify the correct area to hit test. To complete this more easily, I drew the rectangle on the canvas, nudged it around, and then commented it out (see the code above).

To complete the Contains method was then very simple:



public bool Contains(Point point) 
{
    return _backgroundRect.Contains(point);
}

To toggle between "DEBUG" and the .NET MAUI version, such as "8.0.70", I needed to supply the text and use it in the drawing. This isn't like a control where I can use data binding, so I chose to do what often is done in graphics drawing - redraw it. The easiest way to do that is to remove and add a new element.



private string _labelText;

public string LabelText{
    get { return _labelText; }
}

public DebugRibbonElement(WindowOverlay overlay, string labelText = "DEBUG", Color ribbonColor = null)
{
    _overlay = overlay;
    _ribbonColor = ribbonColor ?? Colors.MediumPurple;
    _backgroundRect = new RectF();
    _labelText = labelText;    
}

Back in the overlay, I could complete the tap handler for when I have a hit.



private void DebugOverlay_Tapped(object? sender, WindowOverlayTappedEventArgs e)
{
    if (_debugRibbonElement.Contains(e.Point))
    {
        bool debugMode = _debugRibbonElement.LabelText.Contains("DEBUG");

        Debug.WriteLine($"Tapped on _debugRibbonElement {debugMode}");
        this.RemoveWindowElement(_debugRibbonElement);

        _debugRibbonElement = new DebugRibbonElement(this, 
            labelText: (debugMode) ? _mauiVersion : "DEBUG",
            ribbonColor:_ribbonColor);

        this.AddWindowElement(_debugRibbonElement);
    }
    else
    {
        // The tap is not on the _debugRibbonElement
        Debug.WriteLine("Tapped outside of _debugRibbonElement");
    }
}

Consume and configure

To share this, I packaged it using the plugin template our dear Gerald provides. I nuked all the classes in the project, and just added what I needed, including the builder extension for the developer to configure the ribbon. In the extension I append to the mapping of the WindowHandler. Since this is all cross-platform code here, it works for all platforms.



public static class MauiProgramExtensions
{
    public static MauiAppBuilder UseDebugRibbon(this MauiAppBuilder builder, Color ribbonColor = null)
    {
        builder.ConfigureMauiHandlers(handlers =>
        {
            #if DEBUG
            WindowHandler.Mapper.AppendToMapping("AddDebugOverlay", (handler, view) =>
            {
                Debug.WriteLine("Adding DebugOverlay");
                var overlay = new DebugOverlay(handler.VirtualView, ribbonColor);
                handler.VirtualView.AddOverlay(overlay);
            });
            #endif          
        });       

        return builder;
    }
}



public static MauiApp CreateMauiApp()
{
    var builder = MauiApp.CreateBuilder();
    builder
        .UseMauiApp<App>()
        .UseDebugRibbon(Color.FromArgb("#FF3300"))
        .ConfigureFonts(fonts =>
        {
            fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
            fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
        });

    return builder.Build();
}

davidortinau / Plugin.Maui.DebugOverlay

Plugin.Maui.DebugOverlay

Plugin.Maui.DebugOverlay provides a simple ribbon to indicate the app is running in Debug mode.

Install Plugin

Available on NuGet.

Install with the dotnet CLI: dotnet add package Plugin.Maui.DebugOverlay, or through the NuGet Package Manager in Visual Studio.

Supported Platforms

Platform	Minimum Version Supported
iOS	11+
macOS	10.15+
Android	5.0 (API 21)
Windows	11 and 10 version 1809+

Usage

Enable the plugin in your MauiProgram.cs and provide your preferred color.

.UseDebugRibbon(Colors.Orange)

For exmaple:

public static MauiApp CreateMauiApp()
    {
        var builder = MauiApp.CreateBuilder();
        builder
            .UseMauiApp<App>()
            .UseDebugRibbon(Colors.Orange)
            .ConfigureFonts(fonts =>
            {
                fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
                fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
            });
        builder.Services

…

View on GitHub

Oops and What?!

It took me a few times publishing the NuGet to get a working version, which ended up being that all my code was inside the conditional compile DEBUG, yet the NuGet was shipping a RELEASE build. Hahaha.

I tested with Windows to make sure I hadn't interferred with the XAML Live Preview adorners, and that appears to be fine. But I noticed that resizing the Window on Windows loses the ribbon, and it won't come back. Oops.

On Android, I tested 4 different apps and it did not appear in 2 of them. Why? No idea yet.

On iOS and macOS it works consistently. Yay!

Chase your curiosity

From writing apps for companies you'll never have heard of, to others that are household names (hmm, do those NDAs ever expire...), and now working as a Product Manager on the .NET team at Microsoft I've come to embrace curiosity and the perpetual learning that it fuels.

When I start to wonder about something, I try (more often) to indulge my curiosity rather than ignoring it, discovering where it leads. Going down dark alleys and off beaten paths is one of my favorite things to do when traveling, and the same applies to coding. I really enjoy getting lost, since it just might lead to my next adventure.

Chase your curiosity and let me know where it leads!

All the Lists in .NET MAUI

David Ortinau — Tue, 02 Jul 2024 15:04:00 +0000

This blog is part of the .NET MAUI UI July 2024 series with a new post every day of the month. See the full schedule for more.

In any app project, you will inevitably have a list of things to display and be faced with choosing the best control to use. Here I will muse on how I have approached these decisions, focusing on mobile applications.

I surveyed the apps on my phone and snagged a cross-section of different experiences. For the data, I wrote a MockDataService to generate useful yet random content. For images, I used a combination of Lorem Picsum and images I crafted with ChatGPT.

I think the results are pretty nice, although I warn they are not production polished and feature complete.

Jump to each of the samples below:

Basic list - even rows
Reviews - uneven rows
Social check-in - complex layout
Learning course - expanding rows
Who's Watching - flex layout
Mailboxes - expanding rows
Contacts - grouping and search
Shopping - header, multiple data templates, infinite scroll

davidortinau / AllTheLists

Collection of UX samples for lists

All The Lists in .NET MAUI

A collection of various UX samples for lists using .NET MAUI built-in controls and alternative controls.

Read more in my .NET MAUI UI July blog post.

View on GitHub

Before I get into each sample, I want to get out of the way some general thoughts.

Anything that does everything does nothing well. In order for a generalized control to be flexible enough to meet a wide variety of needs, compromises will be made in its implementation. This may lead you to be frustrated when it doesn't meet your expectations. A specialized control that only does what you need will best meet the need of that scenario. The other side of that sharp edge is your knowledge and skill also need to level up from general to specialized.

Flat is faster than fat. It's true. If speed is important to your scenario, then a layout that avoids a lot of UI and nesting of controls will perform better at scale because it requires fewer measure and layout calls. Avoid measuring at all costs when performance is critical; give your UI explicit size anytime you can.

UX > UI I see a lot of apps struggling with list scenarios because they jam a ton of UI into them to get the job done, rather than leaning on good UX principles. Do you really need a whole chat experience in every row of the list, or could you navigate to another page? Perhaps you could use a modal experience or a bottom sheet? Anytime your mobile UI has more than one clear call to action, then you're in danger of the UI being less efficient instead of more efficient for your user. Solve problems with UX before UI.

Overview of .NET MAUI List Controls

In my sample, I've used three built-in controls and two community controls that all demonstrate different approaches with strengths and weaknesses. .NET MAUI provides CollectionView, ListView, and BindableLayout. From the community, I chose VirtualListView and VirtualizeListView. There are many other options, a few of which I list at the end for you to evaluate yourself.

	CollectionView	ListView	BindableLayout	VirtualListView	VirtualizeListView
Virtualized	Yes	Yes	No	Yes	Yes
Pull-to-Refresh	Yes - with RefreshView	Yes	Yes - with RefreshView	Yes	Yes
Single Selection	Yes	Yes	No	Yes	Yes
Multiple Selection	Yes	No	No	Yes	No
Load More (Threshold)	Yes	No	No	No	Yes
Layout - Vertical	Yes	Yes	Yes	Yes	Yes
Layout - Horizontal	Yes	No	Yes		Yes
Layout - Grid	Yes	No	Yes	No	No
Layout - Custom	Yes	No	Yes	No	No
Behavior	Platform specific	Platform specific	Cross-platform	Platform specific	Cross-platform
Grouped Data	Yes	Yes	No	Yes	Yes
Context Menu Items	Yes - with SwipeView	Yes	Yes - with SwipeView	No	No
Header / Footer	Yes	Yes	No	Yes	Yes
Predefined Templates	No	Yes	No	No	No
Empty View Template	Yes	No	Yes - with Community Toolkit	Yes	No

I will mostly focus on CollectionView over ListView unless there is a compelling reason to prefer the latter.

Additional Performance Notes

If the speed of rendering and scroll is of utmost importance for your scenario, then these notes are for you.

Layout Lifecycle - understanding the layout measure and arrange process is essential when you're trying to diagnose and improve the rendering performance of a complex UI. In general, if you know the size of something, then provide it.
Compiled Bindings will improve the rendering and updating of your XAML data-bound controls by telling the compiler the type that is being used. On any enclosing XAML element with a BindingContext specify the type with, for example, x:DataType="model:Sample".
Binding Modes - the default binding mode for bindable properties differs from control to control, and property to property. Most are OneWay such as View.Rotation or View.Scale, while properties often used to capture user input are TwoWay such as Entry.Text and ListView.IsRefreshing. In most cases, the default will be what you expect and need, but keep in mind you can change these and have other options such as OneTime and OneWayToSource. Documentation
ObservableCollection vs List if your data won't be updating dynamically, and perhaps it's a OneTime binding, then use List.
Images - make sure your images are appropriately sized for their use on screen. Scaling down images at runtime can be a massive demand on resources, quickly sending you into memory and crash issues. Raster images render faster than vector images in almost every situation. AND if you're loading images from a remote source, be sure you're not blocking the UI loading them. Use a control like FFImage to show a placeholder image and lazy load the remote image. Also, be aware you can customize the image caching policy in .NET MAUI.
Release vs Debug - when evaluating performance, you must be using a release build. There are just so many things going on in a debug build that slow the app down that it's not at all useful to judge. Produce a release build and measure that. And know your options for AOT (Ahead of Time) compilation. .NET 9 has a preview Native AOT for iOS; however, it's extremely strict, and most libraries are not compatible. We did a lot of work in .NET MAUI itself to make it compatible. Android has partial (startup tracing) and full AOT to choose from.
Test on Device - be sure to review release builds on the device. If you know the target device and OS version of your users, then ideally test on that. I've used my iPhone 15 Pro, and a Pixel 5. In 99.9999% of cases, iOS isn't going to be where you see performance concerns.
Layout compression (obsolete) was a run-time optimization in Xamarin.Forms what would remove wrapping layouts from the visual tree. If the layout had no background color or received no user input via gestures, then it could safely be eliminated from the actual UI rendered to the screen. This was useful in Xamarin.Forms where nearly all views (renderers) were wrapped in views. Later in Xamarin.Forms, a set of updated renderers was introduced aptly named "fast renderers" which removed those wrapping views. In .NET MAUI, this redundancy was eliminated, and Layout Compression was not implemented. The API remains, but should be deprecated, and you should treat it so.

Layout 1: Basic List

This is the most simple and common use of a list, so there's not much to say about it. All the rows are exactly the same height and layout. For this need, you cannot go wrong between the virtualized controls. They all perform this scenario very well, even when displaying 10,000 rows.



<CollectionView ItemsSource="{Binding Products}">
    <CollectionView.ItemTemplate>
        <DataTemplate>
            <v:ProductListItem />
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>



<ListView ItemsSource="{Binding Products}">
    <ListView.ItemTemplate>
        <DataTemplate>
            <ViewCell>
                <v:ProductListItem />
            </ViewCell>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

You may be wondering why I'm not binding anything above to the ProductListItem. BindingContext automatically propagates in this (and most) cases to the children. Here the provided BindingContext is the single Product.



<?xml version="1.0" encoding="utf-8" ?>
<ContentView xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:ffimageloading="clr-namespace:FFImageLoading.Maui;assembly=FFImageLoading.Maui"
             xmlns:m="clr-namespace:AllTheLists.Models"
             xmlns:vm="clr-namespace:AllTheLists.ViewModels"
             x:DataType="m:Product"
             x:Class="AllTheLists.Views.ProductListItem">
    <Grid Padding="16" ColumnDefinitions="80,*,40" ColumnSpacing="16">
        <ffimageloading:CachedImage 
            Source="{Binding ImageUrl}" 
            HeightRequest="80" 
            WidthRequest="80" 
            LoadingPlaceholder="https://via.placeholder.com/80" 
            ErrorPlaceholder="error.png">
        </ffimageloading:CachedImage>
        <VerticalStackLayout Grid.Column="1" Padding="10">
            <Label Text="{Binding Name}" FontSize="16" />
            <Label Text="{Binding Price, StringFormat='Price: {0:C}'}" FontSize="14" />
            <Label Text="{Binding Description}" FontSize="12" LineBreakMode="TailTruncation" />
        </VerticalStackLayout>      
        <CheckBox Grid.Column="2" VerticalOptions="Center" />  
    </Grid>
</ContentView>

In addition to samples for ListView and CollectionView, I checked out VirtualListView by Redth and VirtualizeListView by MPowerKit. The latter is a completely cross-platform virtualized control, which is an interesting approach. If consistency across platforms is your goal, then that might be a great option for you.

References:

Layout 2: Reviews [Uneven rows]

The list of EV charging station reviews in the PlugShare mobile app modeled the next sample. While the template is not very complex, it does have a variable-length string that wraps in a Label. This was problematic in early releases of .NET MAUI, where the text would be clipped or flow offscreen. By default, the ItemSizingStrategy is to measure only the first item and assume all the rest of the items are the same size. This is much more performant for obvious reasons.

To accommodate the variable sizing, I need to use a strategy that measures all items or each item individually. In practice, this performs well and scrolls very smoothly.



<CollectionView ItemsSource="{Binding Reviews}" ItemSizingStrategy="MeasureAllItems">
    <CollectionView.ItemTemplate>
        <DataTemplate>
            <v:ReviewListItem />
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>



<Grid ColumnDefinitions="40,*" 
    RowDefinitions="Auto,Auto"
    ColumnSpacing="8"
    Margin="16">
    <Image 
        Source="{Binding StatusImage}"
        Grid.Column="0" 
        Grid.RowSpan="2" 
        HeightRequest="20"
        WidthRequest="20"
        VerticalOptions="Start" 
        HorizontalOptions="Center"/>

    <VerticalStackLayout Grid.Column="1" Spacing="8">
        <Label 
            Text="{Binding Author}"
            FontSize="18"
            FontAttributes="Bold" />
        <Label Text="{Binding Comment}" MaxLines="5" Margin="0,0,0,8" />
        <Label Text="{Binding Car}" TextColor="Gray"/>
        <Label Text="{Binding ChargerType}" TextColor="Gray"/>
    </VerticalStackLayout>

    <Label Text="{Binding CreatedAt, StringFormat='{0:MM/dd/yyyy}'}" 
        Grid.Row="0" 
        Grid.Column="1" 
        FontSize="10"
        TextColor="Gray"
        HorizontalOptions="End" 
        VerticalOptions="Start" />

    <BoxView 
        HeightRequest="1" 
        BackgroundColor="LightGray"
        VerticalOptions="End" 
        Grid.Column="1"
        TranslationY="16" />
</Grid>

References:

Layout 3: Social Check-in [Uneven rows, Complex Layout]

For this sample, I took inspiration from Untapped, a social beer enthusiast app. The Activity feed shows the beer check-ins of your friends, including a rating and an optional photo. When the photo is present, the template is a bit taller, so I again need to handle uneven rows.

In this scenario, CollectionView has a clear advantage over ListView because I'm able to specify spacing between the items by calling up the LinearItemsLayout.



<CollectionView 
    ItemSizingStrategy="MeasureAllItems"
    ItemsSource="{Binding CheckIns}">
    <CollectionView.ItemsLayout>
        <LinearItemsLayout Orientation="Vertical" ItemSpacing="10" />
    </CollectionView.ItemsLayout>
    <CollectionView.ItemTemplate>
        <DataTemplate>
            <v:CheckInListItem />
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

To accommodate the different looks, I could have opted for a DataTemplateSelector, but I chose instead to add a HasImage read-only property to the model in order to show/hide the Image control as well as adjust the Y position of the content.



public class Product
{
    ///...

    public bool HasImage => !string.IsNullOrWhiteSpace(ImageUrl);
}



<Border 
    Grid.Row="1"
    TranslationY="{Binding Product.HasImage, Converter={StaticResource BoolToIntConverter}}"

I had not previously used the BoolToObjectConverter from the .NET MAUI Community Toolkit. What a tasty discovery!



<mct:BoolToObjectConverter 
    x:Key="BoolToIntConverter" 
    TrueObject="-60" 
    FalseObject="0"/>

Also great for flip-flopping colors.



<mct:BoolToObjectConverter 
    x:Key="BoolToColorBrushConverter" 
    TrueObject="#FFFFFF" 
    FalseObject="#000000"/>

References:

Layout 4: Learning Course [Expand and Contract]

Those of you who know me are aware I enjoy language learning. One of the apps I've used called TEUIDA has a nice UI that presents courses in units and lessons. Tapping a unit expands to display the different lessons with chapters in a table of contents, roadmap fashion.

Originally, I tried this with CollectionView and ListView, but this confirmed a bug in .NET MAUI on iOS where resizing at runtime doesn't trigger the rest of the list control to resize as you would expect. As of version 8.0.60, this works great on Android.

As I evaluated the content to be displayed, I recognized I don't have a LOT of data. On each page of the app, I usually have four units, each with a variable number of chapters and lessons that never exceeds 10.

For these reasons, I chose to use BindableLayout. In fact, this sample uses three nested BindableLayout. 😲 Did this become a problem? Nope.

BindableLayout is a bit of an odd duck, and perhaps in retrospect it should have been a standalone control like the others. Instead it's an attached property that you can add to any other layout. So rather than starting with the control and specifying a layout like with CollectionView, you start with the layout you prefer and tag on the items source and data template. Simple enough.



<ScrollView>
    <VerticalStackLayout Spacing="10" 
        BindableLayout.ItemsSource="{Binding Items}">
        <BindableLayout.ItemTemplate>
            <DataTemplate>
                <v:LearningUnitListItem />
            </DataTemplate>
        </BindableLayout.ItemTemplate>
    </VerticalStackLayout>
</ScrollView>

The LearningUnitListItem displays the primary box and a hidden list that is a loop over the chapters and lessons.

To expand and contract the list of chapters and lessons, I'm simply using a click handler and toggling the visibility of the VerticalStackLayout that contains that content.

References:

BindableLayout

Layout 5: Who's Watching [Flex layout]

Inspired by Netflix, and Disney+, and "insert other streaming service," I made a "Who's Watching" sample. This one is very simple. It's a FlexLayout with BindableLayout.



<FlexLayout 
    Direction="Row" 
    JustifyContent="Center" 
    Wrap="Wrap"
    BindableLayout.ItemsSource="{Binding WhoIsWatching}" 
    VerticalOptions="Center">
    <BindableLayout.ItemTemplate>
        <DataTemplate x:DataType="m:Contact">
            <VerticalStackLayout 
                HorizontalOptions="Center" 
                Spacing="8" 
                FlexLayout.Basis="40%" 
                FlexLayout.AlignSelf="Start">
                <Image 
                    Source="{Binding ProfilePicture}" 
                    WidthRequest="80" 
                    HeightRequest="80" 
                    Aspect="AspectFill"
                    BackgroundColor="Transparent">
                    <Image.Clip>
                        <EllipseGeometry Center="40, 40" RadiusX="40" RadiusY="40" />
                    </Image.Clip>
                </Image>
                <Label 
                    Text="{Binding FirstName}" 
                    HorizontalOptions="Center" />
            </VerticalStackLayout>
        </DataTemplate>
    </BindableLayout.ItemTemplate>
</FlexLayout>

References:

Layout 6: Mailboxes [Expand and Contract]

To reproduce the Mailboxes UI as seen in Mail on iOS, I chose BindableLayout and Expander from the .NET MAUI Community Toolkit. While a user could end up with a lot of mail accounts that would then benefit from some virtualization, it seems reasonable to start here and grow up into a CollectionView when necessary.

Since I've covered the use of BindableLayout already, I'll focus now on the Expander. The control has two main parts, the header and the content. The header is always visible, and the content is what is shown/hidden based on the user interaction.

In order to toggle the chevron indicator for open/closed, I started with two Label controls to display the font icons and used a relative source binding to watch the IsExpanded property of the parent control. Since I'm within the control, I can reference it this way rather than by name. I refactored this to a single Label and used the magnificent BoolToObjectConverter. How did I ever code without that?!



<mct:Expander>
    <mct:Expander.Header>
        <Grid ColumnDefinitions="*,100,50" RowDefinitions="40">
            <Label 
                Text="Ortinau" 
                Grid.Column="0" 
                FontSize="Subtitle" 
                VerticalOptions="Center" />
            <Label Text="38386" Grid.Column="1" 
                Style="{StaticResource SecondaryLabel}"
                HorizontalOptions="End" HorizontalTextAlignment="End" 
                IsVisible="{Binding Path=IsExpanded, Source={RelativeSource AncestorType={x:Type mct:Expander}}, Converter={StaticResource InvertedBoolConverter}}" />
            <Label 
                Text="{Binding Path=IsExpanded, Source={RelativeSource AncestorType={x:Type mct:Expander}},Converter={StaticResource BoolToChevronConverter}}" 
                FontSize="14" 
                FontFamily="FluentUI" 
                Style="{StaticResource SecondaryLabel}" 
                TextColor="{StaticResource ActionColor}"
                Grid.Column="2" 
                VerticalOptions="Center"                            
                HorizontalOptions="Center" />    
        </Grid>                    
    </mct:Expander.Header>

    <mct:Expander.Content>
        <Border>
            <VerticalStackLayout>
                <BindableLayout.ItemsSource>
                    ...
                </BindableLayout.ItemsSource>
                <BindableLayout.ItemTemplate>
                    <DataTemplate x:DataType="m:Mailbox">
                        <Grid 
                            ColumnDefinitions="60,*,100,50" 
                            RowDefinitions="40,1">
                            <Image 
                                Aspect="Center" 
                                HorizontalOptions="Center" 
                                VerticalOptions="Center">
                                <Image.Source>
                                    <FontImageSource 
                                        Glyph="{Binding Icon}" 
                                        FontFamily="FluentUI" 
                                        Size="18" 
                                        Color="{StaticResource ActionColor}" />
                                </Image.Source>
                            </Image> 
                            <Label 
                                Text="{Binding Name}" 
                                Grid.Column="1" 
                                FontSize="14" 
                                VerticalOptions="Center" />
                            <Label 
                                Text="{Binding UnreadCount}" 
                                Grid.Column="2" 
                                Style="{StaticResource SecondaryLabel}"
                                HorizontalOptions="End" 
                                HorizontalTextAlignment="End" />
                            <Label 
                                Text="{x:Static f:FluentUI.chevron_right_12_regular}" 
                                Grid.Column="3" 
                                Style="{StaticResource SecondaryLabel}"
                                VerticalOptions="Center"
                                FontSize="14" 
                                FontFamily="FluentUI" 
                                HorizontalOptions="Center" />

                            <BoxView 
                                Grid.ColumnSpan="4" 
                                Grid.Row="1" 
                                Margin="16,0,0,0" 
                                HeightRequest="1" 
                                Color="{AppThemeBinding Light=#f3f3f4, Dark=#333333}" />
                        </Grid>
                    </DataTemplate>
                </BindableLayout.ItemTemplate>
            </VerticalStackLayout>
        </Border>
    </mct:Expander.Content>
</mct:Expander>

References:

Layout 7: Contacts [Grouping, Search]

Getting back into a sample with the need for virtualization, grouping, and search, I reproduced a Contacts list.

Header

My contact needed to appear at the top of the list and scroll away before the rest of the content. For that, I added a header to the ListView. Notice it does NOT take a DataTemplate since there can be only one of these and there's no need to instantiate it lazily.



<ListView.Header>
    <HorizontalStackLayout Spacing="16" Padding="16">
        <Border StrokeShape="RoundRectangle 40"
            StrokeThickness="0">
            <Image Source="avatar_01.png" 
            WidthRequest="80" 
            HeightRequest="80" 
            Aspect="AspectFill" 
            VerticalOptions="Center" 
            />
        </Border>
        <Label Text="David Ortinau" 
            FontSize="20" 
            FontAttributes="Bold" 
            VerticalOptions="Center" />
    </HorizontalStackLayout>        
</ListView.Header>

Grouping

Preparing your data sources to be grouped and searchable is the first step. In my approach, I get all my contacts in an ordered flat list, group them by the first initial of the last name, and then add them to a list of grouped contacts. The final piece is setting that aside to a new list that is unfiltered on which I can perform searches.



_contacts = MockDataService.GenerateContacts().OrderBy(c => c.LastName).ThenBy(c => c.FirstName).ToList();

ContactsGroups = new List<ContactsGroup>();

var groupedContacts = _contacts.GroupBy(c => c.LastName[0]).OrderBy(g => g.Key);

foreach (var group in groupedContacts)
{
    var contactsGroup = new ContactsGroup(group.Key.ToString(), group.ToList());
    ContactsGroups.Add(contactsGroup);
}

_unfilteredContactsGroups = new List<ContactsGroup>(ContactsGroups);

To display the grouped list, I went with ListView primarily because this scenario is one of the fundamental scenarios it was made for. To group, I set IsGroupingEnabled="True" and provide a template for the group header.



<ListView.GroupHeaderTemplate>
    <DataTemplate>
        <ViewCell>
            <Label Text="{Binding GroupName}" 
            FontSize="18" 
            FontAttributes="Bold"
            Padding="12,0,0,0"
            VerticalOptions="Center"
            Background="Transparent" />
        </ViewCell>
    </DataTemplate>
</ListView.GroupHeaderTemplate>

And just like that I have the basic grouped list.

Search

.NET MAUI provides a SearchBar control, so I added that above the ListView on the page. As the user types, the SearchCommand is executed. The Text property does default to a TwoWay binding, so I didn't need to specify that, but I wasn't sure until reading the documentation about binding modes for writing this post. ;)



<SearchBar 
    x:Name="SearchBar" 
    Placeholder="Search" 
    Text="{Binding SearchText, Mode=TwoWay}"
    SearchCommand="{Binding SearchCommand}" 
    VerticalOptions="Start" 
    BackgroundColor="{AppThemeBinding Light=White, Dark=Black}"
    />

The search command filters down the unfiltered list and repopulates the ContactsGroups that is bound to the ListView.



[RelayCommand]
void Search()
{
    if (string.IsNullOrWhiteSpace(SearchText))
    {
        // If the search text is empty, show all contacts
        ContactsGroups = _unfilteredContactsGroups;
    }
    else
    {
        // If the search text is not empty, show only contacts that contain the search text
        ContactsGroups = _unfilteredContactsGroups
            .Where(g => g.Any(c => 
                c.FirstName.Contains(SearchText, StringComparison.InvariantCultureIgnoreCase) 
                || c.LastName.Contains(SearchText, StringComparison.InvariantCultureIgnoreCase)))
            .ToList();
    }
}

BUT I was having a problem because I would type, and the list would filter, but I was also getting results I didn't expect. Why?!

I explained my situation to Copilot, and it explained (as I suspected) that I was only searching on the group and not the contacts within the group as I expected. Copilot provided the solution.



ContactsGroups = _unfilteredContactsGroups
    .Select(g => new ContactsGroup(g.GroupName, g.Where(c =>
        c.FirstName.Contains(SearchText, StringComparison.OrdinalIgnoreCase)
        || c.LastName.Contains(SearchText, StringComparison.OrdinalIgnoreCase)).ToList()))
    .Where(g => g.Any())
    .ToList();

References:

Layout 8: Shopping [Header, Data template selector, infinite scroll]

Inspired by the Adidas app, I had a bit of fun making this one. In addition to a header and making product images with ChatGPT, the display pattern is unique. You begin thinking it's going to be a grid layout with two columns, but then after four rows, you hit a product that spans both columns. Ok, so 4 and then 1, right? Wrong. From there on out it's 2 and 1. 🤯

Because I need to load data in batches as the user reaches the end of the list, I chose CollectionView, which has this feature built-in.

Filter Header

So the header is simple: a horizontal scrolling set of buttons to filter the list.



<CollectionView.Header>
    <v:FilterView />
</CollectionView.Header>

FilterView.xaml



<Grid ColumnDefinitions="Auto,*" ColumnSpacing="16" Margin="16,16,-16,16">
    <Image 
        HeightRequest="24" 
        WidthRequest="24" 
        Aspect="Center"
        Background="Transparent">
        <Image.Source>
            <FontImageSource FontFamily="FontAwesome" 
                Glyph="{x:Static f:FontAwesome.Filter}" 
                Size="14" 
                Color="{AppThemeBinding Light={StaticResource Gray900}, Dark={StaticResource Gray300}}"/>
        </Image.Source>
    </Image>
    <ScrollView Orientation="Horizontal" Grid.Column="1" HorizontalScrollBarVisibility="Never">
        <HorizontalStackLayout Spacing="8">
            <Button Text="705" Style="{StaticResource FilterButtonStyle}" />
            <Button Text="SAMBA" Style="{StaticResource FilterButtonStyle}" />
            <Button Text="GAZELLE" Style="{StaticResource FilterButtonStyle}" />
            <Button Text="ULTRABOOST" Style="{StaticResource FilterButtonStyle}" />
            <Button Text="ADIZERO" Style="{StaticResource FilterButtonStyle}" />
            <Button Text="FORUM" Style="{StaticResource FilterButtonStyle}" />
            <Button Text="SUPERSTAR" Style="{StaticResource FilterButtonStyle}" />
            <Button Text="CAMPUS" Style="{StaticResource FilterButtonStyle}" />
            <Button Text="LITE RACER" Style="{StaticResource FilterButtonStyle}" />
            <Button Text="2000S" Style="{StaticResource FilterButtonStyle}" />                
        </HorizontalStackLayout>
    </ScrollView>
</Grid>

Of course in a real app the buttons would be sourced from some collection and I would use a BindableLayout for them.

Funky Layout Pattern

How could I achieve this layout pattern? I chose to massage the data to represent how it would be displayed. That's what a ViewModel is for anyway. With more help from Copilot, I told it the pattern I needed to achieve and watched the code flow! I KNOW KUNG FU!!!



_productDisplays = new List<ProductDisplay>();
for (int i = 0; i < count; i++)
{
    if (i < 4)
    {
        _productDisplays.Add(new ProductDisplay
        {
            Products = GenerateProducts().GetRange(i * 2, 2)
        });
    }
    else if (i % 3 == 1)
    {
        _productDisplays.Add(new ProductDisplay
        {
            Products = GenerateProducts().GetRange(i * 2 - 1, 1)
        });
    }
    else
    {
        _productDisplays.Add(new ProductDisplay
        {
            Products = GenerateProducts().GetRange(i * 2 - 2, 2)
        });
    }

Seeing GenerateProducts() repeated may look like it's regenerating data over and over, but I'm actually returning the cached data set once it's populated. It doesn't read well, I admit.

Now that I have the data representing the pattern I need of 4:1:2:1:2:1:2:1 etc., I can move on to the data template.

The CollectionView implements a linear items layout by default, and that's just fine. Using a data template selector, I can have two templates based on how many items I need to display: Mono and Duo.



public class ShopTemplateSelector : DataTemplateSelector
{
    public DataTemplate MonoTemplate { get; set; }
    public DataTemplate DuoTemplate { get; set; }
    public DataTemplate LoadingMoreTemplate { get; set; }

    protected override DataTemplate OnSelectTemplate(object item, BindableObject container)
    {
        ProductDisplay productDisplay = (ProductDisplay)item;
        if(productDisplay.IsLoading)
        {
            return LoadingMoreTemplate;
        }

        return ((ProductDisplay)item).Products.Count < 2 ? MonoTemplate : DuoTemplate;
    }
}

The DuoTemplate is the more interesting one, as it just displays two MonoTemplates side by side.



<?xml version="1.0" encoding="utf-8" ?>
<ContentView xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:v="clr-namespace:AllTheLists.Views"
             xmlns:m="clr-namespace:AllTheLists.Models"
             x:DataType="m:ProductDisplay"
             x:Class="AllTheLists.Views.DuoProductListItem">
    <Grid ColumnDefinitions="*,*" ColumnSpacing="4">
        <v:MonoProductListItem Grid.Column="0" BindingContext="{Binding Products[0]}" />
        <v:MonoProductListItem Grid.Column="1" BindingContext="{Binding Products[1]}" />
    </Grid>
</ContentView>

And just like that, I have the display I need, and I don't feel like it's overly complex.

Infinite Scrolling

As the user reaches near the end of the list, I need to start fetching more data and display an indicator to the user that this is happening. The indicator is meant to appear at the bottom of the list.

The CollectionView has properties to help with the first part. RemainingItemsThreshold tells the control when that many items remain to be displayed, then call the event RemainingItemsThresholdReached and execute the command RemainingItemsThresholdReachedCommand. In my case, I use both of the latter, but you may only need the command. More on why I do this below.



RemainingItemsThreshold="4"
RemainingItemsThresholdReached="CollectionView_RemainingItemsThresholdReached"
RemainingItemsThresholdReachedCommand="{Binding OnThresholdReachedCommand}"

The OnThresholdReachedCommand fetches more data and appends it to the end of the ObservableCollection.



[RelayCommand]
async Task OnThresholdReached()
{
    if(IsLoadingMore) return;

    IsLoadingMore = true;

    VisibleProducts.Add(new ProductDisplay { IsLoading = true });

    await Task.Delay(4000); // fake a server call delay, allows the loading template to show

    VisibleProducts.Remove(VisibleProducts.Last());

    var newProducts = Products.Skip(VisibleProducts.Count).Take(16);
    foreach (var product in newProducts)
    {
        VisibleProducts.Add(product);
    }

    await Task.Delay(200); // tiny delay for a ui refresh
    IsLoadingMore = false;
}

The attentive reader will have noticed some code in the data template selector in from the previous section, which connects now with the command above. As soon as the call is made to get more data, create a blank ProductDisplay object which has one job, to tell the user IsLoading=true. In the data template selector, I opt to display this special template and add it to the bottom of the list.



if(productDisplay.IsLoading)
{
    return LoadingMoreTemplate;
}

As soon as my data arrives, I remove the last item from the collection and resume adding real data to be displayed.

The IsLoadingMore boolean protects from calling this method while it's already in progress. Maybe there's a better way to do this, but old habits...

To wrap this up, why am I also handling the event with CollectionView_RemainingItemsThresholdReached? It's to work around a bug on one of the platforms where the command is not being executed.



private void CollectionView_RemainingItemsThresholdReached(object sender, EventArgs e)

{

    ((ProductDisplaysViewModel)BindingContext).ThresholdReachedCommand.Execute(null);

}

Conclusion

In conclusion, when choosing the right control for your app scenario, you have options! Consider your specific requirements and the level of customization you need for your list or layout. Prefer CollectionView over ListView, and don't ignore BindableLayout!

As I was writing this, I kept seeing more things to add and try, such as editing and ordering a list. I suppose that's what tomorrow is for.

All of my development here was done on .NET 9 previews using VS Code Insiders and pre-release bits of the .NET MAUI extension for VS Code on a Macbook Pro M1. The addition of XAML IntelliSense and XAML/C# Hot Reload has been great.

One final piece of advice I have to share is to consider all options when solving for a scenario. Choosing a control is only one element. Shaping your data is another. Adapting UX patterns is yet another. While technology may be inflexible and at times will work against you, rather than trying to brute force your way to success remember that you are flexible! I have found this to be a key to success no matter what language or technology I've used.

I hope this has been a fun read and you have found a takeaway or two. Maybe you have a better way to do something, or you hate how I did it. Code can be a very personal thing. Whatever your reaction, be energized to go make something amazing to share with the world.

Managing NuGets in VS Code

David Ortinau — Mon, 01 Apr 2024 17:00:58 +0000

I do most of my app building on a MacBook with Visual Studio Code, and that means I am learning new ways of doing things in the absence of an IDE.

One of the main things I miss about using an IDE is the NuGet package manager. Actually, I hesitate to say "miss" because I never liked the package manager experiences anyway. I would only use them to see versions, and then I would hand edit my csproj file before doing a dotnet restore or just building.

In most cases I can open NuGet.org to look for the version information of the package in question, but that means changing context from VS Code which bums me out. I asked GitHub Copilot how I could do this in VS Code, and it pointed me to a .NET CLI tool called dotnet-outdated-tool.

To install:



dotnet tool install --global dotnet-outdated-tool

Running the outdated command from the terminal evals my project/solution and tells me what versions are available. Sweet!



dotnet outdated

From there I can update one ore more packages, or return to editing the csproj as I prefer to do. And this tool does more. I can filter on a partial or full package name like Microsoft.

To view all the options, run dotnet outdated --help.

https://github.com/dotnet-outdated/dotnet-outdated

Just dotnet please

You can (of course) do all this with the .NET CLI and not use that tool. It's a bit more typing. Here I filter down to the iOS target framework.



dotnet list package --include-prerelease --framework net8.0-ios17.2 --outdated

I do like the visibility this gives me to the sources being used. I can even restrict to a specific source.

See dotnet list package docs for more info.

With these commands I can be productive managing my NuGets in VS Code developing .NET MAUI apps. And as Maddy Montaquila says, working with the command line "makes me feel like a real developer". :)

Inspecting .NET MAUI Apps on Mac with Reveal

David Ortinau — Fri, 29 Mar 2024 15:05:06 +0000

Reveal is a UI inspection tool that I've used going back to my early days writing Obj-C apps for iOS. Maybe "inspection" is a misleading way to say this, because you can also edit values in Reveal live and see the app update. Even though those changes don't update source code, this is extremely useful for figuring out why your UI isn't where you think it should be, or what actual values are being applied to your views.

To use Reveal with .NET MAUI, all you need to do is link in an xcframework and viola.

<ItemGroup Condition=" '$(Configuration)' == 'Debug' ">
  <NativeReference Include="$(HOME)\Library\Application Support\Reveal\RevealServer\RevealServer.xcframework">
    <Kind>Framework</Kind>
    <SmartLink>True</SmartLink>
  </NativeReference>
</ItemGroup>

The official instructions are listed as using Reveal with Visual Studio Mac, however it's really just a csproj addition.

I'm doing all my development from the Mac with Visual Studio Code + .NET MAUI extension (and of course my indespensible GitHub Copilot).

Make sure to clean your bin/obj folders and rebuild. Once your app is open it will be detected by Reveal and show you the visual tree.

What about Windows? The lasted version of Visual Studio 2022 provides a live visual tree, previewer with inspection, and property explorer (see docs). Along with hot reload you can tweak your app during debug and get the round trip to quickly improve your app.

.NET MAUI Tips - Some Dos and Don'ts

David Ortinau — Thu, 01 Feb 2024 21:38:27 +0000

During today's .NET MAUI Community Standup live stream, Maddy Montaquila and I shared some common tips to help developers based on mistakes we've been seeing lately.

Agree? Disagree? Share your perspective and any tips you might have as well in the comments.

Check it out:

youtube.com

Slides: Download

.NET MAUI Tip 1

Use `Shell` or `TabbedPage`|`FlyoutPage`|`NavigationPage`

NOT BOTH

The combination is unsupported.

.NET MAUI Tip 2

Set `MainPage` once

or YMMV

Consider instead how you can craft different configurations within AppShell.xaml.

.NET MAUI Tip 3

Don't nest tabs (`TabbedPage` > `TabbedPage`)

Instead evaluate the UX and consider a different, standard approach

.NET MAUI Tip 4

Reference MauiImages as PNG

(not svg)

<Image Source="dotnet_bot.png" />

The svg is only a source file that generates PNGs at the target densities and sizes.

If you need SVG, use SkiaSharp or a library like Vapolia.Svg

.NET MAUI Tip 5

Don’t nest unconstrained scrolling things inside a stack layout.

unconstrained - it has no explicit sizing constraints like WidthRequest, HeightRequest, or the parent container size may be unknown
scrolling things - like CollectionView, ListView, and ScrollView
stack layout - including StackLayout, HorizontalStackLayout, and VerticalStackLayout

A VerticalStackLayout hosting an unsized/unconstrained vertical scrollable control will not scroll or virtualize unless the height is constrained.

If the layout/scroll directions are not aligned, then it’ll work (e.g. vertical layout with a horizontal scrolling child).

.NET MAUI Tip 6

Customize handlers in `ConfigureHandlers()`

Append/Modify etc. only run once and should be in place before the first handlers are created.

ConfigureHandlers is a builder method in MauiProgram.cs.

.NET MAUI Tip 7

Don’t nest elements with gesture recognizers

A control with gesture recognizers inside of a layout with gesture recognizers is a recipe for problems.

Similarly, beware z-index issues when implementing gestures where views overlap. Use InputTransparent to ensure gestures pass through views when necessary.

.NET MAUI Tip 8

Move simple renderers to handler modifications (Append/Modify)

While a renderer can be wired up in .NET MAUI, handlers are preferred.

Much simpler to implement and maintain long term.

.NET MAUI Tip 9

Rewrite custom controls (renderers) as handlers with mappers

Wiring up a renderer is a quick start during migration, but you may find porting the implementation to a handler faster and more reliable.

Start with wiring the handler, but don’t spend too long on it if it doesn’t work.

.NET MAUI Tip 10

Prefer `Grid` with explicit size and * in `DataTemplates`

Use of Auto, and use of stack layouts inside DataTemplates are less reliable for measure/layout.

Ask Ben Buttigieg for more info ;)

.NET MAUI Tip 11

Use `MauiSplashScreen` and `MauiIcon` only for the simple cases

Use native implementations for anything more complex if those don't immediately meet your needs.

.NET MAUI Tip 12

Prefer ProjectReference over NuGets for sharing your libraries

Safer, easier, and sharing more things is supported.

C# UI and .NET Hot Reload - A Match Made in .NET MAUI

David Ortinau — Mon, 10 Oct 2022 20:20:39 +0000

Visual Studio 2022 and .NET 6 introduced .NET Hot Reload, the ability to continue coding C# while debugging your application, and use your changes without stopping. If you've used Edit and Continue, this probably feels similar.

Start debugging your app
Add or edit some C#
Click the "Hot Reload" button in Visual Studio
Re-trigger the code path to exercise your new code

Most of the time in .NET MAUI we (I) use XAML to declare UI, and XAML Hot Reload to avoid repetitive stopping and starting. This can work really well. Anytime you make a XAML edit, as long as the XAML compiler indicates your edit is valid code, the change is shipped to the running app AND the UI is updated while retaining state.

There are many cases when XAML requires me to stop and restart my session, thus breaking my flow. Remaining completely in C# drastically improves this situation.

Marrying C# UI and .NET Hot Reload

When you edit UI code in your C#, you must then do something to run that code again and see the impact of your change. That can become tiresome. Here's what I do.

I like the pattern of placing my UI construction in a Build method. This method sets the ContentPage.Content and is called in the page's OnNavigatedTo method when hosted within Shell or a NavigationPage.

void Build() => Content = 
        new Grid { 

        };

protected override void OnNavigatedTo(NavigatedToEventArgs args)
{
    base.OnNavigatedTo(args);

    Build();
}

Great! But this method is only going to get called once. I could navigate away from that page and come back. Or I could add a gesture to trigger the method manually. That gets old quickly.

What if I could make sure the Build() method anytime I triggered a hot reload, similar to XAML Hot Reload?

Turns out I can! Anytime .NET Hot Reload executes, a metadata change is triggered, and I can hook into that. To do this, I add a HotReloadService.cs to my project.

#if DEBUG
[assembly: System.Reflection.Metadata.MetadataUpdateHandlerAttribute(typeof(YourAppNamespace.HotReloadService))]
namespace YourAppNamespace { 
    public static class HotReloadService
    {
    #pragma warning disable CS8632 // The annotation for nullable reference types should only be used in code within a '#nullable' annotations context.
        public static event Action<Type[]?>? UpdateApplicationEvent;
    #pragma warning restore CS8632 // The annotation for nullable reference types should only be used in code within a '#nullable' annotations context.

        internal static void ClearCache(Type[]? types) { }
        internal static void UpdateApplication(Type[]? types) {
            UpdateApplicationEvent?.Invoke(types);
        }
    }
}
#endif

Anytime a change happens, the app will now dispatch an event. In the file I'm currently working on, where I want to re-execute the build, I handle the event.

protected override void OnNavigatedTo(NavigatedToEventArgs args)
    {
        base.OnNavigatedTo(args);

        Build();

#if DEBUG
        HotReloadService.UpdateApplicationEvent += ReloadUI;
#endif
    }

    protected override void OnNavigatedFrom(NavigatedFromEventArgs args)
    {
        base.OnNavigatedFrom(args);

#if DEBUG
        HotReloadService.UpdateApplicationEvent -= ReloadUI;
#endif
    }

    private void ReloadUI(Type[] obj)
    {
        MainThread.BeginInvokeOnMainThread(() =>
        {
            Build();
        });
    }

Now give that a try! Make a change to your C# in that page, and hit the Hot Reload fire button (or if you're like me, set hot reload to execute on save). Boom!

XAML Hot Reload must be enabled to leverage this event since it works over the same tooling service. If you disable XAML Hot Reload, then your C# code will reload, but you won't receive the event that you have wired up now to trigger a UI rebuild.

I have found very few scenarios so far when I have to actually stop and restart my debugging session. As you can see in this video, I even add a new class file without stopping.

Roundup of .NET MAUI. - Week of August 15, 2022

David Ortinau — Mon, 22 Aug 2022 14:22:37 +0000

This week (or last week?) I'm going to switch things up and organize the content that caught my attention into categories. I'm seeing more libraries and content themes emerging.

Table of Contents:

UI Design - new controls and how-tos
App Architecture
Bar Code Scanning
Business - data storage, authentication, NFC, DataGrid, PRINTING!

UI Design

Libraries

LiveCharts

beto-rodriguez / LiveCharts2

Simple, flexible, interactive & powerful charts, maps and gauges for .Net, LiveCharts2 can now practically run everywhere Maui, Uno Platform, Blazor-wasm, WPF, WinForms, Xamarin, Avalonia, WinUI, UWP.

LiveCharts2

Watch Blazor WASM demo (only designed for desktop devices for now)

LiveCharts2 (v2) is the evolution of LiveCharts (v0), it fixes the main design issues of its predecessor, it's focused to run everywhere, improves flexibility without losing what we already had in v0.

Extremely flexible data visualization library

The following image is a preview, v2.0 is beta now.

Here is a preview (1.4MB gif, wait for it to load if you see a blank space bellow this text...):

Get started

Live charts is a cross platforms charting library for .Net, to get started go to https://livecharts.dev and take a look at the instalation guide of your target platform, the web site contains all the samples provided in this repo, docs and more.

LiveCharts supports:

Maui
Uno Platform
Wpf
WinUI
Xamarin.Forms
WindowsForms
BlazorWasm
Avalonia
Eto Forms
Uwp

You can also use LiveCharts 2 on a console app or on the…

View on GitHub

StateButton

IeuanWalker / Maui.StateButton

With this control, you are able to create any style of button. This is possible as it acts as a wrapper to your XAML and provides you the events/ commands and properties to bind to. It's also 100% accessible by default.

📝	This is a MAUI version of my Xamarin NuGet

Maui.StateButton

With this control you are able to create any style of button This is possible as it acts as a wrapper to your XAML and provides you the events/ commands and properties to bind too.

It's also 100% accessible with each platform seeing/ treating the control as a native button.

Check out the examples, for a bunch of different designs -

How to use it?

Install the NuGet package into your shared project project

Install-Package IeuanWalker.Maui.StateButton

Then in the MauiProgram.cs, and the StateButton configuration method -

using IeuanWalker.Maui.StateButton;

builder
    .UseMauiApp<App>()
    .UseStateButton();

What can I do with it?

Properties

Property	What it does	Extra info
State	This changes based on the button state. i.e. `Pressed`, `NotPressed`	Default state is `NotPressed` The binding mode

…

View on GitHub

These videos show off how to implement beautiful UI in .NET MAUI.

BreadCrumb

IeuanWalker / Maui.Breadcrumb

This is a breadcrumb navigation control that is completely automatic and uses the Navigation stack and page titles to generate the breadcrumbs. It's also 100% accessible by default..

📝	This is a MAUI version of my Xamarin NuGet

Maui.Breadcrumb

This is a breadcrumb navigation control that is completely automatic and uses the Navigation stack to get the page titles to generate the breadcrumbs.

The animation for the control is based on this article - A Cool Breadcrumbs Bar with Xamarin Forms Animations…

Basic example	Production Example

How to use it?

Install the NuGet package into all of your projects

Install-Package IeuanWalker.Maui.Breadcrumb

This control uses one of my other controls, StateButton, this is to make this control accessible. Ao you'll need to register the using in the MauiProgram.cs on the MauiAppBuilder

builder
    .UseMauiApp<App>()
    .UseStateButton();

To add to a page the first thing we need to do is tell our XAML page where it can find the Breadcrumb control, which is done by adding the following attribute to our…

View on GitHub

Plainer

This lib strips controls down to the bare styles to make them "easy to style". Hmm, useful?

enisn / Xamarin.Forms.Plainer

This library removes all visual effects from controls and makes them easy to style from portable layer instead of writing custom renderers always.

Xamarin.Forms.Plainer

This library removes all visual effects from controls and makes them easy to style from portable layer instead of writing custom renderers always No underlines, no borders, no background colors. Just interactive fields without visual effect.

Getting Started on MAUI

Install Plainer.Maui nuget package to your project.

Go to MauiProgram.cs and add Plainer handlers

builder.ConfigureMauiHandlers(handlers =>
{
  handlers.AddPlainer();
});

Getting Started on Xamarin Forms

Install Xamarin.Forms.Plainer to each platform

Add Initialize method into platforms

Android: Go to MainActivity and add following:

protected override void OnCreate(Bundle savedInstanceState)
{
  base.OnCreate(savedInstanceState);
  global::Xamarin.Forms.Forms.Init(this, savedInstanceState);

  // Add follwoing line
  global::Plugin.Plainer.Platforms.Droid.Plainer.Init(this, savedInstanceState); // <--

  LoadApplication(

…

View on GitHub

Image Pinch to Zoom

TBertuzzi / Bertuzzi.MAUI.PinchZoomImage

🔍 Zoom in on the image with the pinch 👌 of your fingers or double tapping 👆

Bertuzzi.MAUI.PinchZoomImage

Zoom in on the image with the pinch of your fingers.

A simple way to zoom in and zoom out on your images with MAUI.

This is the component, works on iOS, Android

NuGet

Name	Info
Bertuzzi.MAUI.PinchZoomImage

Platform Support

PinchZoomImage is a MAUI library.

Setup / Usage

Does not require additional configuration. Just install the package in the shared project and use.

You just need to add the reference in your xaml file.

  xmlns:pinch="clr-namespace:Bertuzzi.MAUI.PinchZoomImage;assembly=Bertuzzi.MAUI.PinchZoomImage"

Control

Use with the image control

 <pinch:PinchZoom>
     <pinch:PinchZoom.Content>
         <Image Source="xxamarin.jpg" />
     </pinch:PinchZoom.Content>
 </pinch:PinchZoom>

The complete example can be downloaded here: https://github.com/TBertuzzi/Bertuzzi.MAUI.PinchZoomImage/tree/master/PinchZoomImageMauiSample

Base on my package : https://github.com/TBertuzzi/Xamarin.Forms.PinchZoomImage

View on GitHub

Animated Menu

Yes! Love this so much. Naweed has had a busy week churning out videos for a variety of different apps.

youtube.com

Javier Codes

We all know Javier can make some beautiful apps, and if you don't then this is a great introduction. Chill out with some great music and just watch as Javier brings this design to life.

Composite Button with Activity Indicator

Pragnesh shows us how to make a button that has state and includes a spinner inside it. This is a good example of how you can compose controls to make custom UI experiences.

Themes

Chris shows us how to give the user various UI themes to choose from at runtime.

Draw/Copy Paths and Shapes to XAML

This is a great tip everyone should know. When your designer gives you a source file, you can often copy the shape data directly from the design tool, or you can crack open an SVG in a text editor and copy the data to XAML.

App Architecture

Naweed's MauiTubePlayer

This series of videos works through architectural design decisions we all need to make when implementing common functionality across an application.

[Turkish] Folder Structure

Bar Code Scanning

ZXing Library

Jonathan Dick (Redth) updated his popular library to .NET 6 and there's a preview on NuGet ready to use!

Redth / ZXing.Net.Maui

Barcode Scanning for MAUI?

ZXing.Net.MAUI

The successor to ZXing.Net.Mobile: barcode scanning and generation for .NET MAUI applications

Barcode Scanning

Install ZXing.Net.MAUI

Install ZXing.Net.Maui.Controls NuGet package on your .NET MAUI application

Make sure to initialize the plugin first in your MauiProgram.cs, see below

// Add the using to the top
using ZXing.Net.Maui;

// ... other code 

public static MauiApp Create()
{
    var builder = MauiApp.CreateBuilder();

    builder
        .UseMauiApp<App>()
        .UseBarcodeReader(); // Make sure to add this line

    return builder.Build();
}

Now we just need to add the right permissions to our app metadata. Find below how to do that for each platform.

Android

For Android go to your AndroidManifest.xml file (under the Platforms\Android folder) and add the following permissions inside of the manifest node:

<uses-permission android:name

…

View on GitHub

I added this myself to the .NET Point of Sale demo app, but cut it from the .NET Conf demo due to time. It's there and works if anyone wants to wire it up and polish the UI. :)

Other's have picked up on this feature and are showing off.

youtube.com

Here Gerald teaches us how to scan all the codes!

Business

Libraries

NFC

A library for .NET MAUI to do Near Field Communication (NFC).

franckbour / Plugin.NFC

A Cross-Platform NFC (Near Field Communication) plugin to easily read and write NFC tags in your application.

Plugin.NFC

A Cross-Platform NFC (Near Field Communication) plugin to easily read and write NFC tags in your Xamarin Forms or .NET MAUI applications.

This plugin uses NDEF (NFC Data Exchange Format) for maximum compatibilty between NFC devices, tag types, and operating systems.

Status

Package	Build	NuGet	MyGet
Plugin.NFC

CI Feed : https://www.myget.org/F/plugin-nfc/api/v3/index.json

Supported Platforms

Platform	Version	Tested on
Android	4.4+	Google Nexus 5, Huawei Mate 10 Pro, Google Pixel 4a, Google Pixel 6a
iOS	11+	iPhone 7, iPhone 8

Windows, Mac and Linux are currently not supported. Pull Requests are welcomed!

Setup

Android Specific

Add NFC Permission android.permission.NFC and NFC feature android.hardware.nfc in your AndroidManifest.xml

<uses-permission android:name="android.permission.NFC" />
<uses-feature android:name="android.hardware.nfc" android:required="false" />

Add the line CrossNFC.Init(this) in your OnCreate()

protected override void OnCreate(Bundle savedInstanceState

…

View on GitHub

DataGrid

This looks brand new.

akgulebubekir / Maui.DataGrid

DataGrid component for Maui

Maui.DataGrid

DataGrid library for .NET MAUI applications.

Supported Platforms

Android

iOS

MacCatalyst

Tizen

Windows

and any other platform that MAUI runs on

 xmlns:dg="clr-namespace:Maui.DataGrid;assembly=Maui.DataGrid"
<dg:DataGrid ItemsSource="{Binding Teams}" SelectionEnabled="True" SelectedItem="{Binding SelectedTeam}"
                RowHeight="70" HeaderHeight="50" BorderColor="{StaticResource GridBorderColor}"
                HeaderBackground="{StaticResource GridHeaderBgColor}" HeaderBordersVisible="{Binding HeaderBordersVisible}"
                PullToRefreshCommand="{Binding RefreshCommand}" IsRefreshing="{Binding IsRefreshing}" PaginationEnabled="{Binding PaginationEnabled}" PageSize="5"
                ActiveRowColor="{StaticResource ActiveRowColor}">
    <dg:DataGrid.Columns>
        <dg:DataGridColumn Title="Logo" PropertyName="Logo" SortingEnabled="False">
            <dg:DataGridColumn.CellTemplate>
                <DataTemplate x:DataType="x:String">
                    <Image Source="{Binding}" HorizontalOptions

…

View on GitHub

Storage

Daniel published several videos last week on storing data with .NET MAUI.

MSAL.NET Authentication

Carl Franklin takes inspiration from our recent .NET Conf and puts together an Azure AD login with MSAL.NET.

Printing

Thomas hooked up a button in the .NET Point of Sale app and added printing with the PrinterUtility NuGet. Nice! Source link below.

// Detect dark theme var iframe = document.getElementById('tweet-1560064472579981314-394'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1560064472579981314&theme=dark" }

GitHub Source

Roundup of .NET MAUI. - Week of August 8, 2022

David Ortinau — Mon, 15 Aug 2022 12:42:52 +0000

This was a big week for .NET MAUI content, starting with .NET Conf: MAUI! We had a great time bringing your a wide range of .NET MAUI content from our studio in Redmond and speakers around the globe.

Table of Contents:

Books
Libraries
Videos

.NET Conf: MAUI

If you only watch one session, I shamelessly must recommend my keynote presentation with Maddy Montaquila.

The rest of the 24 sessions are nicely catalogued at https://docs.microsoft.com/events/dotnetconf-focus-on-maui/.

Books

Michael Stonis from EightBot has written Enterprise Application Patterns with .NET MAUI and updated the companion eShop application to go with it.

dotnet-architecture / eshop-mobile-client

eShop mobile & desktop client built with .NET MAUI

eshop-mobile-client

eShop sample applications have been updated and moved to https://github.com/dotnet/eShop. Active development will continue there.

eshop-mobile-client is a reference .NET MAUI multi-platform client app whose imagined purpose is to serve the mobile workforce of a fictitious company that sells products. The app allows you to manage the catalog, view products, and manage the basket and the orders.

Dependencies

Though eshop-mobile-client mobile app relies on the repo eShopOnContainers for its backend but by default it uses its internal MockServices for all its functionalities. For more details refer to the Setup section.

Architecture

The app architecture consists of two parts:

A .NET MAUI mobile app for iOS, macOS, Android, and Windows.
Several .NET Web API microservices are deployed as Docker containers.

.NET MAUI App

This project exercises the following platforms, frameworks, and features:

.NET MAUI
- XAML
- Behaviors
- Bindings
- Converters
- Central Styles
- Animations
- IoC
- Messaging Center
- Custom Controls
- xUnit Tests
Azure…

View on GitHub

Libraries

InfiniteScroll

This is a port of Matthew Liebowitz's Xamarin.Forms library that adds this behavior to ListView.

https://www.nuget.org/packages/TheSalLab.MauiInfiniteScrolling

Scandit Barcode Scanning

Scandit has updated their Xamarin.Forms library for .NET 6.

https://www.nuget.org/packages/Scandit.DataCapture.Core.Xamarin.Forms/6.14.0-beta.2#readme-body-tab

LiveCharts

James Montemagno turned me on to this SkiaSharp based charting library last week at .NET Conf, and I really want to check it out.

https://www.nuget.org/packages/LiveChartsCore.SkiaSharpView.Maui/2.0.0-beta.350

KeyboardHookLite

I'm stoked for this library that enables a global keyboard listener! This is a common need I have in desktop applications. Right now it only appears to work with Windows.

https://www.nuget.org/packages/KeyboardHookLite

ZXing Barcode Scanner

Our fearless leader Redth has published a .NET MAUI version of his popular barcode scanning library ZXing. It's primarily for mobile, so the Windows bit is just enough to not crash which is perfect me most of our needs.

If you're poking around in the Point of Sale demo I made for .NET Conf, you'll find this put to use. :)

https://www.nuget.org/packages/ZXing.Net.Maui/

ContextMenuContainer

While the official .NET 7 roadmap includes a ContextMenu, you don't need to wait. This library has support for all 4 .NET MAUI platforms today.

https://www.nuget.org/packages/ContextMenuContainer/1.1.0.2-preview#readme-body-tab

Videos

A Better Pub/Sub Messenger

James brings us a quick rundown on using the new Messenger in CommunityToolkit.Mvvm, and I love it! It reminds me a lot of TinyMessenger.

UI Design for .NET MAUI

Leomaris Reyes provides some great tips for honing your skills to create beautiful UI with .NET MAUI.

Webinar: Create a Shopping UI with .NET MAUI and sqlite

Roulette Game

Nice, simple example of animation.

https://github.com/kei-soft/KJunBlog/tree/master/Maui.RouletteGame

Everything you need to know about CollectionView

Drawing Graphics Controls

Chris makes it sound so easy, and I suspect it is!

iOS App Extensions

DrawingView

Gerald introduces you to this powerful, new control for drawing things in .NET MAUI.

Roundup of .NET MAUI. - Week of July 18, 2022

David Ortinau — Tue, 26 Jul 2022 16:18:08 +0000

Table of Contents:

Libraries
Videos

Libraries

BlazorBindings.Maui

Oleksandr has been contributing to the official experiment project, and singlehandedly updated it to support .NET MAUI. He even now has documentation on his fork.

If you fancy writing your .NET MAUI using Blazor components and Razor syntax, check this out!

https://dreamescaper.github.io/MobileBlazorBindingsDocs

<StackLayout>
    <Label FontSize="30"
           Text="@("You pressed " + count + " times")" />
    <Button Text="+1"
            OnClick="@HandleClick" />
</StackLayout>

@code {
    int count;

    void HandleClick()
    {
        count++;
    }
}

Shiny 3.0

// Detect dark theme var iframe = document.getElementById('tweet-1550858546425876480-328'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1550858546425876480&theme=dark" }

https://shinylib.net/

MetroLog

The Frenchman Jean-Marie Alfonsi is shipping an updated fork of this popular logging framework from Claire Novotny with .NET MAUI compatibility.

roubachof / MetroLog

A lightweight logging system targeting .Net 6 and beyond.

Platform	Logo	Package
`MetroLog.Net6`
`MetroLog.Maui`

Overview

MetroLog.Net6 is a .NET 6 lightweight logging framework designed primarily for mobile platforms like iOS and Android.

The intention is that MetroLog is mostly compatible with NLog. Both the surface area and internal construction should just about match.

However, to achieve better startup performance, configuration is only possible through code.

Configuration

Configuration is made through the crossing of a target and log levels.

A target specify how the logs will be stored. For example, you can use the DebugTarget to show your logs in the debug output Or you could use the FileSnapshotTarget to store your logs in a file.

The log levels describe the level of criticality. You bind each target to a set of log levels.

Standard configuration

    var config = new LoggingConfiguration();
#if RELEASE
    config.AddTarget(
        LogLevel.Info, 
        LogLevel.

…

View on GitHub

Bottom Sheet

I tested this on Mac Catalyst and it works as advertised. Bottom sheets a really pretty easy, and there are a few options out there if you don't fancy building your own.

https://www.nuget.org/packages/Sm.Maui.BottomSheet

Videos

Images in .NET MAUI

Did you know you can put animated GIFs in your .NET MAUI app?

Build your own controls in .NET MAUI

This is a super common pattern for creating custom controls. Compose the "in the box" views in .NET MAUI to meet any need.

Live Stream: Angular in .NET MAUI

What?! I think bringing Angular and React components into .NET MAUI in the same way we enable Blazor is super interesting.

.NET DC: Deploy JS Anywhere with .NET MAUI

Alyssa Nicoll is everywhere!

Windows System Tray Icons in .NET MAUI

This is something we did in the WeatherTwentyOne app too! Nice touch.

Scoped Dependencies in .NET

What's New in Syncfusion Controls for .NET MAUI

Worth the 2 minutes and the awesome music to see what Syncfusion just shipped for .NET MAUI.