Using Controls

October 21, 2011

You add controls to your application to display data and enable the user to interact with your application.

You Will Learn

• What controls are available and how to choose the right one.
• How to choose between the Panorama and Pivot controls.
• How to use controls for text entry.
• How to respond to control events.

Applies To

• Silverlight for Windows Phone OS 7.1

  

Choosing Controls

You can use many of the controls by just dragging them from the Toolbox to the design surface.

The following table gives you some guidance on which controls you should use depending on the application requirement. The table lists some of the controls available. There are additional controls available in the Silverlight for Windows Phone Toolkit. For a complete list of controls, see Controls for Windows Phone. For more information about selecting the right controls for your application, see the Types of Controls QuickStart.

*Not themed for the Windows Phone design, but can be used if styled appropriately.

Performance Tip:
If you are using the ProgressBar control in indeterminate mode, it can affect the performance of your application. For an indeterminate progress bar, consider using the PerformanceProgressBar in the Silverlight for Windows Phone Toolkit or the ProgressIndicator.

Performance Tip:
If you are using resource intensive controls (such as Bing maps or video) and your application runs out of memory, you can query the DeviceStatus properties to monitor memory usage. For more information, see Device Status for Windows Phone and Performance Considerations in Applications for Windows Phone.

The following illustration shows an example of some of the controls used on the summary page of the Fuel Tracker application. Note that this page uses a Pivot control to extend the usable space.

Choosing Panorama and Pivot Controls

The phone has two special controls that effectively extend the layout area of the phone. The Panorama and Pivot controls provide horizontal navigation through phone content, enabling the user to flick and pan as necessary.The Panorama control creates a panoramic view of items that can be panned side-to-side. The Pivot control provides a quick way to manage the views of large sets of data within an application. The Pivot control can be used as a navigation interface for filtering large sets or switching between views.

The summary page in Fuel Tracker utilizes the Pivot control to enable the user to quickly pan between their last fill-up information and the summary of all their fill-ups. Initially, this information was located on one page. This layout made the page feel too crowded, so two views were displayed in a Pivot control.

Design Guidelines for Panorama and Pivot:

Use Panorama elements as the starting point for more detailed experiences. Use a Pivot control to filter large data sets, providing a view of multiple data sets, or to provide a way to switch between different views of the same data. Do not use the Pivot control for task-based navigation, like in a wizard application. Vertical scrolling through a list or grid in Panorama sections is acceptable as long as it is within the confines of the section and is not in parallel with a horizontal scroll. Never place a Pivot control inside of another Pivot control. Never place a Pivot control inside of a Panorama control. Applications should minimize the number of Pivot pages. The Pivot control should only be used to display items or data of similar type. You should not use Application Bar buttons to provide navigation in a Pivot control. If the Pivot requires navigation aids, you are probably misusing it. For more information, see Panorama Control Design Guidelines for Windows Phone and Pivot Control Design Guidelines for Windows Phone.

For more information about using the Panorama and Pivot controls, see Panorama Control for Windows Phone and Pivot Control for Windows Phone.

Using Controls for Text Entry

When you add controls for text entry to the application, you should allow space for the on-screen keyboard, also called the soft input panel (SIP). You should ensure that the keyboard does not cover buttons or other navigation controls. One way to prevent this is to place your navigation elements in the Application Bar.

To prevent errors in user entry, you should apply the most appropriate on-screen keyboard by setting the InputScope for the control. Two examples of InputScope values are listed in the following table.

For more information on using text controls and the input scope values, see the Text QuickStart and How to: Specify On-Screen Keyboard Layout for a TextBox. For a list of all of the input scope values, see InputScopeNameValue Enumeration.

Providing the correct keyboard will limit user error, but you should also provide some validation for user entries. For more information about validation, see Validating Data Entry Input.

Design Guideline:
If your application supports text input, you should support landscape orientation because of the possibility of a hardware keyboard.

Responding to Control Events

Gesture input occurs when the user interacts with the screen, for example by tapping or flicking. Gesture handling, which translates the gestures into standard events, is built into the UI controls. For example, a Button control contains a Click event that is raised when the Button is tapped. 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 create an event handler by using the Events tab of the Properties window. The Properties window lists all of the events available for the selected control. The following illustration lists some of the events for a Button.

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 Click event for a Button.

private void PhotoButton_Click(object sender, RoutedEventArgs e)
{

}

Private Sub PhotoButton_Click(ByVal sender As Object, ByVal e As RoutedEventArgs)

End Sub

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

Once you have specified the event, you can either type in a name for the event handler or double-click <New Event Handler> in the IntelliSense window that appears. The following illustration shows the IntelliSense window that appears to help you create a new event handler.

The following XAML shows that the Click event for the Button is associated with an event handler named PhotoButton_Click.

<Button Grid.Row="2" Grid.ColumnSpan="2" 
        Content="choose picture" Click="PhotoButton_Click" 
        HorizontalAlignment="Center" VerticalAlignment="Center"/>

For more information about working with controls, see the Using Controls QuickStart. For more information about events, see Events Overview for Silverlight.

Next Topic | Previous Topic | Home