Quickstart: Adding button controls (XAML)

[ 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="http://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++