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.
adospace / reactorui-maui
MauiReactor is a MVU UI framework built on top of .NET MAUI
MauiReactor
Component-based UI Library built on top of .NET MAUI
MauiReactor is .NET library written on top of .NET MAUI that allows you to write applications in pure C# using an MVU approach.
This is the classic Counter app in MauiReactor:
class CounterPageState
{
public int Counter { get; set; }
}
class CounterPage : Component<CounterPageState>
{
public override VisualNode Render()
=> ContentPage("Counter Sample",
VStack(
Label($"Counter: {State.Counter}"),
Button("Click To Increment", () =>
SetState(s => s.Counter++))
)
.Spacing(10)
.Center()
);
}
Setting up MauiReactor from CLI
- Install MauiReactor templates
dotnet new install Reactor.Maui.TemplatePack
- Install MauiReactor hot reload console command
dotnet tool install -g Reactor.Maui.HotReload
If you already…
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 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" />
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 and providing your own size requirements.
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.
.NET MAUI library Moved to another Repository
The .NET MAUI library has been separated into its own repository. If you are looking for the library for .NET MAUI, please go here.
If you are looking for Xamarin library, keep on this current repo.
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:
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 devices as an Apple Watch. -
Small
- Small devices, such…
<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
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.
[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
Why MVVM?
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)