Using Controls

Silverlight quickstart for Windows Phone development

You create the user interface (UI) for Silverlight applications for Windows Phone by using controls such as buttons, text boxes, and drop-down lists. Windows Phone controls are designed to share many features. You typically use the following pattern when working with controls:

• You add a control to your application UI.
• You set properties on the control, such as width, height, or foreground color.
• You hook up some code to the control so that it does something.

This QuickStart describes this pattern of using controls and contains the following sections:

• Control Example
• Adding a Control
• Setting the Name of a Control
• Setting Control Properties
• Creating an Event Handler
• What's Next

Control Example

The following example shows a TextBox control and an event handler associated with its TextChanged event. To try this example, type some text in the TextBox and a text message appears below the TextBox.

Adding a Control

You can add a control to a Windows Phone application 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 Silverlight applications for Windows Phone. In Visual Studio, when you add and manipulate controls in your application, you can use many of the program's features, including the Toolbox, Design view, XAML view, and the Properties window. For more information about the Visual Studio design view, see Silverlight Designer for Visual Studio.

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

To add a control to your application, 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.

XAML

Setting the Name of a Control

Every control has a name. To work with a control in code, you use its name. 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. 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.

XAML

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

C#

Visual Basic

Some properties, such as Width, Height or Margin, can be changed, 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. For more information about events, see Events Overview for Silverlight.

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 with the default name, you just double-click 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!.

C#

Visual Basic

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.

XAML

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

C#

Visual Basic

What's Next

You now know the basics of adding a control to your application, setting control properties, and creating event handlers. Next, you'll learn more about which controls can be used for a given purpose: Controls 2; Choosing Controls and Adding Content.

See Also

• Controls for Windows Phone