|
This article explains how to drag the both symbol and needle pointer in the Syncfusion WPF SfCircularGauge control. It has been achieved by setting the EnableDragging property as true.
How to drag the symbol pointer
[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
|
2X faster development
The ultimate WPF UI toolkit to boost your development speed.
This page will automatically be redirected to the sign-in page in 10 seconds.
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.
