Quickstart: Adding button controls (Windows Store apps using C#/VB/C++ and XAML)

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 Store app built for Windows using C++, C#, or Visual Basic.

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

• Roadmap for Windows Store apps using C# or Visual Basic
• Roadmap for Windows Store apps using C++

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

Prerequisites

We assume that you can add controls to a basic Windows Store 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.
   XAML

   Copy

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

   C#

   C++

   VB

   Copy

   
   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>

3. Style the button to look like text

You can add clickable text to your app by styling a button control to look like text. For example, you might want to have a clickable group header that opens the group when clicked. The StandardStyles.xaml file has a predefined style named TextButtonStyle that you can use for this.

<Button Name="Group Title"
        Content="{Binding Title}"
        Click="Header_Click"
        Style="{StaticResource TextButtonStyle}"/>

4. 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.

Related topics

How to add a button

Roadmap for Windows Store apps using C# or Visual Basic

Roadmap for Windows Store apps using C++

Build date: 11/29/2012