.NET MAUI

Introduction

This page assumes you have an existing .NET MAUI project. This can be a new or existing project.

Adding Gum NuGet package

The easiest way to add Gum to your project is to use the NuGet package. Open your project in your preferred IDE, or add Gum through the command line.

Add the Gum.SkiaSharp.Maui NuGet package (https://www.nuget.org/packages/Gum.SkiaSharp.Maui)

Modify the csproj:

<PackageReference Include="Gum.SkiaSharp.Maui" Version="*"/>

Or add through command line:

dotnet add package Gum.SkiaSharp.Maui

As of June 25, 2025 Gum.SkiaSharp.Maui requires Maui version 9.0.70 or newer. You may need to update your version of Microsoft.Maui.Controls to this version or newer.

Adding Source (Optional)

You can directly link your project to source instead of a NuGet package for improved debuggability, access to fixes and features before NuGet packages are published, or if you are interested in contributing.

To add source, first clone the Gum repository: https://github.com/vchelaru/Gum

If you have already added the Gum NuGet package to your project, remove it.

Add the following projects to your solution:

• <Gum Root>/Runtimes/SkiaGumMaui/SkiaGum.Maui.csproj
• <Gum Root>/SkiaGum/SkiaGum.csproj
• <GumRoot>/GumCommon/GumCommon.csproj

Next, add SkiaGum.Maui as a project reference in your game project. Your project might look like this depending on the location of the Gum repository relative to your game project:

<ProjectReference Include="..\Gum\Runtimes\SkiaGumMaui\SkiaGum.Maui.csproj" />

Initializing Gum and SkiaSharp

Gum in .NET MAUI requires SkiaSharp. If you haven't already set up SkiaSharp for your project, add .UseSkiaSharp() to your Builder. For more information see the SkiaSharp setup: https://learn.microsoft.com/en-us/samples/dotnet/maui-samples/skiasharpmaui-demos/

using SkiaSharp.Views.Maui.Controls.Hosting;

public static class MauiProgram
{
    public static MauiApp CreateMauiApp()
    {
        var builder = MauiApp.CreateBuilder();
        builder
            .UseMauiApp<App>()
            .UseSkiaSharp()
            .ConfigureFonts(fonts =>
            {
                fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
                fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
            });

#if DEBUG
	builder.Logging.AddDebug();
#endif

        var density = (float)DeviceDisplay.Current.MainDisplayInfo.Density;
        // Windows can report a density of 0:
        if(density > 0)
        {
            SkiaGum.Maui.SkiaGumCanvasView.GlobalScale = density;
        }

        // optionally, set the font scale:
#if WINDOWS
        var uiSettings = new Windows.UI.ViewManagement.UISettings();
        SkiaGum.Text.GlobalTextScale = (decimal)uiSettings.TextScaleFactor;
        // Add additional platforms here...
#endif

        return builder.Build();
    }
}

Adding Circle and Text (Testing the Setup)

You can add SkiaGumCanvasView instances to any page or component. SkiaGumCanvasView is a view which inherits from SKCanvasView, but allows adding of Gum runtime elements. To add a SkiaGumCanvasView:

1. Open the .xaml file for an existing view or component
2. Add the following namespace to your page or view:

   xmlns:SkiaGum="clr-namespace:SkiaGum.Maui;assembly=SkiaGum.Maui"

3. Add the following to a container, such as to a Grid. Note that the xaml specifies a Name so that code-behind can access the canvas to add objects to it:

   <SkiaGum:SkiaGumCanvasView 
       WidthRequest="200" 
       HeightRequest="200" 
       x:Name="SkiaGumCanvasView"/>

4. Add the following in your C# (code-behind) for the given page or component, such as in the page's constructor:

   public MainPage()
   {
       InitializeComponent();
   
       // Creates a circle:
       var circle = new ColoredCircleRuntime();
       circle.Color = SKColors.Red;
       circle.Width = 200;
       circle.Height = 200;
       // Adds it so it is drawn
       SkiaGumCanvasView.AddChild(circle);
       
       var text = new TextRuntime();
       text.Text = "SkiaGum in .NET MAUI!";
       text.Dock(Gum.Wireframe.Dock.Top);
       SkiaGumCanvasView.AddChild(text);
           
       // Tells the canvas to refresh itself, so the circle appears
       SkiaGumCanvasView.InvalidateSurface();
   }
   

5. Add the following to your C# (code-behind) to dispose all cached paints when navigating away from the page:

   protected override void OnNavigatedFrom(NavigatedFromEventArgs args)
   {
       base.OnNavigatedFrom(args);
   
       SkiaGumCanvasView.Dispose();
   }

You should now have a red circle on screen.

Red ColoredCircleRuntime and blue TextRuntime