https://github.com/taublast/drawnui
Hardware-accelerated rendering engine for .NET MAUI built on top of SkiaSharp 🎨
https://github.com/taublast/drawnui
dotnetmaui dotnetmaui-animations draw drawnui gamedev graphics maui shaders skia skiasharp ui
Last synced: 3 months ago
JSON representation
Hardware-accelerated rendering engine for .NET MAUI built on top of SkiaSharp 🎨
- Host: GitHub
- URL: https://github.com/taublast/drawnui
- Owner: taublast
- License: mit
- Created: 2024-02-02T08:05:25.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2026-04-04T11:42:16.000Z (3 months ago)
- Last Synced: 2026-04-04T13:23:13.775Z (3 months ago)
- Topics: dotnetmaui, dotnetmaui-animations, draw, drawnui, gamedev, graphics, maui, shaders, skia, skiasharp, ui
- Language: C#
- Homepage: https://drawnui.net
- Size: 104 MB
- Stars: 373
- Watchers: 12
- Forks: 34
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# DrawnUI for .NET MAUI
[](https://github.com/taublast/drawnui/blob/master/CONTRIBUTING.md)
[Docs and Samples](https://drawnui.net) 👈
Rendering engine for .NET MAUI with gestures and animations and much more, powered by [SkiaSharp](https://github.com/mono/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](https://drawnui.net/articles/first-app-code.html)
* 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.2
* Optimized composite cache and added new `SkiaCacheType.ImageCompositeGPU` type.
* Fix memory leak for the `SkiaCacheType.ImageDoubleBuffered` flow.
* `SkiaCamera` auto-exposure fix for low light, record video on Android emulator and more.
* Various optimizations and fixes.
## 💡 Hint of the Day
**❓ Q: How to expand button hitbox?**
**💡 A:** Every drawn control can do that:
```csharp
public override SKRect CreateHitRect()
{
var ret = base.CreateHitRect();
ret.Inflate(10*RenderingScale, 10*RenderingScale);
return ret;
}
```
## 👍 Latest Showcase
* [SolTempo](https://github.com/taublast/SolTempo) - Audio Processing App with SKSL Shaders, read the [blog article](https://taublast.github.io/posts/SolTempo/).
---
## 👍 Latest Showcase
* [SolTempo](https://github.com/taublast/SolTempo) - Audio Processing App with SKSL Shaders, read the [blog article](https://taublast.github.io/posts/SolTempo/).
---
## Quick Start
Install the package:
```bash
dotnet add package DrawnUi.Maui
```
Initialize in `MauiProgram.cs`:
```csharp
builder.UseDrawnUi();
```
Use in XAML:
```xml
```
Need more performance? Set canvas `RenderingMode` to `Accelerated`.
See the [Getting Started Guide](https://drawnui.net/articles/getting-started.html) for details.
Do not miss the [Tutorials Project](https://github.com/taublast/DrawnUi.Maui/tree/main/src/Maui/Samples/Tutorials) on how to create your custom control, a recycled cells scroller and more.
---
## Sample Apps
**Demo Projects:**
- [Tutorials](https://github.com/taublast/DrawnUi/tree/main/src/Maui/Samples/Tutorials) - First steps, bindings, recycled cells
- [Sandbox Project](https://github.com/taublast/DrawnUi.Maui/tree/main/src/Maui/Samples/Sandbox) - Playground for custom controls, shaders, camera, maps etc
- [Engine Demo](https://github.com/taublast/AppoMobi.Maui.DrawnUi.Demo) - Navigation, recycled cells, camera integration
- [Shaders Carousel](https://github.com/taublast/ShadersCarousel/) - Advanced SkiaSharp v3 effects
- [Space Shooter](https://github.com/taublast/Maui.Game.SpaceShooter/) - 2D Arcade Game Etude
**Open-Source Published Apps:**
- [Filters Camera](https://github.com/taublast/ShadersCamera) - Real-time camera filters ([AppStore](https://apps.apple.com/us/app/filters-camera/id6749823005), [Google Play](https://play.google.com/store/apps/details?id=com.appomobi.drawnui.shaderscam))
- [Bricks Breaker](https://github.com/taublast/DrawnUi.Breakout) - 2D Arkanoid/Breakout arcade game ([AppStore](https://apps.apple.com/us/app/bricks-breaker/id6749823869), [Google Play](https://play.google.com/store/apps/details?id=com.appomobi.drawnui.breakout))
---
___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](https://drawnui.net/articles/faq.html) • [Ask Questions](https://github.com/taublast/DrawnUi/discussions)
---
[Documentation](https://drawnui.net) • [Tutorials](https://drawnui.net/articles/tutorials.html) • [Controls Reference](https://drawnui.net/articles/controls/index.html) Under development