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

Libraries

LiveCharts

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.

LiveCharts2

CodeFactor Unit tests SkiaSharp Views

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...):

lv2

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…

StateButton

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

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

Example gif

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;
Enter fullscreen mode Exit fullscreen mode
builder
    .UseMauiApp<App>()
    .UseStateButton();
Enter fullscreen mode Exit fullscreen mode

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

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

BreadCrumb

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

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();
Enter fullscreen mode Exit fullscreen mode

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…

Plainer

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.

icon

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.


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 =>
    {
      handlers.AddPlainer();
    });
    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)
      {
        base.OnCreate(savedInstanceState);
        global::Xamarin.Forms.Forms.Init(this, savedInstanceState);
      
        // Add follwoing line
        global::Plugin.Plainer.Platforms.Droid.Plainer.Init(this, savedInstanceState); // <--
      
        LoadApplication(
      Enter fullscreen mode Exit fullscreen mode

Image Pinch to Zoom

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

  xmlns:pinch="clr-namespace:Bertuzzi.MAUI.PinchZoomImage;assembly=Bertuzzi.MAUI.PinchZoomImage"  
Enter fullscreen mode Exit fullscreen mode

Control

Use with the image control

 <pinch:PinchZoom>
     <pinch:PinchZoom.Content>
         <Image Source="xxamarin.jpg" />
     </pinch:PinchZoom.Content>
 </pinch:PinchZoom>     
Enter fullscreen mode Exit fullscreen mode

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




Animated Menu

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

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!

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

  1. Install ZXing.Net.Maui.Controls 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();
    
        builder
            .UseMauiApp<App>()
            .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.

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
Enter fullscreen mode Exit fullscreen mode

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.

Here Gerald teaches us how to scan all the codes!

Business

Libraries

NFC

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.

Status

Package Build NuGet MyGet
Plugin.NFC Build status Nuget MyGet

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" />
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

DataGrid

This looks brand new.

GitHub logo akgulebubekir / Maui.DataGrid

DataGrid component for Maui

Maui.DataGrid

DataGrid library for .NET MAUI applications.

NuGet version (akgul.Maui.Datagrid) CodeQL

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
Enter fullscreen mode Exit fullscreen mode

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.

GitHub Source

Top comments (1)

Collapse
 
docutain profile image
Docutain

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