MetroBlazor

A Windows 8.1 Metro UI component library for Blazor.

MetroBlazor brings the flat, squared, touch-first look and feel of Windows 8.1 Metro to modern browsers. It is built as an independent Razor Class Library that ships as a NuGet package, with no dependency on a specific host application.

Highlights

• Touch-first controls — flat geometry, strong color, and square corners.
• Live tiles — animated tile content with configurable intervals.
• Tile groups — drag sorting, removal, and size cycling (Small / Medium / Wide / Large).
• Built-in icon library — searchable SVG icons with a stable name-based API.
• Theming — Dark, Light, Blue, and Purple variants with a cascading theme state.
• Accessible — touch, mouse, keyboard, focus visibility, ARIA, and reduced-motion support.
• Self-contained — no Fluent UI icon runtime dependency; icons are embedded SVG paths.

Requirements

• .NET 10
• Microsoft.FluentUI.AspNetCore.Components 4.13.x (used selectively for accessibility and complex infrastructure; not exposed in the public API)

Installation

dotnet add package MetroBlazor

Register the Fluent UI services in Program.cs:

builder.Services.AddFluentUIComponents();

Quick start

Add the namespace to your _Imports.razor:

@using MetroBlazor

Wrap your app in MetroTheme and start using components:

<MetroTheme>
    <MetroTile Label="Photos" Icon="home" AccentColor="#0078D7" />
</MetroTheme>

Theming

MetroTheme establishes the Metro design tokens and cascades a MetroThemeState that any descendant can use to switch themes at runtime.

<MetroTheme Mode="Dark">
    <App />
</MetroTheme>

Available variants:

Variant	Description
Dark	Default dark Metro theme
Light	Light Metro theme
Blue	Blue accent theme
Purple	Purple accent theme

[CascadingParameter] public MetroThemeState? ThemeState { get; set; }

ThemeState!.Variant = MetroThemeVariant.Blue;

Components

Foundation

• MetroTheme — theme root, tokens, and cascading theme state
• MetroIcon / MetroIconCatalog — searchable embedded SVG icon library
• MetroText — Metro typography (Display, Header, Subheader, Body, Label, Caption, Link)
• MetroPageTransition — animated content transition

Surface

• MetroTile — live tiles with Small / Medium / Wide / Large sizes
• MetroTileGroup — reorderable, resizable tile groups; ReadOnly turns it into a clickable launcher grid
• MetroHub — spacious grouped content surface
• MetroSemanticZoom — grouped overview / detailed view
• MetroSurface — reusable surface container

Forms

• MetroButton — solid, quiet, and icon-only (bordered / non-bordered) buttons
• MetroInput — underline text field
• MetroSelect — native select with Metro treatment
• MetroToggle — squared switch
• MetroCheckbox — squared checkbox
• MetroRadio — squared radio
• MetroSlider — thick squared slider
• MetroSearchBox — filled search with icon and clear action
• MetroRating — star rating with pointer and keyboard input

Feedback

• MetroProgress — segmented determinate and staggered indeterminate progress
• MetroBadge — compact status and count label
• MetroTooltip — hover / focus hint attached to its trigger

Collections

• MetroListView — flat, touch-friendly list
• MetroDataGrid — responsive semantic table
• MetroTreeView — expandable hierarchy

Navigation

• MetroSidebar — persistent collapsible left blade
• MetroNavigation — grouped navigation with expandable items
• MetroPivot — Windows 8 style section navigation
• MetroBreadcrumb — slash-separated path navigation
• MetroBlade — right-side detail surface

Layout

• MetroLayout — responsive app shell: persistent sidebar rail on desktop, overlay drawer with scrim on mobile
• MetroAppFrame — deprecated application frame with header and content regions; use MetroLayout with HeaderTemplate

Commands and overlays

• MetroCommandBar — flat command actions
• MetroAppBar — bottom command surface
• MetroContextMenu — right-click command menu that opens at the pointer
• MetroFlyout — contextual surface
• MetroContentDialog — centered modal dialog

Icons

MetroIcon renders embedded SVG paths sourced from Microsoft Fluent UI System Icons.

<MetroIcon Name="settings" Size="MetroIconSize.Large" />

Search the icon catalog programmatically:

IReadOnlyList<string> names = MetroIconCatalog.Search("arrow");

Use PathOverride to supply application-owned SVG paths without adding any runtime dependency. MetroTile.Icon also resolves catalog names automatically, falling back to rendering the value as a text glyph when no catalog icon matches.

Live tiles

<MetroTile Label="Weather" Live="true" LiveInterval="3000">
    <LiveContent>
        <span>22°C Sunny</span>
    </LiveContent>
</MetroTile>

Tile groups

Tile groups support long-press or right-click edit mode, drag sorting, tile removal, and size cycling.

<MetroTileGroup Title="Pinned" Items="tiles"
                ItemMoved="OnTileMoved"
                ItemSizeChanged="OnTileSizeChanged"
                ItemRemoved="OnTileRemoved" />

Showcase

Run the interactive documentation site to browse every component on its own routed page (/components/tile, /components/button, ...) with live demos, code samples, parameter tables, themes, and a searchable icon browser. The site itself is built entirely with MetroBlazor — the shell is MetroLayout + MetroNavigation, the header uses MetroBreadcrumb, and the overview page navigates with MetroTile:

dotnet run --project showcase/MetroBlazor.Showcase

Development

Build, test, and package the library:

dotnet build MetroBlazor.slnx
dotnet test  MetroBlazor.slnx
dotnet pack  src/MetroBlazor/MetroBlazor.csproj -c Release

NuGet packages are written to artifacts/packages/.

Project structure

MetroBlazor.slnx
├── src/MetroBlazor/         Razor Class Library (NuGet package)
├── showcase/                Interactive showcase (Blazor Server)
└── tests/                   bUnit tests (xunit)

Browser support

• Desktop Chrome (latest)
• Desktop Firefox (latest)
• Mobile Chrome (latest)
• Mobile Safari (latest)

License

Apache 2.0