Shiny.Controls.Office.Skia 1.2.0-beta-0013

Shiny Controls

A rich, ready-to-use UI controls library for both .NET MAUI and Blazor. One package per host covers TableView, DataGrid (with detail/breakdown rows and a TreeDataGrid hierarchy mode), TreeView, Scheduler, FloatingPanel/OverlayHost, DurationPicker, FrostedGlassView, Toast, Dialogs (owned, animated alert/confirm/prompt/action-sheet), Fab/FabMenu, ShinyToolbar/ShinyTabBar (Blazor), SplashScreen (Blazor), PillView, BadgeView, SecurityPin, PasswordStrength (a password field with a live strength meter, a rule checklist and a pluggable scorer), Captcha (Blazor — one component over a built-in local challenge plus reCAPTCHA, hCaptcha and Turnstile), SignaturePad, ShinyImage, ImageViewer, ImageEditor, MediaPickerButton, ChatView, ColorPicker, FontPicker, Slider, ProgressBar (with an animated, bidirectional fill), ProgressLine (the thin page-edge loading line, docked clear of the nav and tab bars and drivable from code), Overlay/LoadingOverlay, SkeletonView, Expander/Accordion (a disclosure panel whose fade, slide and height reveals combine and are aimed at any of the four edges, and the accordion list that coordinates a stack of them), AutoCompleteEntry, CountryPicker, AddressEntry, TextEntry, CarouselGallery, ParallaxCollectionView, StaggeredGrid, VirtualizedGrid, and StateView/Wizard (named branches switched by one string, and a multi-step flow built on them with a pointed progress bar, per-step validity gates and conditional steps). Walkthrough and Tooltip round that out: a guided tour that dims the page and cuts an animated spotlight around one control at a time — steps declared together in order, advancing on a command, on a tap of the highlighted control, or on a timer, with a RememberRunKey so onboarding runs once — and the themed tooltip bubble underneath it, which wraps its target or points at one, auto-flips to whichever side has room, and is drawn above the page so nothing can clip it. A Flyout — a side panel that slides in from either edge, rests as a narrow icon rail instead of a full panel, and either pushes the content aside or floats over it — replaces MAUI's FlyoutPage and, unlike it, works inside Shell. On MAUI there is also a ShinyNavigationPage — a real NavigationPage, with everything that implies, whose drawn bar carries toolbar items on the left as well as the right, plus an overflow menu, badges and an iOS-style collapsing large title. Blazor additionally gets layout primitives — VStack/HStack, a responsive Grid/Row/Column, and an AppLayout application shell whose left/right panels collapse to hidden, a toolbar rail or fully shown, drag-resize between a min and max, keep their own scroll regions, and can persist and auto-collapse when the shell gets narrow. Motion Icons — 42 animated icons that run on a timer, on hover, on tap or on command — ship in the core packages on both hosts. Sliders come in single-value (Slider) and two-thumb range (RangeSlider) flavors. Markdown, Mermaid Diagrams, Barcodes (1D + 2D, QR codes), Keyframe animation (declarative XAML timelines with seekable, reversible playback), and a cross-platform CameraView (preview, photo/video capture, a pluggable effects pipeline for colour/comic/sketch/blur looks, face masks and AI stylization, plus a pluggable frame-analysis pipeline for barcode/face/motion/OCR/structured-documents) ship as separate add-on packages per host, Office viewers and editors — a Spreadsheet (SpreadsheetView) that opens, renders and edits real .xlsx workbooks, with an optional formatting toolbar carrying the usual bold/italic/colour controls plus the spreadsheet-only ones: cell fill, number formats, decimal places, whole-column formatting and AutoSum, a .docx editor in two controls — DocumentEditor (the lone surface) and DocumentEditorView (the same plus formatting chrome), with spell check drawn from the platform's own dictionary on MAUI and replaceable on both hosts — a .pptx editor in two more — SlideEditor and SlideEditorView — where a click selects a shape to move or resize and a double-click puts a caret in its text, both editors sharing one gallery of twenty preset shapes plus tables, pictures and text highlighting, and both accepting an image dragged in from the desktop, plus read-only DocumentView (.docx, reflowed rather than paginated) and SlideView (.pptx, fitted artboards or a thumbnail grid, with placeholders resolved through layout and master) — a virtualized SkiaSharp grid shared verbatim by both hosts, over a document kernel with a transactional undo stack and a formula engine, editing the OOXML package surgically so an untouched workbook saves byte-identical — and a cross-platform MediaElement (local + remote audio/video with a themed, per-element-toggleable transport bar, background audio with OS lock-screen controls, and Picture-in-Picture) ship as separate add-on packages per host. Quick Entry — an assistant-style prompt popup (PromptView) summoned over whatever the user is looking at, with an optional Siri-style screen-edge glow — ships in the core packages on both hosts and works everywhere as an in-app overlay; on desktop it can instead open as a borderless always-on-top OS window over other applications, which is what the Shiny.Maui.Controls.Desktop add-on adds. That add-on also carries the desktop-only system tray / status-bar icon, Visual-Studio-style docking, global hotkeys (Windows, macOS AppKit, MacCatalyst, and Linux), and window-level file drop — files dragged from Finder / Explorer onto anywhere in the app window, including on top of a BlazorWebView, which MAUI's own DropGestureRecognizer cannot see; Blazor has the same service over the whole browser window in its core package. On the web there is no separate add-on: Blazor docking and the touch / kiosk on-screen keyboard both ship in the main Shiny.Blazor.Controls package.

