SkiaSharp.Forms.Xaml

Xaml extensions for SkiaSharp

Examples

Getting started

• Install the SkiaSharp.Forms.Xaml package

Install-PackageSkiaSharp.Forms.Xaml -Version 1.1.0-pre

• Add SkiaSharp and xaml extensions namespace to your Xaml page/view

        xmlns:skia="clr-namespace:SkiaSharp.Views.Forms;assembly=SkiaSharp.Views.Forms"
        xmlns:skiaXaml="clr-namespace:SkiaSharp.Forms.Xaml;assembly=SkiaSharp.Forms.Xaml"

• Insert your SKCanvasView

    <skia:SKCanvasView>
    </skia:SKCanvasView>

• Create a renderer

        <skia:SKCanvasView>
        <skiaXaml:DrawSurface.Renderer>
            <skiaXaml:RendererSource>

            </skiaXaml:RendererSource>
        </skiaXaml:DrawSurface.Renderer>
    </skia:SKCanvasView>

• Insert your draws

    <skia:SKCanvasView>
        <skiaXaml:DrawSurface.Renderer>
            <skiaXaml:RendererSource>
                <skiaXaml:Clear/>

                <skiaXaml:Rectangle X="{Binding PositionX}"
                                    Y="{Binding PositionY}"
                                    Width="{Binding Width}"
                                    Height="{Binding Height}"
                                    Color="Blue"/>
                        
                <skiaXaml:Circle CenterX="{Binding PositionX}"
                                    CenterY="{Binding PositionY}"
                                    Radius="{Binding Radius}"
                                    StrokeWidth="{Binding StrokeWidth}"
                                    Color="Red" Style="Stroke"/>


            </skiaXaml:RendererSource>
        </skiaXaml:DrawSurface.Renderer>
    </skia:SKCanvasView>

Draw Support

Draw	Xaml Support
Rectangle	✅
Circle	✅
Text	✅
Path	✅