DrawnUi.Slint.Net 0.1.0-preview.1

DrawnUI for Slint .NET (community)

DrawnUi.Slint.Net hosts DrawnUI canvases, from the DrawnUi.Net package, in the windows of an app built on the community Slint .NET bindings: the yurkinh.slint.net package, built from yurkinh/slint. Slint has not released .NET bindings of its own; this project is not made or endorsed by Slint (SixtyFPS GmbH). Our code is MIT; an app that uses it also takes on Slint's license, see Licensing. A Slint UI and DrawnUI controls share a window: a DrawnUiView element shows a canvas, and passes its size, mouse, wheel, and keyboard input to it.

Use It

Reference the package, and the Slint .NET bindings, whose build files generate the classes of the app's .slint files:

<ItemGroup>
  <PackageReference Include="DrawnUi.Slint.Net" Version="..." />
  <PackageReference Include="yurkinh.slint.net" Version="1.19.0-preview.10" />
  <SlintFile Include="ui/main.slint" />
</ItemGroup>

The package brings drawnui.slint: the app's .slint files import it by name, and the build copies it to the output. Import the view, and export its DrawnUiHost global from the main .slint file:

import { DrawnUiView } from "drawnui.slint";
export { DrawnUiHost } from "drawnui.slint";

export component MainWindow inherits Window {
    DrawnUiView { view-id: 0; }
}

Attach a canvas to each view by its view-id, on the Slint thread:

using var window = MainWindow.Create();
using var host = SlintCanvasHost.Attach(window.Instance, viewId: 0);
host.Canvas.Content = new SkiaStack
{
    Children = new List<SkiaControl> { new SkiaButton("Tap me") { Clicked = (me, args) => window.Title = "Tapped" } },
};
window.Run();

Pass a canvas of your own to Attach, such as Pong's RescalingCanvas, to use a Canvas subclass. Register fonts and styles with Super.UseDrawnUi(), as on the other .NET heads.

The samples in this repository reference the library's project instead, and import DrawnUi/buildTransitive/DrawnUi.Slint.Net.props and .targets, which a package reference imports by itself.

How It Works

The canvas draws when it asks for a frame (DrawnView.FrameRequested), at most once a display period, and the view shows the frame as an image. Nothing runs on a timer: an idle canvas draws no frame and costs no CPU, an animation draws at the display's rate.

• By default, the canvas draws into a raster surface, whose pixels the view shows, with any Slint renderer.

• With SlintCanvasHost.UseGpu = true and Slint's FemtoVG renderer on OpenGL, it draws with Skia on that context instead, into a texture that the view shows without copying pixels:

  new Slint.BackendSelector().RendererName("femtovg").RequireOpenGL().Select();
  SlintCanvasHost.UseGpu = true;
  

  Not with Slint's Skia renderer, its default on the desktop and Android: it keeps its own Skia state of the context, which a second Skia on that context breaks, and the window shows nothing.

SlintCanvasHost.IsGpu tells which path a view takes. On an Apple Silicon Mac, a frame of 1168×403 pixels takes about 1.5 ms of the CPU on the GPU path, and 1.8 ms on the raster path; on an Android emulator at a scale of 2.625, the raster path takes about 2.6 ms a frame.

Platforms

The macOS desktop, Android, and iOS run the sample, with the same scenes and .slint file, see Samples/. On Android and iOS, Slint's platform starts the app: create the window and attach the hosts in SlintActivity.SlintMain, or in the Main that calls Run on iOS.

Input

• The mouse: every button, with the right button's release as the context-menu request, hover, and leaving the view.
• Touch: a finger's taps and drags, such as to scroll a list.
• The wheel, at 120 units a notch, horizontal on a touchpad's dominant axis.
• The keyboard: text and the editor keys for a focused SkiaEditor, OnKeyDown / OnKeyUp events, and KeyboardManager, while the view has the focus: after a click or tap, view.focus() in Slint, or a window's forward-focus: view from the start.
• An input method, such as a phone's on-screen keyboard, writes into a hidden Slint TextInput that takes the focus while a DrawnUI editor has it; key presses still go to DrawnUI first. On Android, the keyboard opens for the editor; its text reaching the editor is still to be checked by hand.

SlintCanvasHost.SaveWindow saves the whole window, as Slint renders it, from the OpenGL framebuffer, for tests.

Samples

Run them from the repository's root.

• Samples/HelloSlintNet: the DrawnUI Hello app, the same pages as on the other heads in one window-filling view: recycled cells, Lottie, shaders, the editor, the shell, tooltips and menus, Pong, and more.
• Samples/SlintEmbed: two views next to a Slint header: a button whose taps reach the Slint UI, an editor, cards that light up on hover, and a ball that the arrow keys move. SlintEmbed.Android and SlintEmbed.iOS run the same scenes and .slint file on phones.
• Samples/SlintGallery: a Slint sidebar that opens the Hello app's pages in a DrawnUI view next to it: recycled cells, Lottie, shaders, the editor, the shell, and more.
• Samples/SlintPong: the shared Pong game in a whole window, with the keyboard from the start.

dotnet run --project Samples/HelloSlintNet

DRAWNUI_GPU=1 selects Slint's FemtoVG renderer on OpenGL, for the GPU path; HelloSlintNet and SlintGallery take it by default, and DRAWNUI_GPU=0 keeps it on the raster path. DRAWNUI_SELFTEST=<directory> runs a sample as a test: it sends window events, as a user's mouse and keyboard would, saves frames as PNG files, and quits.

Games

The DrawnUi.Net.Game package brings DrawnGame, the game base of the other heads, with its loop and keyboard input. A game can fill the window, or share it with a Slint UI.

<img src="screenshots/pong.jpg" alt="Pong in a Slint window" width="240" />

Licensing

The code in this repository is under the MIT License, like DrawnUI.

An app built with it also uses Slint, through the community .NET bindings (yurkinh.slint.net), and those come under Slint's own licenses, not ours. As of November 2026, Slint can be used under any one of these, at the app author's choice:

• GNU GPLv3: for open-source apps, on desktop, mobile, web and embedded. The whole app then has to be under GPL-compatible terms; MIT code, such as this repository's, can be part of it.
• Slint Royalty-free License 2.0: for proprietary desktop, mobile and web apps, at no cost, as long as the app shows that it uses Slint, for example with the AboutSlint widget or the Slint badge. It does not cover embedded systems.
• Slint commercial license: for proprietary apps without that disclosure, and required for embedded systems.

This is a summary to help you find your way, not legal advice, and Slint's terms can change. The terms that apply are the ones in Slint's LICENSE.md and its licenses folder; see also slint.dev for the commercial plans. The yurkinh.slint.net package carries the same Slint license file.

DrawnUI itself (DrawnUi.Net) and SkiaSharp are MIT.