How to create the directional compass UI with the WPF circular gauge (SfCircularGauge)
This KB article describes how to create the directional compass UI with the Syncfusion WPF SfCircularGauge control as shown in the following image.
Following these steps to achieve the directional compass UI with a circular gauge:
Step 1: Create the circular gauge with the following customization options in both Scale and Pointers to get a similar view as shown in the above image.
Properties to customize the scale | Usage |
Decides the position of labels in the CircularScale. Here, we have to manually provide the label in LabelCreated event. So, set to custom. | |
To avoid the start and end value overlapping, set it to false. | |
To get the complete circular, set it to 360. |
Properties to customize the CircularPointer | Usage |
To obtain the needle type, set the NeedlePointer as a PointerType. | |
Here, the knob color has been set to white. | |
Brush of the needle pointer. Here, set red for one and another one is dark blue. | |
Defines the type of needle pointer. It includes the following options.
|
[XAML]
<gauge:SfCircularGauge SpacingMargin="0.7">
<gauge:SfCircularGauge.Scales>
<gauge:CircularScale StartAngle="270" SweepAngle="360" ShowLastLabel="False" TickPosition="Custom"
LabelOffset="0.75" RimStroke="#EDEEEF" Interval="1" RimStrokeThickness="0"
StartValue="0" EndValue="8" TickStrokeThickness="2" RimStartOffset="1" RimEndOffset="0.9"
FontSize="18" FontWeight="SemiBold" LabelPosition="Custom" RangePosition="Custom"
MinorTicksPerInterval="1" LabelCreated="CircularScale_LabelCreated">
<gauge:CircularScale.MinorTickSettings>
<gauge:MinorTickSetting StrokeThickness="1" Offset="0.9" ></gauge:MinorTickSetting>
</gauge:CircularScale.MinorTickSettings>
<gauge:CircularScale.MajorTickSettings>
<gauge:MajorTickSetting StrokeThickness="1" Offset="0.9" ></gauge:MajorTickSetting>
</gauge:CircularScale.MajorTickSettings>
<gauge:CircularScale.Pointers>
<gauge:CircularPointerCollection>
<gauge:CircularPointer PointerType="NeedlePointer" KnobFill="White" Value="7"
NeedlePointerStroke="Red" NeedlePointerStrokeThickness="35" EnableAnimation="False"
NeedlePointerType="Triangle" NeedleLengthFactor="0.6"
></gauge:CircularPointer>
<gauge:CircularPointer PointerType="NeedlePointer" KnobFill="White"
NeedlePointerType="Triangle" KnobRadiusFactor="0.1"
NeedlePointerStroke="DarkBlue" NeedleLengthFactor="0.6" EnableAnimation="False"
NeedlePointerStrokeThickness="35" Value="3">
</gauge:CircularPointer>
</gauge:CircularPointerCollection>
</gauge:CircularScale.Pointers>
</gauge:CircularScale>
</gauge:SfCircularGauge.Scales>
</gauge:SfCircularGauge>
Step 2: You can change the default label by hooking the LabelCreated event. The labels can be changed by using the LabelText property of LabelCreatedEventArgs.
[C#]
private void CircularScale_LabelCreated(object sender, LabelCreatedEventArgs args)
{
switch ((string)args.LabelText)
{
case "0":
args.LabelText = "N";
break;
case "1":
args.LabelText = "NE";
break;
case "2":
args.LabelText = "E";
break;
case "3":
args.LabelText = "SE";
break;
case "4":
args.LabelText = "S";
break;
case "5":
args.LabelText = "SW";
break;
case "6":
args.LabelText = "W";
break;
case "7":
args.LabelText = "NW";
break;
}
}
See also
How to add different types of needle pointer in WPF circular Gauge
How to customize the needle pointer in WPF circular Gauge
How to customize the needle pointer knob in WPF circular Gauge
How to set visibility for needle pointer in WPF circular Gauge
How to set tail for needle pointer in WPF circular Gauge
