epj.RadialDial.Maui 1.0.0

epj.RadialDial.Maui

Radial Dial component for .NET MAUI

Summary

A simple multi-purpose component that can be used as a circular dial or gauge as well as a progress ring or progress indicator. The control was developed using SkiaSharp.

Note: The scale of the dial currently only shows dashes and no text labels for the scale units.

Platforms

The following platforms are currently supported:

For use in Desktop applications, the TouchInputEnabled property needs to be set dynamically.

Highlights

• Touch Input
• Snap value to full integer
• Adjustable Scale (unit labels are currently not featured yet, but the scale steps can be defined)
• Show/Hide Scale

Preview

This is just a preview, the styling of the control can be customized. The number label is not included. <div> <img align="top" src="sample1.png" width="280"/> <img align="top" src="sample2.png" width="280"/> </div> <br/> <img src="radialdial_sample.gif" width="400"/>

Usage

Important: Register Library

In MauiProgram.cs, add a call to UseRadialDial() on the builder object:

using epj.RadialDial.Maui;

namespace RadialDialSample;

public static class MauiProgram
{
    public static MauiApp CreateMauiApp()
    {
        var builder = MauiApp.CreateBuilder();
        builder
            .UseMauiApp<App>()
            .ConfigureFonts(fonts =>
            {
                fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
                fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
            })
            .UseRadialDial(); //add this

        return builder.Build();
    }
}

XAML

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:maui="clr-namespace:epj.RadialDial.Maui;assembly=epj.RadialDial.Maui"
             x:Class="RadialDialSample.MainPage">
  <VerticalStackLayout
    VerticalOptions="Center"
    Spacing="20">

    <maui:RadialDial
      TouchInputEnabled="True"
      StrokeWidth="50"
      DialColor="Orange"
      BaseColor="LightSkyBlue"
      ScaleColor="DarkGray"
      Min="0"
      Max="60"
      ShowScale="True"
      InternalPadding="10"
      ScaleDistance="10"
      ScaleLength="24"
      ScaleThickness="8"
      ScaleUnits="5"/>
    
  </VerticalStackLayout>
</ContentPage>

Properties

Most of these properties are bindable for MVVM goodness. If something is missing, please open an issue.

Tips & Tricks

• Although the scale is on the outside of the dial by default, you can also draw it inside the dial by adjusting the values for InternalPadding, StrokeWidth and ScaleDistance

Notes

• Uses SkiaSharp for MAUI
• Inspired by https://github.com/codechem/CC.CircularSlider.Forms