epj.CircularGauge.Maui 1.0.0-pre

This is a prerelease version of epj.CircularGauge.Maui.
dotnet add package epj.CircularGauge.Maui --version 1.0.0-pre
NuGet\Install-Package epj.CircularGauge.Maui -Version 1.0.0-pre
This command is intended to be used within the Package Manager Console in Visual Studio, as it uses the NuGet module's version of Install-Package.
<PackageReference Include="epj.CircularGauge.Maui" Version="1.0.0-pre" />
For projects that support PackageReference, copy this XML node into the project file to reference the package.
paket add epj.CircularGauge.Maui --version 1.0.0-pre
#r "nuget: epj.CircularGauge.Maui, 1.0.0-pre"
#r directive can be used in F# Interactive and Polyglot Notebooks. Copy this into the interactive tool or source code of the script to reference the package.
// Install epj.CircularGauge.Maui as a Cake Addin
#addin nuget:?package=epj.CircularGauge.Maui&version=1.0.0-pre&prerelease

// Install epj.CircularGauge.Maui as a Cake Tool
#tool nuget:?package=epj.CircularGauge.Maui&version=1.0.0-pre&prerelease

epj.CircularGauge.Maui

License

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:

Platform Supported
Android Yes
iOS Yes
Windows Yes
MacCatalyst Maybe (not tested)

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.

Type Property Description Default Value
Float Value The current value of the gauge 0.0
Float MinValue The minimum value used for the value range and scale 0.0
Float MaxValue The maximum value used for the value range and scale 100.0
Float StartAngle The angle where the gauge begins, attention: 0� is at the botttom here 45.0
Float SweepAngle The size of the gauge in degrees beginning at the StartAngle 270.0
Float GaugeWidth Sets the width of the gauge 25.0
Float NeedleLength Sets the length of the needle 120.0
Float NeedleWidth Sets the width of the needle's end (not the tip) 10.0
Float NeedleOffset Use this to offset the needle from the center for visual effects 20.0
Float BaseWidth Sets the diameter of the needle's base 20.0
Float BaseStrokeWidth Sets the width of the stroke for the needle's base, use 0.0 to disable 4.0
Float ScaleLength The length of a scale unit dash 8.0
Float ScaleThickness The width of a scale unit dash 3.0
Float ScaleDistance Sets the distance between scale and gauge 4.0
Integer ScaleUnits Defines to show a scale unit for every n steps, e.g. every ten steps 10
Boolean ShowScale Set to true in order to show the scale, false to hide it true
Color GaugeColor The main color of the gauge control Red
Color NeedleColor The main color for the needle LightGray
Color BaseColor The color of the needle's base LightGray
Color BaseStrokeColor The color of the base's stroke DimGray
Color ScaleColor The color of the scale's dashes LightGray
List<Color> GaugeGradientColors List of Colors used for the Gradient (from first to last) <empty>

Notes

  • Uses SkiaSharp for MAUI
Product Compatible and additional computed target framework versions.
.NET net7.0 is compatible.  net7.0-android was computed.  net7.0-android33.0 is compatible.  net7.0-ios was computed.  net7.0-ios16.0 is compatible.  net7.0-maccatalyst was computed.  net7.0-maccatalyst15.4 is compatible.  net7.0-macos was computed.  net7.0-tvos was computed.  net7.0-windows was computed.  net7.0-windows10.0.19041 is compatible.  net8.0 was computed.  net8.0-android was computed.  net8.0-browser was computed.  net8.0-ios was computed.  net8.0-maccatalyst was computed.  net8.0-macos was computed.  net8.0-tvos was computed.  net8.0-windows was computed. 
Compatible target framework(s)
Included target framework(s) (in package)
Learn more about Target Frameworks and .NET Standard.

NuGet packages

This package is not used by any NuGet packages.

GitHub repositories

This package is not used by any popular GitHub repositories.

Version Downloads Last updated
1.0.0-pre 119 12/7/2022