> For the complete documentation index, see [llms.txt](https://docs.flatredball.com/gum/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.flatredball.com/gum/code/getting-started/setup/adding-initializing-gum/.net-maui.md). # .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 () Modify the csproj: ```xml ``` Or add through command line: ```bash dotnet add package Gum.SkiaSharp.Maui ``` {% hint style="info" %} 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. {% endhint %} ## 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: If you have already added the Gum NuGet package to your project, remove it. Add the following projects to your solution: * \/Runtimes/SkiaGumMaui/SkiaGum.Maui.csproj * \/SkiaGum/SkiaGum.csproj * \/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: ```xml ``` ## 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:

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: ```xml 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: ```xml ``` 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

--- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` GET https://docs.flatredball.com/gum/code/getting-started/setup/adding-initializing-gum/.net-maui.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.