DOCSEARCHbyAlgolia
Submit Docs

DrawnUI Documentation

repository·main·Indexed 19 days ago

https://github.com/drawnui/drawnui.net

A high-performance rendering and UI composition engine for .NET built on SkiaSharp. DrawnUI enables the creation of hardware-accelerated user interfaces across multiple platforms, including MAUI (Android, iOS, MacCatalyst, Windows), Blazor (WASM and Server), OpenTK (Windows, Linux), and headless server environments via DrawnUi.Net.

Tokens
183.2K
Snippets
455
Records
694
Agent score
61%

What's inside DrawnUI

  2. Overview of Available Tutorials

    main

    DrawnUI provides several specific tutorials to demonstrate different capabilities of the framework:

    TutorialFocus AreasKey Components/Concepts
    First AppBasicsCanvas, SkiaLayout, SkiaLabel, SkiaButton
    Interactive CardsVisual EffectsGradients, shadows, animations, touch handling
    Custom Drawn ControlAdvanced UIBindable properties, bevel effects, accessory images (GIFs)
    News Feed ScrollerPerformanceCell recycling, pull-to-refresh, MVVM, infinite scroll

    Each tutorial is available in both XAML and C# Fluent versions where applicable.

  3. Overview of DrawnUI for .NET

    main

    DrawnUI is a hardware-accelerated, rich UI rendering engine for the .NET ecosystem. It is powered by SkiaSharp and is designed to provide high-performance graphics across various platforms.

    Key characteristics include:

    • Hardware Acceleration: Leverages GPU capabilities via SkiaSharp for smooth rendering.
    • Cross-Platform: Supports a wide range of .NET targets including .NET MAUI, Blazor, WebAssembly (Wasm), OpenTK, and pure .NET environments.
    • Creative Freedom: Designed to allow developers to build highly custom, performant, and visually rich user interfaces that go beyond standard platform controls.

  4. Overview of DrawnUi.Net

    main

    DrawnUi.Net is a platform-agnostic target for the DrawnUI ecosystem. It allows developers to develop, debug, and validate shared DrawnUI rendering logic without requiring a framework-specific host like .NET MAUI or Blazor.

    Use Cases

    • Server-side rendering: Use DrawnUI layouts on a server to generate images or PDFs.
    • Logic Debugging: Debug shared drawing and layout logic without a full platform UI stack.
    • Offscreen Validation: Validate text layout, selection, and cursor rendering offscreen.
    • Repro Harnesses: Build small reproduction harnesses for controls that reside in shared code.
    • Predictable Testing: Test rendering behavior using predictable, non-native input sequences.

    Limitations

    Do not rely on DrawnUi.Net for validating behaviors that depend on native OS services, such as:

    • Soft keyboard / IME behavior
    • Native selection updates
    • Platform focus handling
    • OS-specific text editing quirks

  5. Choose the right DrawnUI package for your target platform

    main

    DrawnUI provides different packages depending on your host environment and rendering requirements. Use the following guide to select the best fit:

    TargetMain packageBest fit
    MAUI (Android/iOS/Mac/Windows)DrawnUi.MauiNative cross-platform apps, rich gestures, and animation-heavy experiences.
    Blazor WebAssemblyDrawnUi.Blazor.WasmLocal browser rendering, high-fps, and canvas-like UI within a Blazor app.
    Blazor ServerDrawnUi.Blazor.ServerEvent-driven widgets and dashboards hosted in Blazor Server or InteractiveServer apps.
    Pure WebAssemblyDrawnUi.WasmStandalone web apps/games with no Blazor, using only [JSImport]/[JSExport] interop.
    OpenTK (Windows/Linux)DrawnUi.OpenTk.GameFast, small-sized desktop apps or OpenGL overlays.
    Platform-agnostic .NETDrawnUi.NetHeadless rendering, server-side generation (PDF/Images), or shared-logic debugging.

  6. Review Published DrawnUI Applications

    main

    Several production-ready or published apps demonstrate the framework's architecture:

    • Bricks Breaker: An arcade game using a single Canvas root with drawn dialogs and specialized game mechanics helpers.
    • Filters Camera: A camera application using a single Canvas root and MAUI popups for settings. It utilizes SkiaCamera and SKSL shaders for real-time filtering.
    • SolTempo: A music tool for real-time pitch and BPM/tempo detection. The entire app is drawn on a single DrawnUI Canvas and uses SKSL shaders for visual effects.

  7. Explore Advanced DrawnUi Topics

    main

    The Advanced Topics documentation provides deep dives into high-performance and specialized features of DrawnUi. Key areas include:

    • Architecture & Performance: Layout system internals, caching strategies (including ImageComposite and resource management), accessibility (noting Blazor overlay limitations), platform-specific styling, and recycled cells for large lists.
    • Visuals & Interaction: Implementing gradients, using SkiaScroll for advanced virtualization, and handling complex touch gestures.
    • Specialized Use Cases: Guidance on building Game UI and interactive game interfaces.

    For implementation details, refer to the specific sub-topic guides or the source code examples in the Sandbox project.

  8. Use the DrawnUi .NET Headless Harness for testing

    main

    The drawnui-net-harness allows for pure managed, headless testing of DrawnUi controls without a window, device, or GPU. It renders to an offscreen SkiaSharp surface using a deterministic synthetic clock. This is ideal for unit tests and reproducing layout, scroll, or virtualization bugs (like SkiaScroll or SkiaLayout issues) in a fast, scriptable environment.

    Key Capabilities:

    • Render frames on a synthetic clock.
    • Simulate real gestures via a GestureRobot.
    • Inspect UI structure and pixels.
    • Detect blank or empty renders.
    • Reproduce virtualization bugs using VirtualizationProbe.
    dotnet run --project src/Net/Samples/VirtualizationHarnessDemo/VirtualizationHarnessDemo.csproj -c Debug

  9. Overview of Layouts in DrawnUI

    main
    DrawnUI uses the SkiaLayout class as the foundation for organizing and positioning UI elements. Layouts can either auto-size to their content or take explicit dimensions using WidthRequest and HeightRequest. Positioning and sizing within layouts are controlled via properties similar to WPF and MAUI, specifically HorizontalOptions, VerticalOptions, and Margin.

  10. What is DrawnUI and how does it work?

    main

    DrawnUI is a rendering engine for .NET built on top of SkiaSharp. Unlike traditional UI stacks that rely on native platform widgets, DrawnUI renders everything directly to SkiaSharp-powered surfaces. This provides pixel-perfect control and cross-platform consistency.

    Core Architecture

    • SkiaSharp Foundation: Uses Google's Skia graphics engine for high-performance 2D rendering.
    • Canvas-Based Layout: A custom system that positions and sizes controls on hardware-accelerated surfaces.
    • Gesture Engine: A multi-touch recognition system for complex interactions.
    • Animation Pipeline: GPU-accelerated animations with intelligent caching.
    • Virtual Controls: A lightweight control system that avoids the overhead of native platform widgets.

  11. Choosing the right Blazor runtime for DrawnUI

    main

    DrawnUI provides two distinct Blazor runtimes depending on your application's performance and interaction requirements.

    Use DrawnUi.Blazor.Wasm when:

    • You are building an animation-heavy surface.
    • You require gesture-heavy canvas UI (e.g., complex drawing or manipulation).
    • You want the rendering and interaction to stay local to the client to avoid latency.

    Use DrawnUi.Blazor.Server when:

    • You want to integrate a Drawn widget into an existing Blazor Server page.
    • You are building an event-driven dashboard or inspector where lower-frequency updates are acceptable.
    • You want to leverage server-rendered frames that integrate with your existing server app flow.

    Mixed Scenarios:

    In a Mixed Blazor Web App, you can choose the runtime per component boundary, allowing you to use WASM for high-performance canvas areas and Server for standard UI components.

    | Scenario | Best runtime today | Why |
| --- | --- | --- |
| Animation-heavy surface | `DrawnUi.Blazor.Wasm` | Rendering and interaction stay local |
| Gesture-heavy canvas UI | `DrawnUi.Blazor.Wasm` | Avoids server round-trips for visual response |
| Drawn widget inside a Blazor Server page | `DrawnUi.Blazor.Server` | Integrates naturally with existing server app flow |
| Event-driven dashboard or inspector | `DrawnUi.Blazor.Server` | Server-rendered frames are acceptable for lower-frequency updates |
| One app needs both models | Mixed Blazor Web App | Runtime can be chosen per component boundary |

  12. Use Layout Aliases for common layouts

    main

    Instead of configuring SkiaLayout with a specific Type property, you can use these convenience alias classes which come pre-configured (and typically default to HorizontalOptions="Fill"):

    • SkiaStack: Vertical stack (Type="Column")
    • SkiaRow: Horizontal stack (Type="Row")
    • SkiaWrap: Responsive wrapping (Type="Wrap")
    • SkiaLayer: Absolute positioning (Type="Absolute")
    • SkiaGrid: Grid layout (Type="Grid")