Category / Section
How to enable dragging support for pointer in Xamarin.Forms Circular Gauge?
1 min read
This article explains the steps required to enable dragging support for pointer in the gauge.
MarkerPointer and NeedlePointer can be touched and dragged by setting the EnableDragging property to true. Pointers can be moved to the respective touch position.
XAML:
<gauge:Scale.Pointers> <gauge:MarkerPointer MarkerShape="Image" Value="4" ImageSource="image1.png" EnableDragging="True" MarkerWidth="60" MarkerHeight="60" > <gauge:MarkerPointer.Offset> <OnPlatform x:TypeArguments="x:Double" iOS="0.92" Android="0.95" /> </gauge:MarkerPointer.Offset> </gauge:MarkerPointer> <gauge:MarkerPointer MarkerShape="Image" Value="30" ImageSource="image2.png" EnableDragging="True" MarkerWidth="60" MarkerHeight="60" > <gauge:MarkerPointer.Offset> <OnPlatform x:TypeArguments="x:Double" iOS="0.9" Android="0.95" /> </gauge:MarkerPointer.Offset> </gauge:MarkerPointer> <gauge:MarkerPointer MarkerShape="Image" Value="70" ImageSource="image3.png" EnableDragging="True" MarkerWidth="60" MarkerHeight="60"> <gauge:MarkerPointer.Offset> <OnPlatform x:TypeArguments="x:Double" iOS="0.9" Android="0.95" /> </gauge:MarkerPointer.Offset> </gauge:MarkerPointer> </gauge:Scale.Pointers>
Screenshot:
The following screenshot illustrates the Gauge with Pointers in which touch and drag can be done.
Please find the complete sample for the above document in this Link.
