DrawnUI for .NET MAUI

📕 Documentation 👈

Replace native controls with a Skia Canvas! 🤩 On iOS, MacCatalyst, Android, Windows with hardware acceleration.

Rendering engine with a WPF-like like layout system, gestures and animations, powered by SkiaSharp.

• To use inside a usual MAUI app, consume drawn controls by wrapping inside Canvas views.
• To create a totally drawn app with just one Canvas as root view, use SkiaShell + SkiaViewSwitcher for navigation between screens with modals, popups, toasts etc.
• Drawn controls are totally virtual, no native views/handlers.
• Design in XAML or code-behind
• Free to use under the MIT license, a nuget package is available.

Current development state is ALPHA for prod.

🦸 Features

• Draw with helpers using SkiaSharp with hardware acceleration
• Create your own animated pixel-perfect controls
• Port existing native controls to be 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 canvas with familiar MAUI Shell techniques

🌱 What's new

• SkiaCheckBox/SkiaRadioButton to consume TAP gesture only
• OnGlobalUpdate will not invalidate scale/children

Please star ⭐ if you like it!

"No sealed code" policy library for creating and rendering custom UI

🎁 Shipped With

• Base drawn controls

  • SkiaControl Your lego brick to create anything
  • SkiaShape Path, Rectangle, Circle, Ellipse, Gauge etc, can wrap other elements to be clipped inside
  • SkiaLabel, multiline with many options like dropshadow, gradients etc
  • SkiaImage with many options and filters
  • SkiaSvg with many options
  • SkiaLayout (Absolute, Grid, Vertical stack, Horizontal stack, todo Masonry) with templates support
  • SkiaScroll (Horizontal, Vertical, Both) with header, footer, zoom support and adjustable inertia, bounce, snap and much more. Can act like a collectionview with custom refresh indicator, load more etc
  • SkiaHotspot to handle gestures in a lazy way
  • SkiaBackdrop to apply effects to background below, like blur etc
  • SkiaMauiElement to embed maui controls in your canvas

• Custom controls derived from base ones

  • SkiaRichLabel, will find an installed font for any unicode text and auto-create spans for markdown
  • SkiaButton include anything inside, text, images etc
  • SkiaRadioButton select something unique from options
  • SkiaSwitch to be able to toggle anything
  • SkiaProgress to show that your are actually doing something
  • SkiaSlider incuding range selection capability
  • SkiaLottie with tint customization
  • SkiaGif a dedicated lightweight GIF-player with playback properties
  • SkiaMediaImage a subclassed SkiaImage for displaying any kind of images (image/animated gif/more..)
  • SkiaCamera that day we draw it on the canvas has finally come
  • SkiaScrollLooped a subclassed SkiaScroll for neverending scrolls
  • SkiaDecoratedGrid to draw shapes between rows and columns
  • RefreshIndicator can use Lottie and anything as ActivityIndicator or for your scroll RefreshView
  • SkiaDrawer to swipe in and out your controls
  • SkiaCarousel swipe and slide controls inside a carousel
  • SkiaWheelPicker your iOS-look picker wheel
  • SkiaSpinner to test your luck
  • SkiaHoverMask to overlay a clipping shape
  • SkiaShell for navigation inside a drawn app
  • SkiaViewSwitcher switch your views, pop, push and slide
  • SkiaTabsSelector create top and bottom tabs
  • SkiaLabelFps for developement
  • Other we hidden deep but still public
  • Create your own!

• Animated Effects

  • Ripple
  • Shimmer
  • BlinkColors
  • Commit yours!

• Transforms

  • TranslationX
  • TranslationY
  • TranslationZ (none-affine)
  • ScaleX
  • ScaleY
  • Rotation
  • RotationX (none-affine)
  • RotationY (none-affine)
  • RotationZ (none-affine)
  • SkewX
  • SkewY
  • Perspective1
  • Perspective2

• Full keyboard support

‼️ Development Notes

• .NET 9 only, Maui.Controls 9.0.70 minimum.
• All files to be consumed (images etc) must be placed inside the MAUI app Resources/Raw folder, subfolders allowed. If you need to load from the native app folder use prefix "file://". Note that MAUI supports only lowercase filenames of resources and while uppercase might works for you on some plaforms they will not be read on iOS.
• Accessibility support is compatible and is on the roadmap.

📕 Documentation

Click here ☝️☝️☝️

---

🌱 What Was New Previously

• iOS images caching with ImageCaching.Nuke for urls

• Fix Android and Apple SKGLView not updating after view returned back to visible tree after being out of the tree. This is that case in MAUI when you navigate away from a page and when you return the canvas is either blank or frozen.

• Animation extensions for label and all controls: TextColorToAsync BackgroundColorToAsync

• Fixed SkiaCheckbox not triggering event

• Fluent OnTapped uses callback instead of effect, has second overload with gesture info

• Fixed SkiaLottie and other AnimateFramesRenderer not updating when Started

• Fixed rare crash in layout when ItemTemplate is null

• SkiaCacheType.ImageComposite implementation for Absolute layout

• Cache recycling improvements

• Added translation transforms for SkiaCacheType.ImageComposite dirty regions usage.

• Fix SkiaRichLabel spans invaldation when font changes for existing label

• Recycling cache/SkiaImage surfaces to reduce allocations

• General layout calculation performance boost

• Recycled cells stack MeasureVisible performance boost

• FirstVisibleIndex/LastVisibleIndex for stacks

• The nuget package DrawnUi.Maui replaces the old package Id, you can still use the old one kept for compatibility for some time.

• Docs, first appearence inside /docs! To teach LMs use /aidocs subfolder.

• Windows x64 doesn't require MSIX mode anymore, thanks to Tommi Gustafsson

• SkiaCamera inside DrawnUi.Maui.Camera: iOS, MacCatalyst, Windows, Android implementations.

• SkiaShape now can contain many Children instead of one Content. Plus fixes for stroke and other for pixel-perfect rendering.

• SkiaImage rescaling quality fix after for skia v3.

• SkiaScroll added additional mouse wheel support for scrolling on windows, added FirstVisibleIndex, LastVisibleIndex props

• Stack and absolute layouts now correctly apply one-directional Fill of children, might break some legacy UIs (or might not). Margins and Padding now work properly everywhere.

• Can override virtual OnMeasuring, while Measure is not virtual anymore to assure faster screen creation and avoid re-measurements when initializing for the first time.

• Performance and safety optimizations for accelerated rendering handlers (SkiaViewAccelerated:SKGLView) on all platforms.

• Windows accelerated handler is now synched with display when its refresh rate is >=120.

• Frame time interpolator adjustments for DrawnUi.Maui.Game.

• Many other silent fixes and new properties/features.

• Example apps updated to align with changes.