Shiny.Controls.Keyframe.Shared 1.3.0-beta-0014

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), plus a TimelineView — a vertical rail of markers with arbitrary, self-sizing content beside each one, an active position (or all-active) driving which part of the rail is filled, and optional content on the far side of the rail. 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 — 111 animated icons that run on a timer, on hover, on tap or on command — ship in the core packages on both hosts, as does an Office-style Ribbon (tabs over titled command groups, with contextual tabs, split and menu buttons, a quick access row, a collapsing body, groups that fold into buttons when the window narrows, and a Simplified one-row mode for phones — which is what the ImageEditor's toolbar is built from). 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, a OneNote-style free-form Notebook in two more — NotebookEditor and NotebookEditorView — an unbounded scrolling page you can write anywhere on, draw over with a pressure-sensitive pen, highlighter, point-or-stroke eraser and lasso, and fill with the same shapes, pictures and rich text as the other editors, organised into sections and pages and saved to a .shinynote zip, 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