DrawnUI for .NET MAUI

Docs and Samples 👈

Rendering engine for .NET MAUI with gestures and animations and much more, powered by SkiaSharp.

Supports iOS, MacCatalyst, Android, Windows with hardware acceleration.

• To use inside a usual MAUI app, by wrapping drawn controls into Canvas views.
• To create a totally drawn apps with just one Canvas as root view.
• Drawn controls are totally virtual, no native views/handlers.
• Design in XAML or code-behind
• Free to use under the MIT license, nuget package available.

Features

• Create visuals totally matching designer's image, no more compromises with native controls
• Use virtual controls to draw your UI
• Create your own animated pixel-perfect controls
• Port existing native controls to drawn
• Design in XAML or code-behind
• 2D and 3D Transforms
• Visual effects for every control, filters and shaders
• Animations targeting max FPS
• Caching system for faster re-drawing
• Optimized for performance, rendering only visible elements, recycling templates etc
• Gestures support for anything, panning, scrolling, zooming etc
• Keyboard support, track any key
• Navigate on the canvas with MAUI Shell-like techniques

To Note

• Still targeting .NET9 library: entry controls not fully compatible with .NET10.

---

🆕 What's new for 1.9.7.4

• SKSL helper improvements: concurrent cache, error callbacks for static creation methods.

💡 Hint of the Day

❓ Q: How to expand button hitbox?

💡 A: Every drawn control can do that:

public override SKRect CreateHitRect()
{
    var ret = base.CreateHitRect();
    ret.Inflate(10*RenderingScale, 10*RenderingScale);
    return ret;
}

👍 Latest Showcase

• SolTempo - Audio Processing App with SKSL Shaders, read the blog article.

---

Quick Start

Install the package:

dotnet add package DrawnUi.Maui

Initialize in MauiProgram.cs:

builder.UseDrawnUi();

Use in XAML:

<ContentPage xmlns:draw="http://schemas.appomobi.com/drawnUi/2023/draw">
    <draw:Canvas Gestures="Enabled">
        <draw:SkiaLayout Type="Column" Spacing="16" Padding="32">
            <draw:SkiaLabel Text="Hello DrawnUI" FontSize="24" />
            <draw:SkiaButton Text="Click Me" Tapped="OnButtonClicked" />
        </draw:SkiaLayout>
    </draw:Canvas>
</ContentPage>

Need more performance? Set canvas RenderingMode to Accelerated.

See the Getting Started Guide for details.

Do not miss the Tutorials Project on how to create your custom control, a recycled cells scroller and more.

---

Sample Apps

Demo Projects:

• Tutorials - First steps, bindings, recycled cells
• Sandbox Project - Playground for custom controls, shaders, camera, maps etc
• Engine Demo - Navigation, recycled cells, camera integration
• Shaders Carousel - Advanced SkiaSharp v3 effects
• Space Shooter - 2D Arcade Game Etude

Open-Source Published Apps:

• Filters Camera - Real-time camera filters (AppStore, Google Play)
• Bricks Breaker - 2D Arkanoid/Breakout arcade game (AppStore, Google Play)

---

Please star ⭐ if you like it!

FAQ

Q: What is the difference between DrawnUi and other drawn frameworks?
A: It is not a framework but a library for .NET MAUI, to make creating drawn UI easy for everyone.

Q: Why use DrawnUI instead of native controls?
A: Gives you complete control over rendering and appearance and can be much more performant for complex UIs.

Q: Do I need to know SkiaSharp?
A: No. Use the prebuilt controls and customize them. All controls are designed to be subclassed and most methods are virtual.

Q: Can I use XAML/code-behind?
A: Yes, both XAML and code-behind are supported.

Q: Can I embed native MAUI controls?
A: Yes, use SkiaMauiElement to wrap native controls like WebView inside your drawn UI.

Q: Can I embed drawn controls into my usual MAUI app?
A: Yes, use Canvas to wrap drawn controls inside your MAUI UI.

Full FAQ • Ask Questions

---

Documentation • Tutorials • Controls Reference Under development