Gauge in Xamarin

Question

I want to design Gauge in Xamarin. but don't use a paid version

You can see images and designs for each

Don't use the paid version; I want only the free version.

please give the code

Answer 1

引用 皆我百晓生 小程序回复内容续答：
To create a gauge in Xamarin using C#, you can use the SkiaSharp library, which is a free and open-source 2D graphics API. Here is an example code that demonstrates how to create a simple gauge:

1. Install the SkiaSharp NuGet package in your Xamarin project.

2. Add a new class called "GaugeView" that inherits from the Xamarin.Forms.View class.

using SkiaSharp;
using SkiaSharp.Views.Forms;
using Xamarin.Forms;

namespace YourNamespace
{
    public class GaugeView : SKCanvasView
    {
        private float value = 0;

        public float Value
        {
            get { return value; }
            set
            {
                this.value = value;
                InvalidateSurface();
            }
        }

        protected override void OnPaintSurface(SKPaintSurfaceEventArgs e)
        {
            base.OnPaintSurface(e);

            SKImageInfo info = e.Info;
            SKSurface surface = e.Surface;
            SKCanvas canvas = surface.Canvas;

            canvas.Clear();

            float valueAngle = value * 180 / 100;

            using (SKPaint backgroundPaint = new SKPaint
            {
                Style = SKPaintStyle.Fill,
                Color = SKColors.White
            })
            {
                canvas.DrawOval(info.Rect, backgroundPaint);
            }

            using (SKPaint gaugePaint = new SKPaint
            {
                Style = SKPaintStyle.Fill,
                Color = SKColors.Red
            })
            {
                using (SKPath gaugePath = new SKPath())
                {
                    gaugePath.MoveTo(info.Rect.MidX, info.Rect.Bottom);

                    float angle = 90 - valueAngle / 2;
                    float radians = SKMath.DegreesToRadians(angle);

                    float x = (float)(info.Rect.MidX + info.Rect.MidX * Math.Cos(radians));
                    float y = (float)(info.Rect.MidY - info.Rect.MidY * Math.Sin(radians));

                    gaugePath.LineTo(x, y);
                    gaugePath.ArcTo(info.Rect, angle - 180, valueAngle, false);
                    gaugePath.LineTo(info.Rect.MidX, info.Rect.Bottom);

                    canvas.DrawPath(gaugePath, gaugePaint);
                }
            }
        }
    }
}

1. Use the GaugeView in your XAML file:

<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:YourNamespace"
             x:Class="YourNamespace.MainPage">

    <StackLayout>
        <local:GaugeView Value="60" WidthRequest="200" HeightRequest="200"/>
    </StackLayout>

</ContentPage>

This example creates a simple circular gauge that shows a red portion based on the value between 0 to 100. The Value property can be used to update the gauge value dynamically.