DEV Community

David Ortinau
David Ortinau

Posted on

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

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



GitHub logo 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.


CodeFactor Build and tests

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 .Net, to get started go to 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 server side installing only the core packages, take a look at this


📝 This is a MAUI version of my Xamarin NuGet

Maui.StateButton Nuget Nuget

License: MIT FOSSA Status Codacy Badge

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.

The example page, has a bunch of different design to showcase the usage -

Example gif

How to use it?

Install the NuGet package into your shared project project

Install-Package IeuanWalker.StateButton

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

using StateButton;
Enter fullscreen mode Exit fullscreen mode
Enter fullscreen mode Exit fullscreen mode

What can I do with it?


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 is OneWayToSource

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


📝 This is a MAUI version of my Xamarin NuGet
NuGet is in preview at the moment. There are several reasons its in preview -
  • There is a bug in MAUI preventing the StackLayout within the scrollview from filling the width, this means the breadcrumb doesnt animate in from outside the screen, more info here - dotnet/maui#9446
  • It's not fully accessible yet
  • I havnt tested iOS yet

Maui.Breadcrumb Nuget Nuget

License: MIT FOSSA Status Codacy Badge

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
Example gif Production Example gif

How to use it?

Install the NuGet package into all of your projects

Install-Package IeuanWalker.Maui.Breadcrumb

To add to a page the first thing we need to do is tell our XAML page where…


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

GitHub logo 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.



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.

CodeFactor Nuget

Getting Started on MAUI

  • Install Plainer.Maui nuget package to your project.

  • Go to MauiProgram.cs and add Plainer handlers

    builder.ConfigureMauiHandlers(handlers =>
    Enter fullscreen mode Exit fullscreen mode

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)
        global::Xamarin.Forms.Forms.Init(this, savedInstanceState);
        // Add follwoing line
        global::Plugin.Plainer.Platforms.Droid.Plainer.Init(this, savedInstanceState); // <--
        LoadApplication(new App());
      Enter fullscreen mode Exit fullscreen mode
    • iOS

Image Pinch to Zoom

GitHub logo TBertuzzi / Bertuzzi.MAUI.PinchZoomImage

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


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


Name Info
Bertuzzi.MAUI.PinchZoomImage NuGet

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.

Enter fullscreen mode Exit fullscreen mode


Use with the image control

         <Image Source="xxamarin.jpg" />
Enter fullscreen mode Exit fullscreen mode

The complete example can be downloaded here:

Base on my package :

Animated Menu

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

Creating Animated Menu using .NET MAUI - YouTube

In this tutorial, we will learn how to create good looking side menu with custom animations in your #dotnetmaui apps. You can find the source code for this t...


Creating a BMI Calculator using .NET MAUI - YouTube

A simple and good looking BMI Calculator created using #dotnetmaui. Source code available at: to my chan...


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.


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!

GitHub logo Redth / ZXing.Net.Maui

Barcode Scanning for MAUI?


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

Barcode Scanning

Install ZXing.Net.MAUI

  1. Install ZXing.Net.MAUI NuGet package on your .NET MAUI application

  2. 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();
            .UseBarcodeReader(); // Make sure to add this line
        return builder.Build();
    Enter fullscreen mode Exit fullscreen mode

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


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="android.permission.CAMERA" />
Enter fullscreen mode Exit fullscreen mode


For iOS go…

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.

.NET MAUI ZXing [BarCode/QRCode] - YouTube

Blog&Source : #MAUI BarCode #MAUI QRCode #ZXing #BarCode #QRCode


Here Gerald teaches us how to scan all the codes!




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

GitHub logo franckbour / Plugin.NFC

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

NFC logo 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.


Package Build NuGet MyGet
Plugin.NFC Build status Nuget MyGet

CI Feed :

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!


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" /&gt
<uses-feature android:name="android.hardware.nfc" android:required="false" />
Enter fullscreen mode Exit fullscreen mode
  • Add the line CrossNFC.Init(this) in your OnCreate()
protected override void OnCreate(Bundle savedInstanceState
Enter fullscreen mode Exit fullscreen mode


This looks brand new.

GitHub logo akgulebubekir / Maui.DataGrid

DataGrid component for Maui


DataGrid Library for Maui Applications.

You can install the package from NuGet Package Manager (akgul.Maui.DataGrid)

Supported Platforms

  • Android
  • iOS
  • Windows
<dg:DataGrid ItemsSource="{Binding Teams}" SelectionEnabled="True" SelectedItem="{Binding SelectedTeam}"
             RowHeight="70" HeaderHeight="50" BorderColor="{StaticResource GridBorderColor}"
             HeaderBackground="{StaticResource GridHeaderBgColor}"
             PullToRefreshCommand="{Binding RefreshCommand}" IsRefreshing="{Binding IsRefreshing}"
             ActiveRowColor="{StaticResource ActiveRowColor}">
        <dg:DataGridColumn Title="Logo" PropertyName="Logo" Width="150" SortingEnabled="False">
                    <Image Source="{Binding}" HorizontalOptions="Center" VerticalOptions="Center"
                           Aspect="AspectFit" HeightRequest="60"
Enter fullscreen mode Exit fullscreen mode


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.


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

GitHub Source

Top comments (1)

docutain profile image

We would highly appreciate you having a look at our Docutain Barcode Scanner SDK. Developer Documentation for .NET MAUI is also available: