Quickstart: Adding controls and handling events for Windows Phone 8

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

You can use controls such as buttons, text boxes, and drop-down lists to create the UI for your Windows Phone app. You typically use the following pattern when working with controls:

• You add a control to your app UI.

• You set properties on the control, such as width, height, or foreground color.

• You assign some code to the control’s event handlers so that the control performs some action or function.

This topic contains the following sections.

• Adding a control
• Setting the name of a control
• Setting control properties
• Creating an event handler

Adding a control

You can add a control to a Windows Phone app in several ways:

• Add the control from the Toolbox in Visual Studio.

• Add the control in XAML view.

• Add the control in code.

The following illustration shows Visual Studio being used to create Windows Phone. When you add and manipulate controls in your app, you can use many features of Visual Studio, including the Toolbox, Design view, XAML view, and the Properties window.

The Visual Studio Toolbox displays many of the controls that you can use in your app. The following illustration shows some of the Windows Phone controls in the Toolbox.

To add a control to your app, double-click it in the Toolbox. You can also drag the control to Design view. When you double-click the TextBox control, the following XAML is added to XAML view.

<TextBox x:Name="MyTB" HorizontalAlignment="Left" Height="72" Margin="10,10,0,0" 
    Text="TextBox" VerticalAlignment="Top" Width="460" />

Setting the name of a control

To work with a control in code, you reference its name. Each control has a unique name, and you can change the name of a control by setting its Name property. You can set the name in the Visual Studio Properties window or in XAML. The following illustration shows how to change the name of the currently selected control by using the name text box at the top of the Properties window.

The following illustration shows how you can change the name of a control in XAML view by changing the Name attribute.

Setting control properties

You use properties to specify the appearance, content, or other attributes of controls. As with control names, you can set control properties in the Properties window, in XAML, or in code. To change the foreground color for a TextBox, you set the control's Foreground property. The following illustration shows how to set the Foreground property by using the Properties window.

The following illustration shows how to set the Foreground property in XAML view. Notice the Visual Studio IntelliSense window that opens to help you with the syntax.

The following shows the resulting XAML after the Foreground property is set.

<TextBox x:Name="MyTB" HorizontalAlignment="Left" Height="72" Margin="10,10,0,0" 
    Text="TextBox" VerticalAlignment="Top" Width="460"
    Foreground="Red" />

The following example shows how to set the Foreground property in code.

SolidColorBrush scb = new SolidColorBrush(Colors.Red);
MyTB.Foreground = scb;

Visual Basic
Dim scb As SolidColorBrush = New SolidColorBrush(Colors.Red)
MyTB.Foreground = scb

Some properties, such as Width, Height, and Margin, you can change simply by selecting and manipulating the control in Design view. The following illustration shows some of the resizing tools available in Design view.

Creating an event handler

Each control has events that enable you to respond to actions from the user. For example, a Button control contains a Click event that is raised when the Button is clicked. You create a method, called an event handler, to handle the event. You can create an event handler in the Properties window or in XAML. You can also create an event handler manually in code.

You can create an event handler by using the Events tab of the Properties window. To create an event handler, you select the control and then click the Events tab at the top of the Properties window. The Properties window lists all of the events available for that control. The following illustration lists some of the events for a TextBox.

To create an event handler, specify the event name in the Properties window. The event handler is created and the code-behind file is opened in the code editor. The following code shows the event handler for the TextChanged event for a TextBox named MyTB. When text in the TextBox is changed, the Text property for TextBlock named MyBlock is changed to You entered text!.

private void MyTB_TextChanged(object sender, TextChangedEventArgs e)
{
    MyBlock.Text = "You entered text!";
}

Private Sub MyTB_TextChanged(ByVal sender As Object, ByVal e As TextChangedEventArgs)
    MyBlock.Text = "You entered text!"
End Sub

You can also create an event handler in XAML. In XAML view, you type in the event name that you want to handle. XAML view displays an IntelliSense window when you begin typing. The following illustration shows how to specify the TextChanged event in XAML.

Once you've specified the event, you can double-click <New Event Handler> in the IntelliSense window that appears to create a new event handler with the default name. The following illustration shows the IntelliSense window that appears to help you create a new event handler.

The following XAML shows that the TextChanged event is associated with an event handler named MyTB_TextChanged.

<TextBox x:Name="MyTB" TextChanged="MyTB_TextChanged" HorizontalAlignment="Left" Height="72"
    Margin="10,10,0,0" Text="TextBox" VerticalAlignment="Top" Width="260"
    Foreground"Red"
 />

You can also associate an event with its event handler in the code-behind. The following code shows how to do this in C#.

MyTB.TextChanged +=new TextChangedEventHandler(MyTB_TextChanged);

AddHandler MyTB.TextChanged, AddressOf Me.MyTB_TextChanged