How to customize a needle pointer knob in WPF radial gauge (SfCircularGauge)

6 mins read

This article explains how to customize a needle pointer knob in Syncfusion WPF SfCircularGauge control as shown in the following imagebelow.

Needle pointer knob customization

To construct the previousabove UI, follow these following steps:

Step 1:

Initialize the WPF Circular gauge as shownper in the following code sample.below

[XAML]

       <syncfusion:SfCircularGauge >
       </syncfusion:SfCircularGauge>

Step 2:

You can customize the needle pointer knob size, fill, stroke, and stroke thickness by using the KnobRadiusFactor, KnobFill, KnobStroke, and KnobStrokeThickness properties.

KnobRadiusFactor	Used to customize the knob radius.
KnobFill	Used to fill the color for the knob.
KnobStroke	Used to customize the knob stroke color.
KnobStrokeThickness	Used to change the knob stroke thickness.

[XAML]

        <syncfusion:SfCircularGauge >
            <syncfusion:SfCircularGauge.Scales>
                <syncfusion:CircularScale  ShowRim="False"  LabelPosition="Outside" TickPosition="Outside" FontSize="10" FontWeight="SemiBold" RadiusFactor="0.7" Interval="10" ShowFirstLabel="False" MinorTicksPerInterval="2" TickLength="20"  StartAngle="90" SweepAngle="360" StartValue="0" EndValue="100"  >
                    <syncfusion:CircularScale.Pointers>
                        <syncfusion:CircularPointer NeedlePointerType="Triangle"  NeedlePointerStroke="#39b2c6" KnobRadiusFactor="0.2" KnobStroke="LightPink" KnobStrokeThickness="6" KnobFill="#39b2c6" NeedlePointerStrokeThickness="25" NeedleLengthFactor="0.8" Value="50"/>
                    </syncfusion:CircularScale.Pointers>
                    <syncfusion:CircularScale.MajorTickSettings>
                        <syncfusion:MajorTickSetting Stroke="#c1c1c1" StrokeThickness="1"  Offset="0.5"  Length="20"/>
                    </syncfusion:CircularScale.MajorTickSettings>
                    <syncfusion:CircularScale.MinorTickSettings>
                        <syncfusion:MinorTickSetting Stroke="#c1c1c1" StrokeThickness="2" Offset="0.5" Length="8"/>
                    </syncfusion:CircularScale.MinorTickSettings>
                </syncfusion:CircularScale>
                </syncfusion:SfCircularGauge.Scales>
            </syncfusion:SfCircularGauge>

View the sample in GitHub.

How to customize a needle pointer knob in WPF radial gauge (SfCircularGauge)

See also

Access denied