Quickstart: Adding button controls (XAML)

  • Article

[ This article is for Windows 8.x and Windows Phone 8.x developers writing Windows Runtime apps. If you’re developing for Windows 10, see the latest documentation ]

Button controls provide a way for users to commit a command or perform an action, like submitting or resetting a form. This quickstart walks you through the steps to add a button control to a Windows Runtime app using C++, C#, or Visual Basic.

Roadmap: How does this topic relate to others? See:

Objective: To use buttons in a Windows Runtime app using C++, C#, or Visual Basic.

Prerequisites

We assume that you can add controls to a basic Windows Runtime app using C++, C#, or Visual Basic. For instructions on adding a control, see Quickstart: Adding controls and handling events.

Instructions

1. Add a standard button

To add a button in XAML

  1. Add a Button control to a parent container.

  2. To assign a label to the button, set the Content property to a string value.

  3. To perform an action when a user clicks the button, add a handler for the Click event. In the Click event handler, add code to perform some action.

    <Button Content="Banana" Click="Button_Click"/>

    void MainPage::Button_Click(Object^ sender, RoutedEventArgs^ e)
{
    Windows::UI::Popups::MessageDialog^ messageDialog = 
        ref new Windows::UI::Popups::MessageDialog("Thank you for choosing banana.");
    messageDialog->ShowAsync();
}

    private async void Button_Click(object sender, RoutedEventArgs e)
{
    Windows.UI.Popups.MessageDialog messageDialog = 
        new Windows.UI.Popups.MessageDialog("Thank you for choosing banana.");
    await messageDialog.ShowAsync();
}

    Private Async Sub Button_Click(sender As Object, e As RoutedEventArgs)
    Dim messageDialog As New Windows.UI.Popups.MessageDialog("Thank you for choosing banana.")
    Await messageDialog.ShowAsync()
End Sub

2. Customize the button content

A button is a ContentControl, so you can set any object as the button's content. If the content is a UIElement, it is rendered in the button. If the content is another type of object, its string representation is shown in the button.

Here, a StackPanel that contains an image of a banana and text is set as the Content of a Button control.

<Button Click="Button_Click_1" 
        Background="#FF0D6AA3" 
        Height="100" Width="100" >
    <StackPanel>
        <Image Source="Assets/Banana.png"/>
        <TextBlock Text="Banana" HorizontalAlignment="Center"/>
    </StackPanel>
</Button>

3. Add a HyperlinkButton

By default, a HyperlinkButton appears as a text hyperlink. When a user clicks it, it opens the page you specify in the NavigateUri property in the default browser. You don't need to handle its Click event.

To add a HyperlinkButton

  1. Add a HyperlinkButton control to a parent container.
  2. Set the Content property to a string that represents the page to navigate to.
  3. Set the NavigateUri property to the Uniform Resource Identifier (URI) to navigate to when the button is pressed.
<HyperlinkButton Content="www.microsoft.com" NavigateUri="https://www.microsoft.com"/>

Summary

In this tutorial, you learned how to add a button control to your app.

How to add a button

Roadmap for Windows Runtime apps using C# or Visual Basic

Roadmap for Windows Runtime apps using C++