How to add a button

[ 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 ]

This tutorial walks you through the steps to add a button control to a Windows Runtime app using C++, C#, or Visual Basic.

You typically add a button in the Extensible Application Markup Language (XAML) editor or using a design tool like Blend for Visual Studio. You can also add a button in code at run time.

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

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

What you need to know

Technologies

• Button

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

Step 1: Add a button in XAML

To add a button in XAML

1. Add a Button control to a parent container.

2. To assign a name to the button, set the x:Name attribute to a string value.

   To refer to a control in code, it must have a name. Otherwise, a name is not required.

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

4. 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 x:Name="button1" Content="Button" 
           Click="Button_Click" />
   

   void MainPage::Button_Click(Object^ sender, RoutedEventArgs^ e)
   {
       // Add code to perform some action here.
   }
   

   private void Button_Click(object sender, RoutedEventArgs e)
   {
       // Add code to perform some action here.
   }
   

   Private Sub Button_Click()
       ' Add code to perform some action here.
   End Sub
   

Step 2: Add a button in code

To add a button in code

1. Create a new Button.

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.

4. Add the Button to a parent container in the visual tree to make the button show in the UI.

   // Create a new button, set it's content,
   // and add a Click event handler.
   Button^ button1 = ref new Button();
   button1->Content = "Button";
   button1->Click += ref new RoutedEventHandler(this, &MainPage::Button_Click);
   
   // Add the button to a parent container in the visual tree.
   stackPanel1->Children->Append(button1);
   

   // Create a new button, set it's content,
   // and add a Click event handler.
   Button button1 = new Button();
   button1.Content = "Button";
   button1.Click += Button_Click;
   
   // Add the button to a parent container in the visual tree.
   stackPanel1.Children.Add(button1);
   

   ' Create a new button, set it's content,
   ' and add a Click event handler.
   Dim button1 = New Button()
   button1.Content = "Button"
   AddHandler button1.Click, AddressOf Me.Button_Click
   
   ' Add the button to a parent container in the visual tree.
   stackPanel1.Children.Add(button1)
   

   void MainPage::Button_Click(Object^ sender, RoutedEventArgs^ e)
   {
       // Add code to perform some action here.
   }
   

   private void Button_Click(object sender, RoutedEventArgs e)
   {
       // Add code to perform some action here.
   }
   

   Private Sub Button_Click()
       ' Add code to perform some action here.
   End Sub
   

Step 3: Add a button using a design tool

To add a button using a design tool

1. Select the Button control.

   • In Microsoft Visual Studio, pick the Button in the Toolbox pane.

   • In Blend for Visual Studio, pick the Button in the Assets pane.

     Select Controls in the left side of the Assets pane if it's not selected.

2. Add a Button to the design surface. Do one of these:

   • Double-click the button. The button is added to the selected parent container with default position and size settings.
   • Drag the button to the design surface and drop it. The button is added in the position where you drop it with default size and content settings.
   • Draw the button control onto the design surface. The button is added with the size and position settings that you draw.

3. If you need to, assign a name to the Button. With the button selected, type the name into the Name property text box.

   The Name property text box is at the top of the Properties pane. To refer to a control in code, it must have a name. Otherwise, a name is not required.

4. Update the Button content. Do one of these:

   • Click the button to select it, then click it again to make the button content editable. Type new content into the button on the design surface.

   • Type the content string into the Content property text box.

     If the Properties pane is arranged by Category, the Content property is in the Common category.

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

   1. Select the Event view in the Property pane.
   2. With the check box selected on the design surface, do one of these:
      • Double click the Click event text box to add a handler with a default name.
      • Type a name into the Click event text box and press Enter to add a handler with a custom name.

Related topics

Button

Roadmap for Windows Runtime apps using C# or Visual Basic

Roadmap for Windows Runtime apps using C++