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 - new controls and how-tos
- App Architecture
- Bar Code Scanning
- Business - data storage, authentication, NFC, DataGrid, PRINTING!
UI Design
Libraries
LiveCharts
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
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...):
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
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 |
---|
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 -
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;
builder
.UseMauiApp<App>()
.UseStateButton();
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
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 |
---|
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…
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();
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?
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.
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.
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(); });
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(
…
-
Image Pinch to Zoom
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
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"
Control
Use with the image control
<pinch:PinchZoom>
<pinch:PinchZoom.Content>
<Image Source="xxamarin.jpg" />
</pinch:PinchZoom.Content>
</pinch:PinchZoom>
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!
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
-
Install ZXing.Net.Maui.Controls NuGet package on your .NET MAUI application
-
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(); }
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
…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).
franckbour / Plugin.NFC
A Cross-Platform NFC (Near Field Communication) plugin to easily read and write NFC tags in your application.
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
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 featureandroid.hardware.nfc
in yourAndroidManifest.xml
<uses-permission android:name="android.permission.NFC" />
<uses-feature android:name="android.hardware.nfc" android:required="false" />
- Add the line
CrossNFC.Init(this)
in yourOnCreate()
protected override void OnCreate(Bundle savedInstanceState
…DataGrid
This looks brand new.
akgulebubekir / Maui.DataGrid
DataGrid component for Maui
Maui.DataGrid
DataGrid library for .NET MAUI applications.
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
…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.
Top comments (1)
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