Circular Gauge¶

The Circular Gauge creates a simple gauge to track the progress of any value in your app. Customize it to your liking!

CircularGauge

Properties¶

StartingDegree - double¶

Gets or sets the starting degree.

EndingDegree - double¶

Gets or sets the ending degree.

ProgressThickness - double¶

Gets or sets the progress thickness. Default value is 12d.

ProgressColor - Color¶

Gets or sets the color of the progress. Default value is Xamarin.Forms.Color.Default.

ProgressBackgroundColor - Color¶

Gets or sets the color of the progress background. Default value is Xamarin.Forms.Color.Default.

EndCapType - EndCapType¶

Gets or sets the type of the end cap for the progress portion. Default is Rounded. This can be set to one of two values:

public enum EndCapType {
    Rounded,
    Square
}

Methods¶

Task<bool> TransitionTo(double? startingDegree = null, double? endingDegree = null, uint rate = 16, uint length = 250, Easing easing = null)

Transition animation from the starting to the ending degree. Returns a Task boolean when the Task is complete.

startingDegree: Starting degree from which to begin the transition animation.

endingDegree: Ending degree to which the transition will complete.

rate: The time, in milliseconds, between frames.

length: The number of milliseconds over which to interpolate the animation.

easing: The easing function to use to transision in, out, or in and out of the animation.

Example Usage¶

Xaml¶

<aurora:CircularGauge x:Name="gauge" StartingDegree="-90" EndingDegree="135" ProgressColor="Red" ProgressBackgroundColor="Gray" />

C#¶

var circle = new CircularGauge
{
    StartingDegree = -45,
    EndingDegree = 115,
    ProgressColor = Color.Orange,
    EndCapType = Aurora.Gauges.EndCapType.Rounded
};

Example Styles¶

A gauge with a StartingDegree of -45, EndingDegree of 90, ProgressColor of Lime, ProgressBackgroundColor of Olive, ProgressThickness of 30 and EndCapType of Rounded:

Example1

var circle = new CircularGauge
{
    StartingDegree = -45,
    EndingDegree = 90,
    ProgressColor = Color.Lime,
    ProgressBackgroundColor = Color.Olive,
    ProgressThickness = 30,
    EndCapType = Aurora.Gauges.EndCapType.Rounded
};

<aurora:CircularGauge x:Name="circle" StartingDegree="-45" EndingDegree="90" ProgressColor="Lime" ProgressBackgroundColor="Olive" ProgressThickness="30" EndCapType="Rounded" />

A gauge with a StartingDegree of 15, EndingDegree of -90, ProgressColor of Maroon, ProgressBackgroundColor of Gray, ProgressThickness of 65 and EndCapType of Square:

Example2

var circle = new CircularGauge
{
    StartingDegree = 15,
    EndingDegree = -90,
    ProgressColor = Color.Maroon,
    ProgressBackgroundColor = Color.Gray,
    ProgressThickness = 65,
    EndCapType = Aurora.Gauges.EndCapType.Sqaure
};

<aurora:CircularGauge x:Name="circle" StartingDegree="15" EndingDegree="-90" ProgressColor="Maroon" ProgressBackgroundColor="Gray" ProgressThickness="65" EndCapType="Square" />