Button Control (WinUI)

Note: This documentation describes the Button control as part of the Windows UI Library (WinUI). WinUI is the latest native UI platform for building Windows applications.

The Button control provides a clickable UI element that users can interact with to trigger an action.

Introduction

Buttons are fundamental to user interaction. They represent actions that a user can initiate, such as submitting a form, saving data, or navigating to a different part of the application. WinUI's Button control offers a rich set of customization options to match your application's design language.

Basic Usage

Here's how to create a simple button in XAML:

<Button Content="Click Me"/>

Styling and Variations

WinUI provides several styles and properties to customize the appearance of your buttons.

Standard Button

The default button style.

<Button Content="Standard Button"/>

Secondary Button

A less prominent button, often used for secondary actions.

<Button Content="Secondary Action" Style="{StaticResource ButtonSecondaryStyle}"/>

Outline Button

A button with an outline, suitable for highlighting actions without using a solid background.

<Button Content="Outline Button" Style="{StaticResource ButtonOutlineStyle}"/>

Disabled Button

A button that is visually disabled and cannot be interacted with.

<Button Content="Disabled Button" IsEnabled="False"/>

Common Properties

Events

The most common event for a button is the Click event, which is raised when the button is clicked.

<Button Content="Click Me" Click="MyButton_Click"/>

And in C# code-behind:

void MyButton_Click(object sender, RoutedEventArgs e)
{
    // Handle button click event
    System.Diagnostics.Debug.WriteLine("Button was clicked!");
}

Using Icons

You can embed icons within your buttons using the SymbolIcon or FontIcon controls, or by including an image.

<Button>
    <StackPanel Orientation="Horizontal">
        <FontIcon Glyph="" Margin="0,0,5,0"/> <!-- Example: Save icon -->
        <TextBlock Text="Save"/>
    </StackPanel>
</Button>

Tip: For a complete list of Segoe MDL2 Assets glyphs, refer to the Segoe MDL2 Assets documentation.

Best Practices

• Use descriptive text or icons for button labels.
• Ensure a clear visual distinction between primary and secondary actions.
• Provide visual feedback on hover and click states.
• Do not overuse buttons; ensure each button represents a distinct and necessary action.
• Consider accessibility: ensure buttons have appropriate contrast and can be navigated via keyboard.

Related Topics

• ToggleButton
• Flyout
• XAML Overview