Button Button Button Button Class


Represents a templated button control that interprets a Click user interaction.

public : class Button : ButtonBase, IButton, IButtonWithFlyoutpublic class Button : ButtonBase, IButton, IButtonWithFlyoutPublic Class Button Inherits ButtonBase Implements IButton, IButtonWithFlyout// This API is not available in Javascript.
<Button .../>
<Button ...>stringContent</Button>
Windows 10 requirements
Device family
Windows 10 (introduced v10.0.10240.0)
API contract
Windows.Foundation.UniversalApiContract (introduced v1)

Inherited Members

Inherited properties

Inherited events

Inherited methods


The following example shows three buttons that respond to clicks in three different ways based on their ClickMode property value.

<StackPanel x:Name="LayoutRoot" Margin="10">
  <Button x:Name="btn1" Content="Hover to Click"
          Click="OnClick1" ClickMode="Hover"
          Margin="5" Width="150"
  <TextBlock x:Name="text1" Margin="5,8,0,0" />
  <Button x:Name="btn2" Content="Press to Click"
          Click="OnClick2" ClickMode="Press"
          Margin="5,5,5,5" Width="150" 
  <TextBlock x:Name="text2" Margin="5,8,0,0" />
  <Button x:Name="btn3" Content="Reset"
          Click="OnClick3" ClickMode="Release"
          Margin="5,5,5,5" Width="150"
  <TextBlock x:Name="text3" Margin="5,8,0,0" />
void OnClick1(object sender, RoutedEventArgs e)
    btn1.Foreground = new SolidColorBrush(Windows.UI.Colors.Blue);
    text1.Text = "Click event occurs on Hover.";
    text2.Text = "";
    text3.Text = "";

void OnClick2(object sender, RoutedEventArgs e)
    btn2.Foreground = new SolidColorBrush(Windows.UI.Colors.Green);
    text1.Text = "";
    text2.Text = "Click event occurs on Press.";
    text3.Text = "";

void OnClick3(object sender, RoutedEventArgs e)
    btn1.Foreground = new SolidColorBrush(Windows.UI.Colors.Green);
    btn2.Foreground = new SolidColorBrush(Windows.UI.Colors.Blue);
    text1.Text = "";
    text2.Text = "";
    text3.Text = "Click event occurs on Release.";
Private Sub OnClick1(ByVal sender As Object, ByVal e As RoutedEventArgs)
    btn1.Foreground = New SolidColorBrush(Windows.UI.Colors.Blue)
    text1.Text = "Click event handled on Hover."
    text2.Text = ""
    text3.Text = ""
End Sub

Private Sub OnClick2(ByVal sender As Object, ByVal e As RoutedEventArgs)
    btn2.Foreground = New SolidColorBrush(Windows.UI.Colors.Green)
    text1.Text = ""
    text2.Text = "Click event handled on Press."
    text3.Text = ""
End Sub

Private Sub OnClick3(ByVal sender As Object, ByVal e As RoutedEventArgs)
    btn1.Foreground = New SolidColorBrush(Windows.UI.Colors.Green)
    btn2.Foreground = New SolidColorBrush(Windows.UI.Colors.Blue)
    text1.Text = ""
    text2.Text = ""
    text3.Text = "Click event handled on Release."
End Sub


The Button class represents the most basic type of button control. For info on other similar button controls that are more specialized, see HyperlinkButton or RepeatButton.

A standard button

Button interaction

When you tap a Button with a finger or stylus, or press a left mouse button while the pointer is over it, the button raises the Click event. If a button has keyboard focus, pressing the Enter key or the Spacebar key also raises the Click event.

You generally can't handle low-level PointerPressed events on a Button because it has the Click behavior instead. For more info, see Events and routed events overview.

You can change how a button raises the Click event by changing the ClickMode property. The default ClickMode value is Release. If ClickMode is Hover, the Click event can't be raised with the keyboard.

Button content

Button is a ContentControl. Its XAML content property is Content, and this enables a syntax like this for XAML: <Button>A button's content</Button>. For more info about XAML content properties, see XAML overview.

Button derived classes

Button is the parent class for AppBarButton.

Control style and template

You can modify the default Style and ControlTemplate to give the control a unique appearance. For information about modifying a control's style and template, see Styling controls. The default style, template, and resources that define the look of the control are included in the generic.xaml file. For design purposes, generic.xaml is available in the (Program Files)\Windows Kits\10\DesignTime\CommonConfiguration\Neutral\UAP&lt;SDK version>\Generic folder from a Windows Software Development Kit (SDK) installation. Styles and resources from different versions of the SDK might have different values.

Starting in Windows 10, version 1607 (Windows Software Development Kit (SDK) version 10.0.14393.0), generic.xaml includes resources that you can use to modify the colors of a control in different visual states without modifying the control template. In apps that target this software development kit (SDK) or later, modifying these resources is preferred to setting properties such as Background and Foreground. For more info, see the Light-weight styling section of the Styling controls article.

This table shows the resources used by the Button control.

Resource keyDescription
ButtonBackgroundBackground color at rest
ButtonBackgroundPointerOverBackground color on hover
ButtonBackgroundPressedBackground color when pressed
ButtonBackgroundDisabledBackground color when disabled
ButtonForegroundForeground color at rest
ButtonForegroundPointerOverForeground color on hover
ButtonForegroundPressedForeground color when pressed
ButtonForegroundDisabledForeground color when disabled
ButtonBorderBrushBorder color at rest
ButtonBorderBrushPointerOverBorder color on hover
ButtonBorderBrushPressedBorder color when pressed
ButtonBorderBrushDisabledBorder color when disabled


Button() Button() Button() Button()

Initializes a new instance of the Button class.

public : Button()public Button()Public Sub New()// This API is not available in Javascript.


Flyout Flyout Flyout Flyout

Gets or sets the flyout associated with this button.

public : FlyoutBase Flyout { get; set; }public FlyoutBase Flyout { get; set; }Public ReadWrite Property Flyout As FlyoutBase// This API is not available in Javascript.

FlyoutBase FlyoutBase FlyoutBase FlyoutBase

The flyout associated with this button, if any; otherwise, null. The default is null.


By default, the flyout that's set as the value of the Flyout property displays when the button is tapped or otherwise invoked, you don't need to call methods to display it. That differs from the behavior of flyouts assigned through the FlyoutBase.AttachedFlyout attached property; these flyouts must be explicitly displayed by calling ShowAt on the flyout instance, or the static ShowAttachedFlyout method.

See Also

FlyoutProperty FlyoutProperty FlyoutProperty FlyoutProperty

Identifies the Flyout dependency property.

public : static DependencyProperty FlyoutProperty { get; }public static DependencyProperty FlyoutProperty { get; }Public Static ReadOnly Property FlyoutProperty As DependencyProperty// This API is not available in Javascript.
DependencyProperty DependencyProperty DependencyProperty DependencyProperty

The identifier for the Flyout dependency property.

See Also