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

lv2

Get started

Live charts is a cross platforms charting library .Net, to get started go to https://lvcharts.com 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…

StateButton

πŸ“ 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
builder
    .UseMauiApp<App>()
    .UseMauiCommunityToolkit()
    .ConfigureStateButton();
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 is OneWayToSource
…

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

BreadCrumb

πŸ“ This is a MAUI version of my Xamarin NuGet
⚠️ WARNING
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…

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(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 πŸ‘†

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.

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

favicon youtube.com

Creating a BMI Calculator using .NET MAUI - YouTube

A simple and good looking BMI Calculator created using #dotnetmaui. Source code available at: https://github.com/naweed/MauiBMICalculatorSubscribe to my chan...

favicon youtube.com

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

zxing net maui

Barcode Scanning

<zxing:CameraBarcodeReaderView
  x:Name="cameraBarcodeReaderView"
  BarcodesDetected="BarcodesDetected" />
Enter fullscreen mode Exit fullscreen mode

Configure Reader options

cameraBarcodeReaderView.Options = new BarcodeReaderOptions
{
  Formats = BarcodeFormats.OneDimensional
  AutoRotate = true,
  Multiple = true
};
Enter fullscreen mode Exit fullscreen mode

Toggle Torch

cameraBarcodeReaderView.IsTorchOn = !cameraBarcodeReaderView.IsTorchOn;
Enter fullscreen mode Exit fullscreen mode

Flip between Rear/Front cameras

cameraBarcodeReaderView.CameraLocation
  = cameraBarcodeReaderView.CameraLocation == CameraLocation.Rear ? CameraLocation.Front : CameraLocation.Rear;
Enter fullscreen mode Exit fullscreen mode

Handle detected barcode(s)

protected void BarcodesDetected(object sender, BarcodeDetectionEventArgs e)
{
  foreach (var barcode in e.Results)
    Console.WriteLine($"Barcodes: {barcode.Format} -> {barcode.Value}");
}
Enter fullscreen mode Exit fullscreen mode

Barcode Generator View

<zxing:BarcodeGeneratorView
  HeightRequest="100"
  WidthRequest="100"
  ForegroundColor="DarkBlue"
  Value=
…
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.

.NET MAUI ZXing [BarCode/QRCode] - YouTube

https://kjun.kr/1395#keisoft #MAUI #ZXing #BarCode #QRCode

favicon youtube.com

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

DataGrid

This looks brand new.

GitHub logo akgulebubekir / Maui.DataGrid

DataGrid component for Maui

Maui.DataGrid

===============

DataGrid Library for Maui Applications.

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

Supported Platforms

  • Android
  • iOS
  • Windows
     xmlns:dg="clr-namespace:Maui.DataGrid;assembly=Maui.DataGrid"
     xmlns:conv="clr-namespace:Maui.DataGrid.Sample;assembly=Maui.DataGrid.Sample"
    <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:DataGrid.Columns>
            <dg:DataGridColumn Title="Logo" PropertyName="Logo" Width="150" SortingEnabled="False">
                <dg:DataGridColumn.CellTemplate>
                    <DataTemplate>
                        <Image Source="{Binding}" HorizontalOptions="Center" VerticalOptions="Center"
                               Aspect="AspectFit" HeightRequest="60
…
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 (0)

πŸ—£ Want to join the conversation?

Β 
It's easy! Become a DEV member to follow this post, comment, and more.