Language: HTML | XAML

Quickstart: Adding button controls (XAML)

Applies to Windows and Windows Phone

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

A button control

JJ153346.wedge(en-us,WIN.10).gifTo 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"/>
    
    
    
    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();
    }
    
    

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>

A button with image and text content

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.

Hyperlink button

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.

Related topics

How to add a button
Roadmap for Windows Runtime apps using C# or Visual Basic
Roadmap for Windows Runtime apps using C++

 

 

Show:
© 2014 Microsoft