Getting Started

.NET MAUI

dotnet add package Shiny.Maui.Controls

Register in your MauiProgram.cs:

var builder = MauiApp.CreateBuilder();
builder
    .UseMauiApp<App>()
    .UseShinyControls();

Add the XAML namespace:

xmlns:shiny="http://shiny.net/maui/controls"

For Markdown controls (separate package):

dotnet add package Shiny.Maui.Controls.Markdown

xmlns:md="http://shiny.net/maui/markdown"

For Mermaid Diagrams (separate package):

dotnet add package Shiny.Maui.Controls.MermaidDiagrams

xmlns:diagram="http://shiny.net/maui/diagrams"

For Barcodes & QR codes (separate package):

dotnet add package Shiny.Maui.Controls.Barcodes

xmlns:bc="http://shiny.net/maui/barcodes"

<bc:QRCodeView Value="https://shinylib.net" Size="300" />
<bc:BarcodeView Value="5901234123457" Format="Ean13" />

Supported formats: QR Code, Aztec, Data Matrix, PDF417, Code 128/39/93, Codabar, EAN-8/13, UPC-A/E, ITF. Output is rendered as PNG via a pure-managed encoder (no SkiaSharp / System.Drawing dependency). Need an SVG string? Call BarcodeRenderer.RenderSvg(...) directly.

For Keyframe animation (separate package):

dotnet add package Shiny.Maui.Controls.Keyframe

xmlns:kf="http://shiny.net/maui/keyframe"

For the CameraView (separate package — iOS, Android, Windows, macOS AppKit, Blazor):

dotnet add package Shiny.Maui.Controls.Camera

builder
    .UseShinyControls()
    .UseShinyCamera();

xmlns:cam="http://shiny.net/maui/camera"

<cam:CameraView Facing="Back" Filter="None" />

For the MediaElement (separate package — iOS, Android, Windows, macOS AppKit, Linux GTK4, Blazor):

dotnet add package Shiny.Maui.Controls.MediaElement

builder
    .UseShinyControls()
    .UseShinyMediaElement();

xmlns:media="http://shiny.net/maui/media"

<media:MediaElement Source="https://example.com/clip.mp4" AutoPlay="True" />

The full feature set — effects, analyzers, recording, orientation, AI — is in CameraView.

Blazor

dotnet add package Shiny.Blazor.Controls
dotnet add package Shiny.Blazor.Controls.Markdown       # optional
dotnet add package Shiny.Blazor.Controls.MermaidDiagrams # optional
dotnet add package Shiny.Blazor.Controls.Barcodes       # optional

Add the @using directives — typically in _Imports.razor:

@using Shiny.Blazor.Controls
@using Shiny.Blazor.Controls.Cells
@using Shiny.Blazor.Controls.Sections
@using Shiny.Blazor.Controls.Scheduler
@using Shiny.Blazor.Controls.Markdown
@using Shiny.Blazor.Controls.MermaidDiagrams
@using Shiny.Blazor.Controls.Barcodes
@using Shiny.Controls.Barcodes

Most controls need no DI registration at all — drop the component into any .razor page and its scoped CSS and JS module come along with it. A handful are driven by a service (Toast, Dialogs, the splash screen, the walkthrough store, Docking and the on-screen keyboard), and one call covers all of them, mirroring MAUI's UseShinyControls():

using Shiny.Blazor.Controls;

builder.Services.AddShinyControls();

With optional configuration, again shaped like the MAUI side:

builder.Services.AddShinyControls(cfg => cfg
    .ConfigureDialogs(o => o.DefaultAnimation = DialogAnimation.Zoom)
    .ConfigureKeyboard(o => o.HeightPx = 320)
    .UseHttpImageDownloader()                    // ShinyImage through your HttpClient (optional)
    .AddDockPanel<ExplorerPanel>("explorer", "Explorer", "📁")
);

Every individual AddShinyToast() / AddShinyDialogs() / AddShinySplashScreen() / AddShinyWalkthrough() / AddShinyDocking() / AddShinyOnScreenKeyboard() call still exists, and all registrations are TryAdd, so the two styles compose in either order. Register à la carte when you want to keep the WASM payload tight; to replace an implementation, use a SetCustom* method or register your own first — first registration wins.

All of these services are scoped, not singleton: they hold per-user UI state. Under WebAssembly the two lifetimes are identical, but on Blazor Server a singleton would show one user's toast, dialog or keyboard to every connected user.

MAUI → Blazor quick reference

ISchedulerEventProvider is identical across both hosts.

Controls

Every control has its own page under docs/controls/. Start with Styling & theming — implicit styles, what a theme pack changes beyond colour, and why appearance properties default to -1 rather than a real value.

Office

Collections & grids

Layout & overlays

Input

Display & media

Status & feedback

Guidance

Desktop