Command

A search field over a list of grouped commands, inline or as a command palette.

Installation

bash 
shellui-native add command
See More

Platforms: MAUI · Avalonia. Also installs icon.

Usage

Basic

Rendered with ShellUI for Blazor
Suggestions
Calendar
Search components
Launch
Settings
Profile Ctrl+P
Billing Ctrl+B
Settings Ctrl+,

Selected: none

<ui:Command ItemSelected="OnCommand">
    <ui:CommandGroup Heading="Suggestions">
        <ui:CommandItem Text="Calendar" Icon="Calendar" Value="calendar" />
        <ui:CommandItem Text="Search components" Icon="Search" Value="search" Keywords="find lookup" />
        <ui:CommandItem Text="Launch" Icon="Zap" Value="launch" IsEnabled="False" />
    </ui:CommandGroup>
    <ui:CommandSeparator />
    <ui:CommandGroup Heading="Settings">
        <ui:CommandItem Text="Profile" Icon="User" Value="profile" Shortcut="Ctrl+P" />
        <ui:CommandItem Text="Billing" Icon="CreditCard" Value="billing" Shortcut="Ctrl+B" />
        <ui:CommandItem Text="Settings" Icon="Settings" Value="settings" Shortcut="Ctrl+," Keywords="preferences options" />
    </ui:CommandGroup>
</ui:Command>
Avalonia, running in your browser

Typing filters the list: every word you type must be in an item's Text or Keywords. Groups with no match and the separators hide while you search, and EmptyText shows when nothing matches. The first match is highlighted and Enter picks it. ItemSelected passes the item:

csharp 
private void OnCommand(object? sender, CommandItem item)
{
    // item.Value is "calendar", "profile", ...
}

Command palette

CommandPalette, in the same file, shows the list in a dialog near the top of the window.

Rendered with ShellUI for Blazor

Selected: none

<ui:Button Text="Open command palette" Icon="Command" Variant="Outline" Clicked="OnOpenPalette" />

<ui:CommandPalette x:Name="Palette" ItemSelected="OnCommand">
    <ui:CommandGroup Heading="Pages">
        <ui:CommandItem Text="Home" Icon="House" Value="home" />
        <ui:CommandItem Text="Inbox" Icon="Inbox" Value="inbox" />
        <ui:CommandItem Text="Dashboard" Icon="LayoutDashboard" Value="dashboard" />
    </ui:CommandGroup>
    <ui:CommandGroup Heading="Actions">
        <ui:CommandItem Text="Toggle theme" Icon="Moon" Value="theme" Keywords="dark light" />
        <ui:CommandItem Text="Log out" Icon="LogOut" Value="logout" />
    </ui:CommandGroup>
</ui:CommandPalette>
Avalonia, running in your browser

Open it from code. Picking an item, tapping the backdrop or pressing Escape closes it, and it opens with an empty search each time:

csharp 
private void OnOpenPalette(object? sender, EventArgs e) => Palette.SetOpen(true);

The name Command on MAUI

MAUI has a Command class of its own (the ICommand helper). In C# that imports both namespaces, qualify one of them or add an alias:

csharp 
using UI = MyApp.Components.UI;

MAUI and Avalonia

  • On Avalonia, Up / Down move the highlight through the matches; on MAUI, Enter picks the first match.
  • The Avalonia CommandPalette has Hotkey, a key gesture that opens and closes it anywhere in the window. It is Ctrl+K by default; Hotkey="{x:Null}" turns it off. MAUI opens the palette from code only.
  • On Avalonia the children are collected in Groups and a group's items in Items.

API

Command

XAML children go to Groups.

Property Type Default Description
Placeholder string "Type a command or search..." Hint shown while empty.
EmptyText string "No results found." Shown when nothing matches the search.
MaxListHeight double 300 The list scrolls past this height.
Event Arguments Description
ItemSelected CommandItem An item was picked; passes the item.
Method Description
Reset() Clears the search.
Items() Every item, in order, whether it's in a group or directly in the list.

CommandGroup

XAML children go to Items.

Property Type Default Description
Heading string — Text above the group's items.

CommandItem

Property Type Default Description
Text string — Item text; the search matches it.
Value string — Identifies the item to your code.
Icon IconName None Lucide icon from IconName; None for no icon.
Shortcut string — Keyboard hint shown at the end of the row (display only).
Keywords string — Extra words the search matches besides Text.
Event Arguments Description
Clicked — Clicked or tapped (or Enter / Space with keyboard focus).
Method Description
Press() Picks the item in code, as a click or Enter would. Avalonia only.

CommandSeparator

No properties of its own.

CommandPalette

XAML children go to Items on Avalonia and Groups on MAUI.

Property Type Default Description
Placeholder string "Type a command or search..." Hint shown while empty.
EmptyText string "No results found." Shown when nothing matches the search.
Open bool false Whether it's open. Two-way bindable.
Hotkey KeyGesture? new KeyGesture(Key.K, KeyModifiers.Control) A key gesture that opens and closes the palette anywhere in the window; null for none. Avalonia only.
Event Arguments Description
ItemSelected CommandItem An item was picked; passes the item. The palette closes first.
OpenChanged bool Opened or closed.
Method Description
SetOpen(bool value) Opens or closes it.

Rejoining the server...

Rejoin failed... trying again in seconds.

Failed to rejoin.
Please retry or reload the page.

The session has been paused by the server.

Failed to resume the session.
Please retry or reload the page.