AppBarButton

The AppBarButton control is a button that can be placed in an CommandBar. It's designed for frequently used commands that benefit from larger tap targets and visual prominence.

Overview

AppBarButton instances can contain text and an icon. They are typically used to represent actions such as "Save", "New", "Print", or "Settings". The CommandBar automatically handles layout and overflow for AppBarButtons.

Properties

Property	Description	Type
`Label`	Gets or sets the text label displayed with the button.	`string`
`Icon`	Gets or sets the icon displayed on the button. This can be a built-in glyph, a custom image, or an `IconElement`.	`IconElement`
`IsCompact`	Gets or sets a value that indicates whether the button is in a compact visual state (typically no label is shown).	`bool`
`IsEnabled`	Gets or sets a value that indicates whether the control is enabled.	`bool`
`Command`	Gets or sets the command to invoke when the button is clicked.	`ICommand`
`CommandParameter`	Gets or sets the parameter to pass to the `Command` property.	`object`

Usage Example

Here's how you can define and use an AppBarButton in XAML:

XAML Definition

<CommandBar>
    <AppBarButton Icon="Save" Label="Save" Click="SaveButton_Click"/>
    <AppBarButton Icon="NewFolder" Label="New" IsCompact="True"/>
    <AppBarButton Icon="Print" Label="Print"/>
    <AppBarButton Icon="Settings" Label="Settings" IsEnabled="False"/>
</CommandBar>

And the corresponding C# code-behind for the click event:

C# Code-Behind

private void SaveButton_Click(object sender, RoutedEventArgs e)
{
    // Logic to save the current document or data
    System.Diagnostics.Debug.WriteLine("Save button clicked!");
}

Visual States

AppBarButton supports several visual states:

Default: Shows both icon and label.
Compact: Shows only the icon.
Disabled: Visually indicates that the button is not interactive.

Inline Example

Here are a few AppBarButton examples:

Best Practices

Use AppBarButton for primary and secondary actions within a CommandBar.
Prioritize frequently used actions.
Keep labels concise.
Leverage built-in icons when appropriate.
Use IsCompact="True" for less critical actions or when space is limited.

Microsoft Docs