DrawnUI for .NET
👉 Official Site
DrawnUI is a rendering and UI composition engine for .NET, powered by SkiaSharp with gestures, layouts, effects and animations running with hardware acceleration.
🤩 Fiddle in browser 👈
Supported hosts:
DrawnUi.Maui - Android, iOS, MacCatalyst, and Windows.DrawnUi.Blazor.Wasm - browser WebAssembly rendering.DrawnUi.Blazor.Server - server-backed DrawnUI surfaces served by Blazor Server.DrawnUi.Web - pure browser WebAssembly, no Blazor required.DrawnUi.OpenTk - Windows and Linux desktops.DrawnUi.Wpf - drawn controls inside WPF windows.DrawnUi.Net - platform-agnostic console/server rendering scenarios.
React?
DrawnUI for React just appeared as a standalone DrawnUI engine in TypeScript, running on CanvasKit (Skia compiled to WebAssembly) in the browser. It tends to use same API as the .NET version.
Under active development, more info on our site.
How About Rust?
DrawnUI for Rust is the same engine in Rust, drawing with Skia on Windows, macOS, Linux, iOS, Android and in the browser. Same controls and rules as the .NET version, one crate to add (drawnui on crates.io), in preview. Try the demo at hellorust.drawnui.net, more info on our site.
Features
- Imagine your UI - a toolbox for creating drawn controls
- Harness the Canvas - engine handles everything
- Port existing native to drawn - easy port, bindings support
- Design in XAML, Razor + Canvas, 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
- Accessibility: screen readers (Narrator, TalkBack, VoiceOver, Orca, browser readers) and keyboard navigation on every platform
- Navigate on the canvas with shell-like techniques
😎 Blazor sample in browser 👈
Addons
- Create games:
DrawnUi.Maui.Game, DrawnUi.Blazor.Game, DrawnUi.Web.Game, DrawnUi.OpenTk.Game, DrawnUi.Wpf.Game.
- .NET MAUI only:
DrawnUi.MauiGraphics
- .NET MAUI only:
DrawnUi.Maui.MapsUi
- .NET MAUI only:
DrawnUi.Maui.Camera - Separate repo.
Resources
👉 Docs and Samples
🤖 AI skills
🤩 Fiddle
⛹️ Pong in pure WASM
What's New 1.10.8.5
- Masonry layout.
SkiaMasonry (LayoutType.Masonry) lays items of different heights in columns without gaps: every item goes to the bottom of the shortest column, like a photo feed. Set Split for the number of columns. It works with children and with ItemsSource: recycled cells, LoadMore pages that measure only the new items, items that grow after they are shown (an image arrives), ScrollToIndex, taps, and keyboard arrows that move to the tile on screen that way. See Layouts.
- Long lists scroll smoothly all the way. Templated lists of any length follow the mouse wheel and the touchpad row by row, in columns, grids (
Split) and SkiaWrap grids, down and back up. A cell that changes size after it is shown, any number of times, moves the cells below it.
- Horizontal lists and wraps. A templated
SkiaRow reports the items really on screen in FirstVisibleIndex / LastVisibleIndex and lays out with every MeasureItemsStrategy, MeasureVisible included. A templated SkiaWrap inside a scroll fires LoadMore at its end and arrives at ScrollToIndex.
- Steady animations and background caches. A GIF or Lottie playing while a list flings keeps its speed and the fling keeps its own, and
ImageDoubleBuffered caches render in the background without touching the frame being drawn.
- One slide per swipe. A
SkiaCarousel swipe lands on the next or the previous slide, however far the finger drags and however fast it flicks; ScrollTo and SelectedIndex still go anywhere.
- Images load after a fast fling. A page closed while its list still flings fast leaves image loading running for the rest of the app.
- Screen readers on every AndroidX version. On Android, the screen-reader bridge works with every
Xamarin.AndroidX.Core version an app resolves, including 1.19.
- Leaner Android package. On Android,
DrawnUi.Maui no longer brings the AppoMobi.Maui.Native.Android package; an app that uses its types references it directly.
Previously
- 3D depth and glass:
TranslationZ moves a control toward you or away from you (closer is bigger), also when it is not turned, and with RotationX / RotationY it turns cards and panels in 3D with perspective. Cached content stays smooth in 3D and under any rotated, scaled or skewed parent, and taps still reach the right control. A SkiaBackdrop in a scaled, moved, rotated or 3D-turned parent shows exactly what is behind it, and the log tells you once when it sits in a picture-cached SkiaShape (set UseCache = None on that shape for live glass). Changed behavior in 1.10.7.12: before, TranslationZ only changed the strength of the perspective.
- iOS and Mac Catalyst: pages and popups with a
Canvas close cleanly (#361); a finger tap on iOS 26 is a plain tap; native views inside a SkiaMauiElement (a MAUI Button, a TapGestureRecognizer, any UIView) complete their taps (#374). On Mac Catalyst an app that sets a desktop window size and declares a scene manifest becomes active smoothly. On every platform a SkiaMauiElement that starts hidden shows its native view when it becomes visible (#372).
- Scrolls, drawers, modals and carousels: a scroll that started panning keeps the finger until it lifts, also outside its bounds, and a control behind it never takes the gesture over. A second swipe on a moving
SkiaShaderCarousel moves one more slide and Stopped comes once, when it really stops; after a tap on a SkiaCarousel, IsUserFocused clears when the finger lifts. A scroll inside a drawer keeps its gesture, a short drag held still before lifting goes back, a drawer opened in the same moment it becomes visible stays open, and a drawer tapped while it moves finishes its move instead of stopping halfway. SnapVelocityThreshold sets how fast a release must be to count as a flick, for drawers and carousels. PopModalAsync closes any modal in the stack, also one hidden under another modal, and modals hidden under a modal that froze the background come back when it closes. A modal swiped away leaves the stack when the finger lifts, and the new ModalRemoved event comes when a modal is fully gone.
MIT | Free to use and customize
DrawnUI is built and maintained by Nick Kovalsky, who is available for commercial work: full mobile and desktop app development, custom controls, performance and rendering work, Xamarin → MAUI migrations, and support contracts. Get in touch via LinkedIn or taublast(at)gmail.com.
