Under construction

(?)

This content is not available in your language. Here's one version in another language that is currently available.

Request Translation

Button

Buttons allow users to take actions, and make choices, with a single tap, which reacts to user input from a mouse, keyboard, stylus, or other input device and raises a Click event.

The main purpose of a Button is to make something happen when a user clicks it. There are two ways you can make something happen:

  • Handle the Click event.
  • Bind the Command property to an ICommand implementation that describes the command logic.

Examples
 ​ 

The following examples show the common usage of Button control.

A basic button
 ​ 

By using the Button class, you can create a button. You can use Content property to add a content, and use Click event to handle when it's clicked.

<Button Content="Click me" Click="Button_Click"/>
private void Button_Click(object sender, RoutedEventArgs e)
{
    // Do something when the button is clicked!
}

Then you can see a normal button with text, and try clicking it!

A basic button

A button with icon
 ​ 

Buttons often have only simple string content, but you can use any object as content. With the follwing code, you will get a button with only an icon and a tooltip:

<Button ToolTip="Save my documents">
    <ui:FontIcon Icon="{x:Static ui:SegoeFluentIcons.Save}"/>
</Button>

Button with icon only

For more information about ui:FontIcon, please click here

A button with icon and text
 ​ 

If you want both icon and text, the best way is to use ui:IconAndText component. It bundles up both icon and text:

<Button>
    <ui:IconAndText Icon="{x:Static ui:SegoeFluentIcons.Save}" Content="Save"/>
</Button>

A button with icon and Text

For more information about IconAndText, please click here

If you want not use FontIcon, or you want to fully customize the sub components (this is NOT recommended since it might increase the complexity and be harder to maintain), try the following code:

<Button>
    <ui:SimpleStackPanel Orientation="Horizontal" Spacing="5">
        <ui:FontIcon Icon="{x:Static ui:SegoeFluentIcons.Save}"/>
        <TextBlock Text="Save"/>
    </ui:SimpleStackPanel>
</Button>

Accent button
 ​ 

Accent buttons are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.

To apply accent style to you button, you need to set the Style property to {StaticResource {x:Static ui:ThemeKeys.AccentButtonStyleKey}}.

<Button Style="{StaticResource {x:Static ui:ThemeKeys.AccentButtonStyleKey}}"/>

Since a accent button is usually the primary action of the whole window, it's better to allow triggering its click event with pressing Enter key, which is by setting IsDefault property to True.

The complete code should look like this:

<Button Content="Accent button" Style="{StaticResource {x:Static ui:ThemeKeys.AccentButtonStyleKey}}" IsDefault="True"/>

Remarks
 ​ 

Elevation
 ​ 

The button control comes with an elevation border effect by default. You can use the ui:ElevationBorder to customize its elevation.

See more at Theming / Elevations.

Styles
 ​ 

There are two built-in styles for Button control:

  • DefaultButtonStyle: The default style for button, you can access it with ui:ThemeKeys.DefaultButtonStyleKey.

  • AccentButtonStyle: The accent style for button, you can access it with ui:ThemeKeys.AccentButtonStyleKey.

See also
 ​ 

Microsoft Learn
 ​