How to drag the (symbol & needle) pointers in the WPF circular gauge?
This article explains how to drag the both symbol and needle pointer in the Syncfusion WPF CircularGauge control. It has been achieved by setting the EnableDragging property as true.
How to drag the symbol pointer
To obtain the same behavior, please follow the following code sample.
[XAML]
<gauge:SfCircularGauge >
<gauge:SfCircularGauge.Scales >
<gauge:CircularScale LabelPosition="Custom" Grid.Row="1"
RimStroke="LightGray"
RadiusFactor="1" ShowTicks="False"
RimStrokeThickness="30"
StartValue="0" EndValue="100" Interval="10"
LabelOffset="0.75" LabelStroke="Black" FontSize="15">
<gauge:CircularScale.Ranges>
<gauge:CircularRange StrokeThickness="30" StartValue="0"
x:Name="range" EndValue="25"
Stroke="DeepSkyBlue"/>
</gauge:CircularScale.Ranges>
<gauge:CircularScale.Pointers>
<gauge:CircularPointer PointerType="SymbolPointer"
Symbol="InvertedTriangle"
SymbolPointerHeight="18" SymbolPointerWidth="18"
ValueChanged="CircularPointer_ValueChanged"
SymbolPointerStroke= “DeepSkyBlue" Value="25"
EnableAnimation="False" EnableDragging="True"/>
</gauge:CircularScale.Pointers>
</gauge:CircularScale>
</gauge:SfCircularGauge.Scales>
</gauge:SfCircularGauge>
How to drag the needle pointer
To construct the previous UI along with their dragging animation, please refer the following code sample.
[XAML]
<gauge:SfCircularGauge >
<gauge:SfCircularGauge.Scales >
<gauge:CircularScale LabelPosition="Custom" Grid.Row="1"
RimStroke="LightGray"
RadiusFactor="1" ShowTicks="False"
RimStrokeThickness="30"
StartValue="0" EndValue="100" Interval="10"
LabelOffset="0.75" LabelStroke="Black" FontSize="15">
<gauge:CircularScale.Ranges>
<gauge:CircularRange StrokeThickness="30" StartValue="0"
x:Name="range" EndValue="25"
Stroke="DeepSkyBlue"/>
</gauge:CircularScale.Ranges>
<gauge:CircularScale.Pointers>
<gauge:CircularPointer PointerType="NeedlePointer" NeedlePointerType="Triangle" Value="25"
NeedlePointerStroke="DeepSkyBlue" PointerCapDiameter="25" KnobStroke="DeepSkyBlue" KnobFill="DeepSkyBlue"
NeedleLengthFactor="0.7" NeedlePointerStrokeThickness="15" ValueChanged="CircularPointer_ValueChanged" EnableDragging="True"/>
</gauge:CircularScale.Pointers>
</gauge:CircularScale>
</gauge:SfCircularGauge.Scales>
</gauge:SfCircularGauge>
[C#]
private void CircularPointer_ValueChanged(object sender, ValueChangedEventArgs e)
{
range.EndValue = e.Value;
}
See also
How to customize the needle
pointer in WPF SfCircularGauge
How to customize the range
pointer in WPF SfCircularGauge
How to customize the symbol
pointer in WPF SfCircularGauge
How to set the animation for
pointer in WPF SfCircularGauge
How to set the multiple pointers
in WPF SfCircularGauge
Conclusion
I hope you enjoyed learning about how to drag the (symbol & needle) pointers in the WPF circular gauge.
You can refer to our WPF Circular Gauge feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
