DEV Community

David Ortinau
David Ortinau

Posted on

Roundup of .NET MAUI - Week of June 27, 2022

What better way to catch up from my vacation than to check out the latest updates to .NET MAUI content via NuGets and YouTube videos? Ya'll been busy! Here we go:


Source Generators

Are you looking for source generators to reduce the boilerplate code you need to write when creating bindable properties for custom components? Here are a few options:

Syncfusion Updates

Syncfusion has published update v20.2.36 for a bunch of .NET MAUI controls including:

  • SignaturePad
  • DataGrid
  • Maps
  • Barcode
  • Sliders
  • ListView
  • Scheduler
  • Gauges
  • Charts
  • TabView

MauiReactor + HotReload

MauiReactor is an MVU "Component based UI library inspired by ReactJS and Flutter", and the successor to ReactorUI which was based on Xamarin.Forms. Coupled with it's own Hot Reload component, and you have a nice, productive C# first development experience.

GitHub logo adospace / reactorui-maui

MauiReactor is a MVU UI framework built on top of MAUI.


Component-based UI Library built on top of Maui Controls inspired to ReactJs and Flutter

MauiReactor is the successor of ReactorUI for Xamarin-Forms (

Build status

MauiReactor Nuget Packages


All Packages

Documentation (WIP)

Setting up MauiReactor from CLI

  1. Install MauiReactor templates Nuget
dotnet new --install Reactor.Maui.TemplatePack
  1. Install MauiReactor hot reload console command Nuget
dotnet tool install -g Reactor.Maui.HotReload --prerelease
  1. Create a sample project
dotnet new maui-reactor-startup -o my-new-project
cd .\my-new-project\
  1. Build & run the project (emulator or device must be running and configured)
dotnet build -t:Run -f net7.0-android
  1. Hot-reload console
dotnet-maui-reactor -f net7.0-android
  1. Edits to code should be hotreloaded by the application --> Enjoy!

using MauiReactor.WeatherTwentyOne.Pages.Components;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace MauiReactor.WeatherTwentyOne.Pages
    internal class HomePage : Component
        public override VisualNode Render()
            return new ContentPage(title: "Redmond, WA")
                Device.Idiom == TargetIdiom.Desktop ?

        private VisualNode RenderPhoneLayout()
            return new ScrollView
                new VerticalStackLayout
                    new CurrentWidget(),

                    new BoxView()

                    new Next24HrWidget(),

                    new Next7DWidget()

        private VisualNode RenderDesktopLayout()
            => new Grid(
                rows: "*",
                columns: "*,500")
                    new ScrollView
                        new VerticalStackLayout
                            new FlexLayout
                                new CurrentWidget()

                                new WindLiveWidget(),

                            new BoxView()

                            new Next24HrWidget(),

                            new Next7DWidget()

                    new WidgetsPanel()

Enter fullscreen mode Exit fullscreen mode


This set of SkiaSharp views can be added to any .NET MAUI application for drawing. This is similar to what you can do with the built-in GraphicsView and Microsoft.Maui.Graphics, but directly to SkiaSharp.

<skia:SKCanvasView x:Name="skiaView" PaintSurface="OnPaintSurface"
                       EnableTouchEvents="True" Touch="OnTouch"
                       IgnorePixelScaling="True" />
Enter fullscreen mode Exit fullscreen mode
private void OnPaintSurface(object sender, SKPaintSurfaceEventArgs e)
            // the the canvas and properties
            var canvas = e.Surface.Canvas;

            // make sure the canvas is blank

            // decide what the text looks like
            using var paint = new SKPaint
                Color = SKColors.Black,
                IsAntialias = true,
                Style = SKPaintStyle.Fill,
                TextAlign = SKTextAlign.Center,
                TextSize = 24

            // adjust the location based on the pointer
            var coord = (touchLocation is SKPoint loc)
                ? new SKPoint(loc.X, loc.Y)
                : new SKPoint(e.Info.Width / 2, (e.Info.Height + paint.TextSize) / 2);

            // draw some text
            canvas.DrawText("SkiaSharp", coord, paint);
Enter fullscreen mode Exit fullscreen mode

OnScreenSize XAML Markup Extension

Just like with OnPlatform and OnIdiom, you can specify different values to control properties based on screen dimensions with this library. This looks useful, so long as you agree on the predefined sizes I suppose. This doesn't look like it would be adaptive at runtime. For this I recommend using adaptive triggers and providing your own size requirements.

GitHub logo carolzbnbr / OnScreenSizeMarkup

OnScreenSizeMarkup is a XAML markup extension for controlling UI elements (Views) based on the category a device's screen sizes fits in (Medium-sized devices, Large-sized devices, and etc).

This project is based on a post I wrote a long time ago for my blog.

Maui Community Toolkit announcement

I'm pround to anounce that this project will be soon moved to Maui Community Toolkit as per these conversation.

As it is now ready for MAUI, it just a matter of days to be ported to the MCT and wait to the next release ef the Toolkit to be published.

OnScreenSizeMarkup: A XAML markup extension

OnScreenSizeMarkup is XAML markup extension for controlliing UI elements depending on the device screen size category.

Where can I use it?

OnScreenSizeMarkup is currently compatible with:

  • Xamarin.Forms NuGet Stats
  • MAUI NuGet Stats

What does that mean?

It works exactly as other markup extensions such as OnPlatform or OnIdiom, allowing you to control UI views accordding to the screen sizes category a device fits in.

Screen Categories

The screen sizes are grouped into six categories:

  • ExtraSmall - Tiny…
<Grid RowDefinitions="{markups:OnScreenSize Large='200, *, 200', 
                                                     ExtraLarge='300, *, 300',
                                                     DefaultSize='100, *, 100'}">
                            Medium='15, 15, 0, 0', 
                            Large='20, 20, 0, 0', 
                            DefaultSize='10, 10, 0, 0'}"
                    Text="Hello" TextColor="White" />
Enter fullscreen mode Exit fullscreen mode


This is a fork of a Xamarin.Forms library updated to support .NET MAUI mobile platforms for image manipulation.

using (var image = await CrossImageEdit.Current.CreateImageAsync(imageByteArray)) {
    var croped = await Task.Run(() =>
            image.Crop(10, 20, 250, 100)
                 .Resize(100, 0)
Enter fullscreen mode Exit fullscreen mode


There are many MVVM libraries out there, but perhaps none as "tiny".


Another library forked and updated to .NET 6 from Xamarin, this provides bluetooth functionality for mobile platforms.



Real-time messaging between your .NET MAUI app and a server/service.

[French] DevFest - .NET MAUI : Mais c'est quoi ce truc ?

Helicopter Game

A 60s video to inspire. Yes, you can create 2D graphics and games in .NET MAUI. :)

[Portugues] Windows Subsystem for Android


James Montemagno breaks down the what, why, and how of MVVM for .NET MAUI apps.

.NET MAUI Arduino(?)

Looks like a .NET MAUI app running on Windows and using an older DLL that works with some Arduino device. 대박!

Top comments (0)