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.

• 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

• Sandbox and Tutorial projects UI cache tuned for max fps
• SkiaButton uses Padding property for frame content, see Sandbox project Buttons example.
• Fix cache performance ImageDoubleBuffered, improved cache Image
• Fixed cache type OperationsFull, god mode that records a larger area than your control, to pick up glow, shadows etc, if you need to animate its destination cache one of the the parents so it uses its bounds instead of the top canvas.
• Some animated controls now have ImageDoubleBuffered set as default (lottie and similar)
• SkiaImage performance fix to avoid changing source when was created from same string with converter. Added retry logic for all platforms.
• IsLooped property implemented for SkiaCarousel (Sandbox project carousel example updated), for never-ending scrolls, also added SwipeSpeed property.
• Gestures property for Canvas has new value SoftLock for smart working together inside native ScrollView: You started your custom control panning (ex: SkiaCarousel) MAUI ScrollView will not scroll until you release. Note that using Lock value instead will totally prevent parent ScrollView to receive panning gestures. Using new AppoMobi.Maui.Gestures gestures nuget.
• SkiaLabel subpixel rendering quality improved, note it can be can turned off with Super.FontSubPixelRendering static property.
• Improved font auto-selection for unicode symbols on Android + Apple for SkiaRichLabel and related, all currency, Chinese etc symbols now properly displayed. Implemented platform agnostic caching for auto-find font.
• Fixed MinimumWidthRequest and MinimumHeightRequest not applying margins.
• Fixed animators sometimes not starting when created to early, including SkiaLottie one.
• Fixed SkiaScroll refresh mechanics, added refresh feature with SkiaLottie tinted indicator to News Feed Scroller tutorial code.

❓ Q: How to make images to Fade-In when loaded?

💡 A: Subclass SkiaImage to define your animation:

public class BannerImage : SkiaImage
{
    public override void OnSuccess(string source)
    {
        base.OnSuccess(source);

        this.Opacity = 0.01;
        _ = this.FadeToAsync(1, 300, Easing.SinIn);
    }
}

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.

Demo Projects:

• Tutorials Project - First steps, custom control, recycled cells scroller..
• Sandbox Project - Custom controls, camera, maps..
• Shaders Carousel - Using shaders for custom control
• Space Shooter - 2D Arcade Game Etude
• Engine Demo - Navigation and other

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!

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