SkiaGum allows you to render Gum in any SkiaSharp canvas. This extends the ability to use Gum on any Skia platform including WPF, XamarinForms, and server backend. Note that if you include Skia elements in your project you may break runtime compatibility.

For example, as of April 2024, Skia objects cannot be used in MonoGame projects unless the project is a FlatRedBall project.

Adding SkiaGum WPF to a WPF Project

At the time of this writing, no nuget package exists for SkiaGum WPF. Instead, you must download the project and either produce your own .dlls or add the SkiaGum and SkiaGum.WPF projects to your solution.

Adding a GumSKElement

GumSKElement is the WPF object which can be added to your WPF views. It inherits from SKElement so it can be used as a regular skia canvas, but also includes additional functionality for Gum elements.

The following XAML shows how to add a GumSKElement to your view:

<Grid>
    <wpf1:GumSKElement x:Name="Canvas" PaintSurface="Canvas_PaintSurface"></wpf1:GumSKElement>
</Grid>

Note that this uses a PaintSurface event, but this is only required for custom painting of Skia objects. If your project uses only Gum objects, then a PaintSurface event is not needed.

Also, note that a Name is provided to the canvas so that it can be accessed in codebehind to add Gum objects.

Adding Gum Objects to GumSKElement

Once a GumSKElement has been created, any object inheriting from GraphicalUiElement can be added. SkiaGum provides the following objects out-of-the-box:

• ArcRuntime

• ColoredCircleRuntime

• ColoredRectangleRuntime

• PolygonRuntime

• RoundedRectangleRuntime

• SolidRectangleRuntime

• SpriteRuntime

• SvgRuntime

• TextRuntime

Furthermore, ContainerRuntime is provided as a container for other Skia objects.

The following code shows how to add a SolidRectangle:

var rectangle = new RoundedRectangleRuntime();
rectangle.Width = 100;
rectangle.Height = 150;
rectangle.Color = SKColors.Purple;
rectangle.CornerRadius = 10;
this.Canvas.Children.Add(rectangle);