We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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).

 

RangePointer_RangeCap

 

 

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>

 

View the sample in GitHub.

 

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

 

2X faster development

The ultimate WPF UI toolkit to boost your development speed.
ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile