--- name: shiny-controls description: Generate UI for .NET MAUI (Shiny.Maui.Controls) and Blazor (Shiny.Blazor.Controls) - includes TableView with 14 cell types, TreeView with lazy loading, drag/drop reorder (above/below/into), and configurable expand/collapse icons, FloatingPanel/OverlayHost/ShinyContentPage (bottom/top overlay panels) with detents and header peek, ShinyDurationPicker (duration picker with FloatingPanel), FrostedGlassView (native blur/glass effect), Toast service (code-invoked toast notifications with queue/stack, auto-dismiss, spinner, progress bar, pill/fill modes), PillView status badges, BadgeView (content-wrapping corner badge with text/dot/count overflow and pulse), ImageViewer with pinch/pan/double-tap zoom, ImageEditor with crop/rotate/draw/text/undo/redo/export, ChatView with bubbles/typing/load-more/input-bar and custom MessageTemplate/MessageTemplateSelector for per-message rendering, SecurityPin entry, Fab and FabMenu (floating action button and expanding action menu), Scheduler views (calendar grid, agenda timeline, event list), Markdown controls (MarkdownView renderer, MarkdownEditor with toolbar), Barcodes & QR codes (separate Shiny.Maui.Controls.Barcodes / Shiny.Blazor.Controls.Barcodes packages — BarcodeView and QRCodeView with 13 symbologies including QR, Aztec, Data Matrix, PDF417, Code 128/39/93, Codabar, EAN-8/13, UPC-A/E, ITF — pure-managed ZXing.Net renderer, PNG output via built-in encoder on MAUI, SVG or PNG data-URI on Blazor, with a static BarcodeRenderer for raw bytes / SVG / data-URI from code), AutoCompleteEntry with debounced search and dropdown suggestions, CountryPicker with flag/dial code, AddressEntry with geocoding, SignaturePad for capturing signatures with canvas drawing and PNG export, TextEntry with animated floating placeholder/customizable border/tool slots/validation hints/character count, Slider with two-color gradient track and blended thumb, ProgressBar with gradient fill and Vista-style shimmer pulse sweep, ParallaxCollectionView (MAUI) / ParallaxList (Blazor) — a scrollable list with a hero header that translates at a configurable fraction of the scroll offset, with optional collapse-to-sticky and fade, Overlay/LoadingOverlay (full-screen overlay with configurable color/opacity, custom content template, and built-in loading mode with indeterminate spinner or determinate progress bar), SkeletonView (content-wrapping skeleton loader that shows animated shimmer placeholders while IsBusy is true, with built-in line placeholders or a custom placeholder template), Desktop add-on (separate Shiny.Maui.Controls.Desktop package) combining Tray Icon (cross-platform system tray / status-bar icon with context menus, click events, tooltips, and dynamic visibility on Windows/macOS AppKit/MacCatalyst/Linux), Docking (Visual-Studio-style dockable tool windows, tabbed groups, splitters, auto-hide rails, and tear-off floating windows), and an On-Screen Keyboard (touch / kiosk QWERTY soft keyboard with shift / numbers / symbols layers, bottom-docked auto-show on focus, dispatches into focused inputs without stealing focus, full a11y tree for switch input); companion Shiny.Blazor.Controls.Kiosk for Blazor packages docking + on-screen keyboard under one kiosk-shaped Blazor add-on, Feedback Service (extensible IFeedbackService with haptic default, replaceable with TTS/sound/analytics), and UseFeedback support across all interactive controls auto_invoke: true triggers: - tableview - table view - settings page - settings view - settingsview - treeview - tree view - tree control - hierarchical view - hierarchy - file browser - folder browser - folder picker - directory tree - lazy load tree - expandable list - nested list - tree node - org chart - blazor treeview - blazor tree view - sheet view - sheetview - bottom sheet - bottomsheet - floating panel - floatingpanel - overlay host - overlayhost - shiny content page - shinycontentpage - pill - badge - status badge - scheduler - calendar - agenda - event list - calendar view - timeline - image viewer - imageviewer - image zoom - pinch to zoom - photo viewer - image editor - imageeditor - image editing - crop image - draw on image - annotate image - image annotation - photo editor - markdown - markdown view - markdown editor - markdown preview - rich text - security pin - securitypin - pin code - pin entry - otp - one time password - pin control - fab - floating action button - floating button - fab menu - fabmenu - speed dial - action menu - action button - shiny blazor controls - blazor tableview - blazor sheetview - blazor bottomsheet - blazor floating panel - blazor fab - blazor pillview - blazor imageviewer - blazor imageeditor - blazor securitypin - blazor scheduler - blazor markdown - blazor mermaid - autocomplete - auto complete - autocompleteentry - auto complete entry - search input - typeahead - type ahead - country picker - countrypicker - country selector - country search - address entry - addressentry - address search - address lookup - geocoding - geocode - blazor autocomplete - blazor country picker - blazor address entry - chat - chatview - chat view - chat bubbles - messaging - chat control - typing indicator - blazor chatview - signature pad - signaturepad - signature - signature capture - sign here - e-signature - esignature - draw signature - blazor signaturepad - blazor signature - text entry - textentry - text field - text input - material entry - floating placeholder - floating label - blazor textentry - blazor text entry - stepper - stepper tool - textentrystepper - gradient slider - gradientslider - slider - range slider - temperature slider - blazor slider - blazor gradient slider - duration picker - durationpicker - shinydurationpicker - frosted glass - frostedglass - glass effect - blur effect - acrylic - backdrop blur - glassmorphism - chat template - message template - chat button - action message - toast - toast notification - toast service - snackbar - show toast - blazor toast - feedback service - ifeedbackservice - haptic - haptic feedback - custom feedback - usefeedback - progress bar - progressbar - progress indicator - loading bar - gradient progress - shimmer - vista progress - blazor progressbar - gradient slider - gradientslider - range slider - temperature slider - blazor gradient slider - overlay - loading overlay - loadingoverlay - busy overlay - spinner overlay - progress overlay - blazor overlay - carousel - carousel gallery - carouselgallery - netflix carousel - horizontal scroll - snap carousel - staggered grid - staggeredgrid - masonry - waterfall layout - pinterest grid - pinterest layout - virtualized grid - virtualizedgrid - grouped grid - sticky headers - load more - parallax - parallax collection view - parallaxcollectionview - parallax list - parallaxlist - parallax header - parallax scroll - hero header - collapsing header - sticky header collapse - blazor carousel - blazor staggered grid - blazor virtualized grid - blazor parallax - skeleton - skeleton loader - skeleton view - skeletonview - shimmer - shimmer loading - shimmer placeholder - loading placeholder - content placeholder - placeholder loading - badgeview - badge view - notification badge - notification dot - count badge - unread badge - unread count - inbox badge - cart badge - corner badge - blazor badge - blazor badgeview - tray icon - trayicon - system tray - system tray icon - status bar icon - status bar app - menu bar icon - menu bar app - menubar - notification area - taskbar icon - shell_notifyicon - notifyicon - nsstatusitem - nsstatusbar - app indicator - appindicator - libappindicator - libayatana-appindicator - statusnotifieritem - desktop tray - maui desktop tray - background app - tray menu - tray context menu - docking - dock host - dockhost - dockable - tool window - tool windows - tabbed panel - tabbed group - dock panel - dockpanel - visual studio docking - visual studio layout - vs docking - tear off - tear-off - floating window - floating panel docking - splitter - dock splitter - auto-hide rail - auto-hide panel - blazor docking - on-screen keyboard - onscreen keyboard - on screen keyboard - osk - virtual keyboard - soft keyboard - software keyboard - touch keyboard - kiosk keyboard - tablet keyboard - touchscreen keyboard - touch-screen keyboard - blazor keyboard - maui keyboard - bottom docked keyboard - qwerty - qwerty keyboard - kiosk mode - barcode - barcodes - barcode view - barcodeview - qr code - qrcode - qr code view - qrcodeview - qr generator - barcode generator - barcode renderer - ean - ean-13 - ean13 - upc - upc-a - upca - code128 - code 128 - code39 - code 39 - code93 - pdf417 - aztec - data matrix - datamatrix - codabar - itf - itf-14 - zxing - render barcode - generate qr - generate qr code - blazor barcode - blazor qr code - blazor qrcode references: - tableview.md - treeview.md - floating-panel.md - pillview.md - image-viewer.md - image-editor.md - chatview.md - security-pin.md - fab.md - markdown.md - scheduler.md - autocomplete.md - country-picker.md - address-entry.md - signature-pad.md - pickers.md - frosted-glass.md - toast.md - textentry.md - slider.md - progressbar.md - overlay.md - skeleton.md - badge.md - tray-icon.md - docking.md - onscreen-keyboard.md - barcodes.md - feedback-service.md --- # Shiny Controls Skill You are an expert in the Shiny Controls library, which ships a single shared control surface across two hosts: - **.NET MAUI** — `Shiny.Maui.Controls` (plus `Shiny.Maui.Controls.Markdown`, `Shiny.Maui.Controls.MermaidDiagrams`) - **Blazor** — `Shiny.Blazor.Controls` (plus `Shiny.Blazor.Controls.Markdown`, `Shiny.Blazor.Controls.MermaidDiagrams`) Every control below is available on **both** MAUI and Blazor. The feature set (properties, events, behavior) is intentionally mirrored — the same concepts apply on either host; only the syntax differs (XAML + `BindableProperty` on MAUI, Razor markup + `[Parameter]` on Blazor). The library contains: - **TableView**: A pure MAUI settings-style TableView with 14 cell types, cascading styles, sections, drag-sort reordering, and full MVVM/binding support - **TreeView**: Hierarchical tree with lazy-loaded branches (`ChildrenLoader` for per-node async, `RootLoader` for async root), `ChildrenSelector` for sync data, `HasChildrenSelector`/`CanExpandSelector`/`CanSelectSelector` predicates, configurable `ExpandedIcon`/`CollapsedIcon`/`RetryIcon` (ImageSource on MAUI, RenderFragment slots on Blazor), single/multi selection with two-way `SelectedItem`/`SelectedItems`, events + ICommand mirrors for `ItemSelected`/`ItemExpanded`/`ItemCollapsed`/`LoadFailed`/`ItemDropped`, indent + guide lines, drag/drop reorder with above/below/into drop positions and visual drop indicators (event-only — never mutates your data; native HTML5 drag via JS interop on Blazor for Safari/Firefox support, pan-gesture fallback on Catalyst/AppKit/GTK4), programmatic API (`ExpandAll`/`ExpandAllAsync`/`CollapseAll`/`Expand`/`Collapse`/`Refresh`/`ReloadAsync` with state preservation/`FindNode`), and keyboard navigation on Blazor - **FloatingPanel + OverlayHost**: A floating panel overlay system (MAUI only). Panels slide from bottom or top with configurable detents, header peek when closed, backdrop dimming, and feedback. Multiple panels coexist without blocking touches. Use with `OverlayHost` (manual Grid setup) or `ShinyContentPage` (convenience ContentPage with built-in overlay). Blazor uses `SheetView` with CSS-based overlays instead - **PillView**: A status badge/label control with 6 preset themes, custom colors, and WCAG-accessible contrast - **BadgeView**: A content-wrapping overlay that pins a small badge to one of the four corners (`TopLeft`/`TopRight`/`BottomLeft`/`BottomRight`) of a wrapped view. Setting `Text` to an empty string auto-hides the badge — bind your unread/count value directly. Supports configurable `BadgeColor`/`BadgeTextColor`/`BadgeBorderColor`/`BadgeBorderThickness`, `IsDot` mode for simple notification indicators, `MaxCount` numeric overflow rendering ("99+"), per-corner `OffsetX`/`OffsetY` nudge (default hangs the badge slightly outside the corner), scale-in/out animation (`IsAnimated`), and optional continuous `IsPulsing` to draw attention. Blazor honors `prefers-reduced-motion` - **ImageViewer**: A full-screen image overlay with pinch-to-zoom, pan when zoomed, double-tap to toggle zoom, animated open/close, and a close button - **ImageEditor**: An inline image editor with cropping (drag-handle selection with dimmed overlay), rotation, freehand drawing with color, text annotations, undo/redo, reset, and export to PNG/JPEG/WEBP at configurable resolutions - **ChatView**: A modern chat UI with message bubbles, per-participant colors and avatars, visual grouping by sender/minute, typing indicators, virtualized message list with load-more, auto-link detection, image messages, and a bottom input bar with send/attach - **SecurityPin**: A PIN/OTP entry control with individual cells, configurable length, keyboard, and optional character masking - **Fab**: A Material-style floating action button with Icon, Text, Command, custom colors, border, and shadow - **FabMenu**: A floating action menu with an expanding, animated child `FabMenuItem` stack and two-way `IsOpen` - **SchedulerCalendarView**: Monthly calendar grid with swipe navigation, event display, and pinch-to-zoom - **SchedulerAgendaView**: Day/multi-day timeline (`DaysToShow` 1–7) with overlap detection, switchable date picker modes (`DatePickerMode`: Carousel / Calendar / None), additional timezone columns, auto-updating current time marker, and 12/24-hour time — full feature parity on MAUI and Blazor - **SchedulerCalendarListView**: Vertically scrolling event list grouped by day with infinite scroll and sticky day headers (`StickyDayHeaders`, default true, pins the current day header while scrolling) - **MarkdownView**: A read-only markdown renderer that converts markdown text to native MAUI controls with theming and link handling - **MarkdownEditor**: A markdown editor with formatting toolbar, live preview toggle, and customizable toolbar items - **BarcodeView / QRCodeView** (separate `Shiny.Maui.Controls.Barcodes` / `Shiny.Blazor.Controls.Barcodes` packages): Pure-managed barcode rendering powered by ZXing.Net. Supports 13 symbologies (`QRCode`, `Aztec`, `DataMatrix`, `Pdf417`, `Code128`, `Code39`, `Code93`, `Codabar`, `Ean8`, `Ean13`, `UpcA`, `UpcE`, `Itf`). MAUI renders to PNG via a built-in pure-managed encoder (no SkiaSharp / `System.Drawing` dependency, AOT-safe) and feeds an `Image`. Blazor renders inline SVG by default (crisp at any size, single-path output with `shape-rendering="crispEdges"`) or a PNG `data:` URI. `QRCodeView` is a `BarcodeView` subclass that locks `Format = QRCode` and adds `Size` (square edge length) and `ErrorCorrection` (`Low`/`Medium`/`Quartile`/`High`). The static `BarcodeRenderer` exposes `RenderPng`, `RenderSvg`, and `RenderDataUri` for raw output without a view. XAML namespace `xmlns:bc="http://shiny.net/maui/barcodes"` - **AutoCompleteEntry**: A text input with debounced search, dropdown suggestions, busy indicator, custom item templates, and full styling control via CSS custom properties (Blazor) or bindable properties (MAUI) - **CountryPicker**: A country search control built on AutoCompleteEntry with flag emoji, country name, and dial code - **AddressEntry**: An address search control built on AutoCompleteEntry with geocoding (Nominatim/OpenStreetMap by default) and structured address results - **SignaturePad**: A signature capture control that opens in a FloatingPanel (MAUI) or SheetView (Blazor). Users draw on a canvas and export to PNG. Configurable stroke color/width, background, export dimensions, sign/cancel buttons, and panel styling. Like FloatingPanel, it must be placed inside an `OverlayHost` or `ShinyContentPage` (MAUI). The Sign button is disabled until the user draws something - **Toast**: A service-first toast notification system invoked via DI-injected `IToaster` (registered by `UseShinyControls()`). Supports auto-dismiss with configurable duration, manual dismiss via `IDisposable`, pill or fill-horizontal display modes, top/bottom positioning, queue or stack mode for multiple toasts, indeterminate spinner, countdown progress bar, icon, tap command, feedback, and screen reader announcement. No XAML or OverlayHost required — the overlay auto-attaches to the current page. Blazor uses `IToastService` with `` component - **TextEntry**: A Material Design-inspired text entry control with animated floating placeholder, customizable border, left/right tool slots, hint text for validation, character count, read-only/password modes, and reusable tools (ClearButtonTool, TextEntrySpeechToTextTool) - **Slider**: A slider control with a two-color gradient track, blended thumb border that samples the gradient at the current position, tooltip with custom templates, and full drag/tap interaction - **ProgressBar**: A progress bar with gradient fill and a Vista-style shimmer pulse that sweeps left-to-right. Configurable `PulseLength` (width of sheen) and `PulseSpeed` (sweep duration). Triggers on value change or timed interval. Supports indeterminate mode and text overlay - **Overlay & LoadingOverlay**: Full-screen overlay with configurable backdrop color and opacity, fade animation, and custom content via `DataTemplate` (MAUI) or `RenderFragment` (Blazor). `LoadingOverlay` extends it with built-in spinner (indeterminate) or progress bar (determinate) plus optional message text - **SkeletonView**: A content-wrapping control (similar to `RefreshView`) that shows animated shimmer placeholders while `IsBusy` is true, then reveals the real content when loading finishes. Built-in line placeholders (configurable `ItemCount`/`ItemHeight`/`ItemSpacing`/`CornerRadius`/`BaseColor`/`ShimmerColor`) or a custom placeholder layout via `SkeletonTemplate` (MAUI) / `SkeletonContent` (Blazor). Shimmer is a sweeping `LinearGradientBrush` band on MAUI and an animated CSS gradient (honoring `prefers-reduced-motion`) on Blazor. Use it for inline content regions; use `LoadingOverlay` for whole-page loading - **CarouselGallery**: Netflix-style horizontal carousel with snap-to-center, configurable scale transforms (FocusedItemScale/UnfocusedItemScale), peek area insets, infinite loop, two-way position tracking, and `SnapCount` (0=free scroll, 1+=snap to item). Uses native recycler views on MAUI and CSS scroll-snap on Blazor - **ParallaxCollectionView** (MAUI) / **ParallaxList** (Blazor): A scrollable list with a hero header that translates at a configurable fraction of the scroll offset (`ParallaxFactor`, default 0.5 = half speed). Optional `CollapseToSticky` clamps the header to a `MinHeaderHeight` minimum, and `FadeHeaderOnScroll` fades it out as it scrolls. MAUI wraps a real `CollectionView` (`ItemTemplate`, `EmptyView`, `SelectionMode`, `SelectedItem`, `ScrollTo`, custom `ItemsLayout`) in a `Grid` and drives the hero translation from `CollectionView.Scrolled`. Blazor uses a CSS-positioned hero plus a tiny JS scroll listener that mutates `transform`/`opacity` directly (rAF-throttled) so parallax runs at native scroll framerate without Razor re-renders. Both hosts fire a `Scrolled` event with `ParallaxScrollEventArgs(verticalOffset, headerTranslation, headerVisibleHeight)` for driving sticky titles, fading nav chrome, etc. No platform handlers - **StaggeredGrid**: Pinterest-style masonry/waterfall layout with variable-height items in configurable columns. Items with HeightRequest on the root template view use that value directly for measurement. Uses native staggered layout managers on MAUI and CSS column-count on Blazor - **VirtualizedGrid**: Full-featured grouped grid with sticky section headers, virtualization, orientation-aware column counts, cell padding, load-more button (renders as footer at end of data) with custom template support, and item visibility tracking. Uses native grid layouts on MAUI and CSS Grid on Blazor - **Desktop (Tray Icon + Docking)**: A single desktop-only add-on package `Shiny.Maui.Controls.Desktop` bundles two features that share the desktop TFM matrix (Windows + macOS AppKit + MacCatalyst + Linux): - **Tray Icon** (`using Shiny.Maui.Controls.Desktop.TrayIcon;`) — cross-platform system tray / status-bar icon. Windows (`Shell_NotifyIcon`), macOS AppKit (`NSStatusItem`, native `net10.0-macos` build), MacCatalyst (AppKit bridged via the Objective-C runtime), Linux (`libayatana-appindicator3` + GTK 3 — requires the system library installed). API: `ITrayIconFactory` resolved from DI, then `ITrayIcon` with `SetIcon(Func)` (PNG or ICO bytes — Windows auto-wraps PNG into ICO), `Tooltip`, `Title` (macOS/Linux label, ignored on Windows), `IsVisible`, `IsTemplateImage` (macOS auto-tint), `SetMenu(TrayMenu)`, `ShowMenu()`, and `PrimaryClick`/`SecondaryClick`/`DoubleClick` events. Menus are built fluently with `TrayMenu.Build(b => b.Item(...).Check(...).Separator().Submenu(...))` — `TrayMenuItem`, `TrayCheckMenuItem`, `TraySeparator`, and `TraySubmenu`. Mutating any item's `Label`/`IsEnabled`/`IsVisible` rebuilds the native menu automatically. No Blazor equivalent — tray icons are a desktop OS concept. Registered with `.UseTrayIcon()` in `MauiProgram.cs` - **Docking** (`using Shiny.Maui.Controls.Desktop.Docking;`) — Visual-Studio-style window docking for MAUI desktop, with a companion `Shiny.Blazor.Controls.Kiosk` package for Blazor (kiosk-shaped Blazor features — docking + on-screen keyboard; namespace `Shiny.Blazor.Controls.Kiosk.Docking`). `DockHostView` attaches to any existing `ContentPage` (not a `ContentPage` subclass) and orchestrates `DockGroupView`, `DockTabStrip`, and `DockSplitter` building blocks. Public surface includes `IDockHost` (per-window controller — `LoadAsync`, `Snapshot`, `ShowPanelAsync`/`HidePanelAsync`/`ActivatePanelAsync`, `ResetLayoutAsync`, `SetRailCollapsedAsync`, `IsLocked`, `Events`; implemented directly by `DockHostView` / ``), `IDockableContent` (optional interface on panel views — per-instance `Title`/`Icon`, `CanClose`/`CanFloat`, `OnActivated`/`OnDeactivated`, `WantsPointerDown` for embedded editors), `IDockableContentFactory` (async `Task CreateAsync(string instanceId, ...)` + `DisplayName`/`Icon`, registered with `.AddDockPanel("panel-id", displayName: …, icon: …)`), `IDockLayoutStore` (bring-your-own persistence — no default ships; attach via the host's `LayoutStore` property for auto-load at startup + debounced auto-save), `IDockLayoutMigrator` (forward-only schema migrations), `IDockEvents` (`LayoutChanged`, `PanelActivated`, `DragStarted/Completed/Cancelled`), and `IDockCommandScope` (scopes Ctrl+W, Ctrl+Tab MRU, Ctrl+Alt+PgUp/Dn to the dock surface). The layout schema is a pure POCO tree (`DockRoot`, `DockWindowState`, `DockSplit`, `DockGroup`, `DockTab`, `DockEmpty`, `DockCollapsedPanel`) with a source-generated `System.Text.Json` context and `SchemaVersion` + `MinReadableVersion` for migration; `DockSerialization.Serialize`/`Deserialize` round-trip layouts to JSON. Fully interactive: tab drag to merge (drop center) / split (drop edge) / reorder (drop in tab strip) / tear off floating windows (drop outside the host — movable, resizable, re-dockable), draggable splitters with persisted clamped ratios, per-panel collapse to slim edge bars (restore on click; whole rails via `SetRailCollapsedAsync`), locked/read-only mode, and persisted floating-window bounds + collapsed state. Registered with `.UseShinyDocking()` + `.AddDockPanel("id")` on MAUI, `services.AddShinyDocking() + .AddDockPanel("id")` on Blazor; host controls accept `InitialLayout`, `LayoutStore`, and `IsLocked` - **On-Screen Keyboard** (`using Shiny.Maui.Controls.Desktop.OnScreenKeyboard;` / `using Shiny.Blazor.Controls.Kiosk.OnScreenKeyboard;`) — Touch / kiosk soft keyboard. US-QWERTY with three layers (lowercase / Shift / 123-symbols), bottom-docked, auto-shows when an `Entry` / `Editor` (MAUI) or `` / `