The basics to create custom Xamarin.Forms controls using SkiaSharp

Konrad Müller
Jul 15 · 9 min read

Content

What is SkiaSharp?

SkiaSharp basics

Drawing

Sample chapes: Rounded rect, circle and square.
Drawing the Xamarin logo from SVG path data.

Paint

An arc with antialiasing enabled (red) compared to one without antialiasing (green).
Drawing the Xamarin logo using BlendModes to layer the shapes.

The coordinate system

Sample points to demonstrate the coordinate system in SkiaSharp: One circle in each corner, a centered square and an arc from 0° to 45°.

Manipulating the canvas

An arc from 0° to 45° after rotating the canvas by -90° (orange) compared to the same arc without a canvas rotation (red).

User input

Bindable properties, commands and events

Further reading

Konrad Müller

Written by

Software developer from germany.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade