Roundup of .NET MAUI - Week of June 27, 2022
Tags: dotnet, beginners
Published: 2022-07-05 13:26:24

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:

## NuGets

### 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:

- https://www.nuget.org/packages/BindableProps/1.0.7-beta#readme-body-tab
- https://www.nuget.org/packages/M.BindableProperty.Generator

### 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

https://www.syncfusion.com/maui-controls

### 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.

{% embed https://github.com/adospace/reactorui-maui %}

```
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 ?
                RenderDesktopLayout()
                :
                RenderPhoneLayout()
            };
        }

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

                    new BoxView()
                        .HeightRequest(1),

                    new Next24HrWidget(),

                    new Next7DWidget()
                }
                .Padding(0,50)
                .Spacing(25)
            };
        }

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

                                new WindLiveWidget(),
                            }
                            .MinimumHeightRequest(360)
                            .AlignItems(Microsoft.Maui.Layouts.FlexAlignItems.Center)
                            .AlignContent(Microsoft.Maui.Layouts.FlexAlignContent.Center)
                            .JustifyContent(Microsoft.Maui.Layouts.FlexJustify.SpaceEvenly),

                            new BoxView()
                                .HeightRequest(1),

                            new Next24HrWidget(),

                            new Next7DWidget()
                        }
                        .Padding(0,50)
                        .Spacing(50)
                    },

                    new WidgetsPanel()
                        .GridColumn(1)
                };

    }
}
```

### SkiaSharp.Views.Maui.Controls

This set of [SkiaSharp](https://github.com/mono/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](https://docs.microsoft.com/en-us/dotnet/maui/user-interface/controls/graphicsview) and [Microsoft.Maui.Graphics](https://github.com/dotnet/Microsoft.Maui.Graphics), but directly to SkiaSharp.

```
<skia:SKCanvasView x:Name="skiaView" PaintSurface="OnPaintSurface"
                       EnableTouchEvents="True" Touch="OnTouch"
                       IgnorePixelScaling="True" />
```

```
private void OnPaintSurface(object sender, SKPaintSurfaceEventArgs e)
		{
			// the the canvas and properties
			var canvas = e.Surface.Canvas;

			// make sure the canvas is blank
			canvas.Clear(SKColors.White);

			// 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);
		}
```

### 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](https://docs.microsoft.com/en-us/dotnet/maui/fundamentals/triggers) and providing your own size requirements.

{% embed https://github.com/carolzbnbr/OnScreenSizeMarkup %}

```
<Grid RowDefinitions="{markups:OnScreenSize Large='200, *, 200', 
                                                     ExtraLarge='300, *, 300',
                                                     DefaultSize='100, *, 100'}">
            <Label 
                    Padding="{markups:OnScreenSize 
                            Medium='15, 15, 0, 0', 
                            Large='20, 20, 0, 0', 
                            DefaultSize='10, 10, 0, 0'}"
                    Text="Hello" TextColor="White" />
         </Grid>
```

### ImageEdit

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

https://www.nuget.org/packages/Xamarin.Plugin.ImageEdit.NET/2.0.0-alpha1

```
using (var image = await CrossImageEdit.Current.CreateImageAsync(imageByteArray)) {
	var croped = await Task.Run(() =>
			image.Crop(10, 20, 250, 100)
				 .Rotate(180)
				 .Resize(100, 0)
				 .ToPng()
	);
}
```

### TinyMVVM

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

https://www.nuget.org/packages/TinyMvvm.Maui/4.0.1-pre9

{% embed https://youtu.be/XnBmvOu3MO4 %}

### BLE.Net

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

https://www.nuget.org/packages/Plugin.BLE.Net/3.0.0-alpha.1

## Videos

### SignalR

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

{% embed https://youtu.be/pDr0Hx67guk %}

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

{% embed https://youtu.be/VOT6bMA4rx4 %}

### Helicopter Game

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

{% embed https://youtu.be/-CZ_3KHLuYo %}

### [Portugues] Windows Subsystem for Android

{% embed https://www.youtube.com/watch?v=suDuf156w1s %}

### Why MVVM?

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

{% embed https://youtu.be/AXpTeiWtbC8 %}

### .NET MAUI Arduino(?)

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

{% embed https://youtube.com/shorts/_zyItlFTgfQ %}