This Sample one contains the Circular percentage view drawing using Skiasharp.
I have seen that there are some controls available but they have licence and not free.
Hence I came up with this option and designed accordingly
Steps:
1) Create the Xamarin forms project with PCL, .iOS and .Droid Modules.
2) Add the NuGet package by searching with SkiaSharp.Views.Forms package and add it to your solution. If you check the References section of each project after adding SkiaSharp, you can see that various SkiaSharp libraries have been added to each of the projects in the solution.
If your Xamarin.Forms application targets iOS, use the project properties page to change the minimum deployment target to iOS 8.0.
3) Crete the Xaml Page and add the Below code
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:CircularPercentageSample"
xmlns:skia="clrnamespace:SkiaSharp.Views.Forms;assembly=SkiaSharp.Views.Forms"
x:Class="CircularPercentageSample.MainPage">
<Grid Grid.Row="0">
<skia:SKCanvasView x:Name="canvasView"
PaintSurface="OnCanvasViewPaintSurface" />
<StackLayout HorizontalOptions="Center" VerticalOptions="Center">
<Label Text="50%" TextColor="Black"/>
</StackLayout>
</Grid>
</ContentPage>
4) In Code behind Class add the below code
public partial class MainPage: ContentPage
{
public MainPage()
{
InitializeComponent();
}
SKPaint outlinePaint = new SKPaint
{
Style = SKPaintStyle.Stroke,
StrokeWidth = 15,
Color = SKColors.Gray
};
SKPaint arcPaint = new SKPaint
{
Style = SKPaintStyle.Stroke,
StrokeWidth = 15,
Color = SKColors.Blue
};
void sliderValueChanged(object sender, ValueChangedEventArgs args)
{
if (canvasView != null)
{
canvasView.InvalidateSurface();
}
}
void OnCanvasViewPaintSurface(object sender, SKPaintSurfaceEventArgs args)
{
SKImageInfo info = args.Info;
SKSurface surface = args.Surface;
SKCanvas canvas = surface.Canvas;
canvas.Clear();
SKRect rect = new SKRect(100, 100, info.Width - 100, info.Height - 100);
canvas.DrawOval(rect, outlinePaint);
using (SKPath path = new SKPath())
{
path.AddArc(rect, 270, 90);
canvas.DrawPath(path, arcPaint);
}
}
}
5) Set the MainPage as CirclePageSample and select the target application and launch.
This will show the Circular percentage representation in the Page.
Thank you,
