Version

Configuring the Background (XamRadialGauge)

Purpose

This topic provides a conceptual overview of the XamRadialGauge™ control’s Background feature. It describes the properties of the background area and provides an example of its implementation.

Required background

The following topics are prerequisites to understanding this topic:

Topic Purpose

This section gives you an overview of the XamRadialGauge™ control and its main features.

This topic explains using a code example how to add the XamRadialGauge™ control to a Xamarin.Forms application.

In this topic

This topic contains the following sections:

Background Feature Overview

Background feature summary

Displayed as a circle, the background section of the XamRadialGauge control is where all the different elements such as needles and tick marks are added to the gauge.

This area can be customized to be either circular or fitted by setting the BackingShape property. A circular shape creates a 360 degree circle gauge while a fitted shape creates a filled arc segment encompassing the scale.

Preview

The following image is a preview of the XamRadialGauge control rendered with the background configured as Fitted.

Configuring the Backing 1 17 1.png

Background Feature Property Reference

Background feature property reference chart

The following table summarizes the properties of the XamRadialGauge control related the background area.

Property Name Property Type Description

Brush

Use this property to specify the gauge’s background brush fill.

Double

Determines the corner rounding radius to use with the fitted scale background. If the gauge uses a fitted background shape, use this property to provide rounded corners for the background.

Double

Determines the inner extent of the gauge’s background. This applies only when using fitted background shapes.

Double

Determines the outer extent of the gauge’s background. This applies only when using fitted background shapes.

Brush

Determines the brush used for the outline of the background.

Double

Determines the oversweep or undersweep degrees to apply to the fitted background. Use this property to add extra space and extend the background shape past the start and end of the scale.

RadialGaugeBackingShape

Use this property to set the shape of the gauge’s background to a predefined shape. The background shape can either be circular or fitted. A fitted shape creates a filled arc segment that encompasses the scale.

Double

Determines the stroke thickness for the background outline.

Configuring the Background

Example

The following screenshot shows how the XamRadialGauge control renders using this background properties configuration:

Property Value

AliceBlue

Fitted

10

0.9

0.2

4

5
Configuring the Backing 2 17 1.png

Following is the code that implements this example

In XAML:

<ig:XamRadialGauge
    x:Name="radialGauge"
    MinimumValue="0"
    MaximumValue="10"
    Value="1"
    BackingShape="Fitted"
    BackingBrush="AliceBlue"
    BackingCornerRadius="10"
    BackingOuterExtent=".9"
    BackingInnerExtent=".2"
    BackingOversweep="4"
    BackingStrokeThickness="5"
/>

In C#:

var radialGauge = new XamRadialGauge();
radialGauge.MinimumValue = 0;
radialGauge.MaximumValue = 10;
radialGauge.Value = 1;
radialGauge.BackingShape = RadialGaugeBackingShape.Fitted;
radialGauge.BackingCornerRadius = 10;
radialGauge.BackingOuterExtent = 0.9;
radialGauge.BackingInnerExtent = 0.2;
radialGauge.BackingOversweep = 4;
radialGauge.BackingStrokeThickness = 5;
radialGauge.BackingBrush = new SolidColorBrush(Color.AliceBlue);

Related Content

The following topics provide additional information related to this topic:

Topic Purpose

This topic explains using a code example how to add the XamRadialGauge™ control to a Xamarin.Forms application.

This topic provides a conceptual overview of labels with the XamRadialGauge™ control. It describes the properties of the labels and also provides an example of how to configure the labels.

This topic provides a conceptual overview of needles with the XamRadialGauge™ control. It describes the properties of the needles and also provides an example of how to configure them.

This topic provides a conceptual overview of the XamRadialGauge™ control’s ranges. It describes the properties of the ranges and provides an example of how to add ranges to the radial gauge.

This topic provides a conceptual overview of the XamRadialGauge™ control’s scale. It describes the properties of the scale and also provides an example of how to implement it.

This topic provides a conceptual overview of tick marks with the XamRadialGauge™ control. It describes the tick marks’ properties and provides an example of how to implement them.