How to create a WPF circular gauge (SfCircularGauge) range pointer with rounded corner edge
This article explains how to create a range pointer with rounded corner edge on both sides in WPF circular gauge (SfCircularGauge).
Previous UI is obtained by using the RangePointer and RangeCap in the CircularPointer along with the following steps:
Step1: Create an instance of SfCircularGauge.
Step 2: Added the CircularScale into the scales collection of radial gauge. CircularScale defines the radius, start angle, sweep direction, sweep angle, overall minimum and maximum values, frequency of labels, and tick marks.
Step 3: Added the CircularPointer to the Pointers collection of CircularScale.
Step 4: To obtain the rounded corner of range cap use the RangeCap property with Both. It is an Enum. It has following values:
Name | Description |
Both | Apply the range cap at the range pointer start and end position |
End | Apply the range cap at the range pointer end position |
None | Default value. No range cap applied. |
Start | Apply the range cap at the range pointer start position |
Step 5: Set the PointerType as RangePointer and customization of range pointer has been carried out by using the listed properties.; Here, describes about few used properties:
Property | Description |
RangePointerStrokeThickness | Thickness of the RangePointer of the CircularPointer. |
RangePointerStroke | Brush that describes the RangePointerStroke of the CircularPointer. |
[XAML]
<gauge:SfCircularGauge Height="360">
<gauge:SfCircularGauge.Scales>
<gauge:CircularScale x:Name="scale" SweepAngle="360" RimStroke="LightGray" RimStrokeThickness="30" RangePointerPosition="Custom">
<gauge:CircularScale.Pointers>
<gauge:CircularPointer PointerType="RangePointer" RangePointerStrokeThickness="30" RangeCap="Both" RangePointerStroke="DeepSkyBlue" Value="75"/>
</gauge:CircularScale.Pointers>
</gauge:CircularScale>
</gauge:SfCircularGauge.Scales>
</gauge:SfCircularGauge>
See also
How to customize the range pointer in WPF circular Gauge
How to set range cap for range pointer in WPF circular Gauge
How to set visibility for range pointer in WPF circular Gauge
How to set position for range pointer in WPF circular Gauge
