epj.CircularGauge.Maui 1.0.0

epj.CircularGauge.Maui

Circular Gauge component for .NET MAUI

Summary

A simple component that can be used as a circular gauge to indicate some numerical progress or status. 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:

Highlights

• Customizable Colors and Sizes for Needle and Gauge
• Color Gradients for Gauge
• Adjustable Scale (unit labels are currently not featured, but the scale steps can be defined)
• Show/Hide Scale

Preview

<div> <img align="top" src="assets/screen0.png" width="320"/> <img align="top" src="assets/screen1.png" width="320"/> </div>

Usage

Important: Register Library

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

using epj.CircularGauge.Maui;

namespace CircularGaugeSample;

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

        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.CircularGauge.Maui;assembly=epj.CircularGauge.Maui"
             x:Class="CircularGaugeSample.MainPage">

  <VerticalStackLayout 
    Spacing="25"
    Padding="30,0"
    VerticalOptions="Center">

    <maui:CircularGauge
      WidthRequest="250"
      HeightRequest="250"
      Value="{Binding Value, Source={x:Reference ValueSlider}}"
      StartAngle="45.0"
      SweepAngle="270.0"
      GaugeWidth="25.0"
      MinValue="0.0"
      MaxValue="100.0"
      NeedleLength="120.0"
      NeedleWidth="10.0"
      NeedleOffset="20.0"
      BaseWidth="20.0"
      BaseStrokeWidth="4.0"
      ScaleLength="8.0"
      ScaleDistance="4.0"
      ScaleThickness="3.0"
      ScaleUnits="10"
      GaugeColor="Red"
      NeedleColor="LightGray"
      BaseColor="LightGray"
      BaseStrokeColor="DimGray"
      ScaleColor="LightGray" />

    <Slider
      x:Name="ValueSlider"
      WidthRequest="250"
      HorizontalOptions="Center"
      Minimum="0.0"
      Maximum="100.0"
      Value="40.0"/>

  </VerticalStackLayout>

</ContentPage>

Color Gradient

In order to use a color gradient for the gauge, just add the desired colors to the GaugeGradientColors list, e.g.:

<maui:CircularGauge
  WidthRequest="250"
  HeightRequest="250"
  Value="{Binding Value, Source={x:Reference ValueSlider}}">
  <maui:CircularGauge.GaugeGradientColors>
    <Color>DarkGreen</Color>
    <Color>DarkGreen</Color>
    <Color>DarkGreen</Color>
    <Color>YellowGreen</Color>
    <Color>Yellow</Color>
    <Color>Yellow</Color>
    <Color>OrangeRed</Color>
    <Color>DarkRed</Color>
    <Color>DarkRed</Color>
  </maui:CircularGauge.GaugeGradientColors>
</maui:CircularGauge>

Note: Using a Color Gradient will override the GaugeColor property.

Properties

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

Notes

• Uses SkiaSharp for MAUI