Rim in UWP Radial Gauge

The scale determines the structure of a circular gauge by using a circular rim. By setting the StartAngle and SweepAngle properties, you can change the shape of the circular gauge to a full-circular gauge, half-circular gauge, or quarter-circular gauge.

The StartValue and EndValue properties determine the overall range of the circular rim.

<gauge:SfCircularGauge>
    <gauge:SfCircularGauge.Scales>
        <gauge:CircularScale StartAngle="270" SweepAngle="360" StartValue="0" EndValue="360"
                             Interval="20" MinorTicksPerInterval="0"
                             Radius="150" RimStroke="#39B2C6" RimStrokeThickness="8"
                             TickStroke="#BEBEBE" LabelStroke="#9E9E9E" SmallTickStroke="#BEBEBE" ShowFirstLabel="false">
            <gauge:CircularScale.Pointers>
                <gauge:CircularPointer NeedlePointerVisibility="Collapsed"/>
            </gauge:CircularScale.Pointers>
        </gauge:CircularScale>
    </gauge:SfCircularGauge.Scales>
</gauge:SfCircularGauge>
SfCircularGauge sfCircularGauge = new SfCircularGauge();
CircularScale circularScale = new CircularScale();
circularScale.StartAngle = 270;
circularScale.SweepAngle = 360;
circularScale.StartValue = 0;
circularScale.EndValue = 360;
circularScale.Interval = 20;
circularScale.MinorTicksPerInterval = 0;
circularScale.Radius = 150;
circularScale.ShowFirstLabel = false;
circularScale.RimStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x57, 0xb2, 0xc6));
circularScale.TickStroke = new SolidColorBrush(Color.FromArgb(0xff, 0xc1, 0xc1, 0xc1));
circularScale.SmallTickStroke = new SolidColorBrush(Color.FromArgb(0xff, 0xc1, 0xc1, 0xc1));
circularScale.RimStrokeThickness = 8;
circularScale.LabelStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x99, 0x99, 0x99));
CircularPointer circularPointer = new CircularPointer();
circularPointer.NeedlePointerVisibility = Windows.UI.Xaml.Visibility.Collapsed;
circularScale.Pointers.Add(circularPointer);
sfCircularGauge.Scales.Add(circularScale);

UWP Radial Gauge rim

Rim customization

The color and thickness of the rim can be set by using the RimStroke and RimStrokeThickness properties.

<gauge:SfCircularGauge>
    <gauge:SfCircularGauge.Scales>
        <gauge:CircularScale RadiusFactor="1" RimStrokeThickness="40" RimStroke="SkyBlue"
                             Radius="150"
                             TickStroke="#BEBEBE" LabelStroke="#9E9E9E" SmallTickStroke="#BEBEBE">
            <gauge:CircularScale.Pointers>
                <gauge:CircularPointer NeedlePointerVisibility="Collapsed"/>
            </gauge:CircularScale.Pointers>
        </gauge:CircularScale>
    </gauge:SfCircularGauge.Scales>
</gauge:SfCircularGauge>
SfCircularGauge sfCircularGauge = new SfCircularGauge();
CircularScale circularScale = new CircularScale();
circularScale.RadiusFactor = 1;
circularScale.RimStrokeThickness = 40;
circularScale.RimStroke = new SolidColorBrush(Colors.SkyBlue);
circularScale.Radius = 150;
circularScale.TickStroke = new SolidColorBrush(Color.FromArgb(0xff, 0xc1, 0xc1, 0xc1));
circularScale.SmallTickStroke = new SolidColorBrush(Color.FromArgb(0xff, 0xc1, 0xc1, 0xc1));
circularScale.LabelStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x99, 0x99, 0x99));
CircularPointer circularPointer = new CircularPointer();
circularPointer.NeedlePointerVisibility = Windows.UI.Xaml.Visibility.Collapsed;
circularScale.Pointers.Add(circularPointer);
sfCircularGauge.Scales.Add(circularScale);

UWP Radial Gauge rim customization

Setting position for rim

You can customize the position of the Scales in the following two ways:

  1. Using the RadiusFactor property.
  2. Using the Radius property.

Setting radius factor for rim

The value for the RadiusFactor should be specified in an offset value.

<gauge:SfCircularGauge>
    <gauge:SfCircularGauge.Scales>
        <gauge:CircularScale RadiusFactor="0.5" Radius="200"
                             RimStroke="#39B2C6" RimStrokeThickness="30"
                             TickStroke="#BEBEBE" LabelStroke="#9E9E9E" SmallTickStroke="#BEBEBE">
            <gauge:CircularScale.Pointers>
                <gauge:CircularPointer NeedlePointerVisibility="Collapsed"/>
            </gauge:CircularScale.Pointers>
        </gauge:CircularScale>
    </gauge:SfCircularGauge.Scales>
</gauge:SfCircularGauge>
SfCircularGauge sfCircularGauge = new SfCircularGauge();
CircularScale circularScale = new CircularScale();
circularScale.RadiusFactor = 0.5;
circularScale.RimStrokeThickness = 30;
circularScale.Radius = 200;
circularScale.RimStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x57, 0xb2, 0xc6));
circularScale.TickStroke = new SolidColorBrush(Color.FromArgb(0xff, 0xc1, 0xc1, 0xc1));
circularScale.SmallTickStroke = new SolidColorBrush(Color.FromArgb(0xff, 0xc1, 0xc1, 0xc1));
circularScale.LabelStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x99, 0x99, 0x99));
CircularPointer circularPointer = new CircularPointer();
circularPointer.NeedlePointerVisibility = Windows.UI.Xaml.Visibility.Collapsed;
circularScale.Pointers.Add(circularPointer);
sfCircularGauge.Scales.Add(circularScale);

UWP Radial Gauge rim radius factor

Setting radius for rim

You can set the Radius of the rim in a pixel value.

<gauge:SfCircularGauge>
    <gauge:SfCircularGauge.Scales>
        <gauge:CircularScale Radius="100"
                             RimStroke="#39B2C6" RimStrokeThickness="8"
                             TickStroke="#BEBEBE" LabelStroke="#9E9E9E" SmallTickStroke="#BEBEBE">
            <gauge:CircularScale.Pointers>
                <gauge:CircularPointer NeedlePointerVisibility="Collapsed"/>
            </gauge:CircularScale.Pointers>
        </gauge:CircularScale>
    </gauge:SfCircularGauge.Scales>
</gauge:SfCircularGauge>
SfCircularGauge sfCircularGauge = new SfCircularGauge();
CircularScale circularScale = new CircularScale();
circularScale.RimStrokeThickness = 8;
circularScale.Radius = 100;
circularScale.RimStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x57, 0xb2, 0xc6));
circularScale.TickStroke = new SolidColorBrush(Color.FromArgb(0xff, 0xc1, 0xc1, 0xc1));
circularScale.SmallTickStroke = new SolidColorBrush(Color.FromArgb(0xff, 0xc1, 0xc1, 0xc1));
circularScale.LabelStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x99, 0x99, 0x99));
CircularPointer circularPointer = new CircularPointer();
circularPointer.NeedlePointerVisibility = Windows.UI.Xaml.Visibility.Collapsed;
circularScale.Pointers.Add(circularPointer);
sfCircularGauge.Scales.Add(circularScale);

UWP Radial Gauge rim radius