CommandBar for .NET: A Complete Beginner’s Guide
What is CommandBar?
CommandBar is a UI component for .NET applications that provides a compact, flexible toolbar and command surface for desktop and web apps. It centralizes actions, menus, and controls into a consistent area, improving discoverability and reducing UI clutter.
When to use it
- You need a single, reusable command surface across windows or pages.
- You want to group related actions, shortcuts, and menus in a compact layout.
- You need adaptive behavior for different form factors (desktop vs. narrow windows).
- You want to support keyboard shortcuts and contextual commands.
Key concepts
- Commands: Discrete actions the user can trigger (e.g., Save, Undo).
- Primary vs. Overflow: Important commands are shown prominently; less-used commands move into an overflow menu.
- Contextual Commands: Commands that appear only for specific states or selections.
- Separators and Groups: Visual grouping for clarity.
- Icons and Labels: Balance between icon-only compactness and labeled buttons for clarity.
Setup and installation
- Add the appropriate NuGet package or UI library that provides CommandBar for your target framework (WPF, WinUI, Blazor, etc.).
- Reference the library in your project and import the control namespace in XAML or code-behind.
Example (conceptual — adjust to your chosen library):
xml
<controls:CommandBar x:Name=“MainCommandBar”> <controls:AppBarButton Icon=“Save” Label=“Save” Command=“{Binding SaveCommand}” /> <controls:AppBarButton Icon=“Undo” Label=“Undo” Command=“{Binding UndoCommand}” /> <controls:AppBarOverflowContent> <controls:AppBarButton Icon=“Settings” Label=“Settings” Command=“{Binding SettingsCommand}” /> </controls:AppBarOverflowContent> </controls:CommandBar>
Basic patterns
- MVVM-friendly commands: Bind buttons to ICommand properties on your ViewModel to keep UI logic separate.
- Use observable collections for dynamic menus so the bar updates when actions change.
- Group commands with separators for related functionality (file actions, edit actions, view actions).
- Provide accessible labels and keyboard accelerators for each command.
Example: Simple WPF implementation (conceptual)
- ViewModel:
csharp
public ICommand SaveCommand { get; } public ICommand UndoCommand { get; } public MainViewModel() { SaveCommand = new RelayCommand(Save); UndoCommand = new RelayCommand(Undo, () => CanUndo); }
- View (XAML): bind AppBarButtons or equivalent to the ViewModel commands as shown in the setup example.
Handling overflow and responsiveness
- Set a threshold for how many primary commands to show before using overflow.
- Prefer showing the most-used actions as primary; log usage metrics to fine-tune if needed.
- Collapse to icons-only on narrow widths and include labels in overflow.
Customization
- Theming