In previous post on Xamarin, we saw How to create Gradient Background using SkiaSharp Library. In this post we will see how to create different shapes using SkiaSharp library in Xamarin Forms. We will create circle, rectangle, a line and a Arc for our application. For introduction, SkiaSharp is a 2D graphic open sourced library by Google which is being used in many of their projects. In Xamarin forms, it can be used by installing from SkiaSharp.Views.Forms Nuget package manager.
In this example, I have installed SkiaSharp library and using it from code behind. On the XAML design page, I have a StackLayout on which I’m adding SKCanvasView from code behind. I have four buttons on my form to create a particular shape.
Shapes.xaml:
<?xml version="1.0" encoding="utf-8" ?> <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" Title="Xamarin Forms SkiaSharp Shapes" x:Class="XamSkiaSharp.Shapes"> <ContentPage.Content> <Grid HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" BackgroundColor="#fff"> <Grid.RowDefinitions> <RowDefinition Height="2*"/> <RowDefinition Height="8*"/> </Grid.RowDefinitions> <StackLayout Orientation="Horizontal" VerticalOptions="Start" HorizontalOptions="FillAndExpand" Grid.Column="0" Grid.Row="0"> <Button Text="Circle" x:Name="btnCircle" Clicked="btnShape_Clicked" CommandParameter="Circle" Margin="2,0,0,0"/> <Button Text="Rect" x:Name="btnRect" Clicked="btnShape_Clicked" CommandParameter="Rect" Margin="2,0,0,0"/> <Button Text="Line" x:Name="btnLine" Clicked="btnShape_Clicked" CommandParameter="Line" Margin="2,0,0,0"/> <Button Text="Arc" x:Name="btnArc" Clicked="btnShape_Clicked" CommandParameter="Arc" Margin="2,0,0,0"/> </StackLayout> <StackLayout Orientation="Vertical" Grid.Column="0" Grid.Row="1" Margin="2" BackgroundColor="#fff" x:Name="myStack"/> </Grid> </ContentPage.Content> </ContentPage>
On Button click event of each button I’m calling the same method and passing different command parameter and accordingly calling the respective function.
private void btnShape_Clicked(object sender, EventArgs e)
{
try
{
var button = (Button)sender;
SKCanvasView view = new SKCanvasView();
view.HorizontalOptions = LayoutOptions.FillAndExpand;
view.VerticalOptions = LayoutOptions.FillAndExpand;
switch (button.CommandParameter.ToString())
{
case "Circle":
view.PaintSurface += draw_Circle;
break;
case "Rect":
view.PaintSurface += draw_Rect;
break;
case "Line":
view.PaintSurface += draw_Line;
break;
case "Arc":
view.PaintSurface += draw_Arc;
break;
}
myStack.Children.Clear();
myStack.Children.Add(view);
}
catch (Exception ex)
{
}
}
A SkiaSharp canvas view is created on which the shape will be presented. On PaintSurface event a function is called.
Creating Circle using SkiaSharp on Xamarin forms:
public void draw_Circle(object sender, SKPaintSurfaceEventArgs args)
{
try
{
SKImageInfo info = args.Info;
SKSurface surface = args.Surface;
SKCanvas canvas = surface.Canvas;
canvas.Clear();
using (SKPaint paint = new SKPaint())
{
paint.Style = SKPaintStyle.Stroke;
paint.Color = Color.FromHex("#cb2dec").ToSKColor();
paint.StrokeWidth = 25;
canvas.DrawCircle(new SKPoint(530, 550), 500, paint);
}
}
catch (Exception ex)
{
}
}
Using SKPaint object I’m here creating a Circle shape. The Canvas.DrawCircle method accepts (X-Coordinate, Y-Coordinate,Radius, Paint object). I’m using SKPoint(x,y) for this. The paint object also accepts gradient property which we will see in a bit. You can create a bordered-Circle, Circle which is filled or both using paint.Style.
paint.Style = SKPaintStyle.Stroke; paint.Style = SKPaintStyle.Fill; paint.Style = SKPaintStyle.StrokeAndFill;
Any one of the above can be used.
Creating a Line using SkiaSharp on Xamarin forms:
public void draw_Line(object sender, SKPaintSurfaceEventArgs args)
{
try
{
SKImageInfo info = args.Info;
SKSurface surface = args.Surface;
SKCanvas canvas = surface.Canvas;
canvas.Clear();
using (SKPaint paint = new SKPaint())
{
paint.Style = SKPaintStyle.Stroke;
paint.Color = Color.FromHex("#ef292f").ToSKColor();
paint.StrokeWidth = 20;
canvas.DrawLine(new SKPoint(50, 50), new SKPoint(1000, 1000), paint);
}
}
catch (Exception ex)
{
}
}
The SKCanvas.DrawLine method accepts (SKPoint1 – Starting point,SKPoint2 -Second point, paint object).
Draw a Rectangle:
public void draw_Rect(object sender, SKPaintSurfaceEventArgs args)
{
try
{
SKImageInfo info = args.Info;
SKSurface surface = args.Surface;
SKCanvas canvas = surface.Canvas;
canvas.Clear();
using (SKPaint paint = new SKPaint())
{
SKRect rect = new SKRect(0, 0, info.Width, info.Height);
paint.Shader = SKShader.CreateLinearGradient(
new SKPoint(rect.Left, rect.Top),
new SKPoint(rect.Right, rect.Bottom),
new SKColor[] { new SKColor(255, 215, 35), SKColor.Parse("#ff235a") },
new float[] { 0, 1 },
SKShaderTileMode.Repeat);
canvas.DrawRect(rect, paint);
}
}
catch (Exception ex)
{
}
}
This will create a gradient filled Rectangle shape on the screen.
Draw an Arc using SkiaSharp:
public void draw_Arc(object sender, SKPaintSurfaceEventArgs args)
{
try
{
SKImageInfo info = args.Info;
SKSurface surface = args.Surface;
SKCanvas canvas = surface.Canvas;
canvas.Clear();
using (SKPaint paint = new SKPaint())
{
SKRect rect = new SKRect(10, 10, info.Width-5, info.Height-5);
paint.Style = SKPaintStyle.Stroke;
paint.StrokeWidth = 20;
paint.Color = Color.FromHex("#ef292f").ToSKColor();
paint.Shader = SKShader.CreateLinearGradient(
new SKPoint(rect.Left, rect.Top),
new SKPoint(rect.Right, rect.Bottom),
new SKColor[] { new SKColor(0, 168, 255), new SKColor(255, 0, 255) },
new float[] { 0, 1 },
SKShaderTileMode.Repeat);
canvas.DrawArc(rect, 180, 180, true, paint);
}
}
catch (Exception ex)
{
}
}
This way you can create different Shapes in Xamarin forms app using SkiaSharp library. There are many options which you can explore from the internet. You can download source code for free from the link below:
For more post related to Xamarin forms please see:
Xamarin Forms Creating Gradient background using SkiaSharp
Xamarin Forms Creating Buttons with Icons
Xamarin Forms using Camera and Saving Images to Gallery
Xamarin Forms Using Google Maps