Tour of the Screen Designer

You can design a screen by using the screen designer. The screen designer opens when you create a screen or when you double click any screen node in Solution Explorer.

This topic contains the following sections:

• Screen Designer at a Glance

• Screen Members List

• Screen Content Tree

• Screen Designer Command Bar

Screen Designer at a Glance

The screen designer consists of the screen members list, the screen designer command bar, and the screen content tree. The following illustration shows the location each area in the screen designer.

Screen Members List

The screen members list contains items that are available for your screen. These items include data, methods, and local properties. You can incorporate these items into your screen by dragging them onto the screen content tree.

By default, the screen members list contains methods associated with the basic commands of a screen (For example: the Save command). The list also contains collections of data that you select in the Add New Screen wizard. You can also add items to the screen members list.

The following illustration shows the screen members list.

Data in the Screen Members List

In the screen members list, the data that is available to the screen appears as collection nodes. You can view the fields of a collection by expanding the collection node. You can add a collection of data to the screen by dragging the collection node from the screen members list onto the screen content tree. You can also drag individual fields from the screen members list onto the screen content tree.

You can modify the appearance and behavior of a collection by using the Properties window. You can specify which rows of data will appear in a collection by clicking the Edit Query link next to the name of the collection. For more information, see How to: Filter Data on a Silverlight Screen.

Local Properties in the Screen Members List

You can add custom fields called local properties to collect or display information. Like collections and fields, you can drag local properties from the screen members list onto the screen content tree. In the screen content tree, local properties appear as controls (For example: a text box). For more information, see How to: Add a Local Property to a Silverlight Screen.

Methods in the Screen Members List

A method is a unit of business logic that you can associate with a button on the screen. Drag methods to any command bar node in the screen content tree. The screen designer automatically adds a button that the user can click to execute the method. For more information, see How to: Add a Custom Command to a Silverlight Screen.

Screen Content Tree

The screen content tree represents the contents of a screen as a hierarchy of nodes called groups. You can expand or collapse groups to view the commands, local properties, and data fields that are contained in the group.

The following illustration shows the screen content tree:

You can specify the way in which you want information organized within a group by selecting group control layouts. You can also add groups to other groups, and add, remove, and position fields and commands. For more information about how to accomplish any of these tasks in the screen content tree, see How to: Design a Silverlight Screen by Using the Screen Designer.

Screen Designer Command Bar

The screen designer command bar appears directly above the screen content tree. This command bar contains commands that you can use to edit the query of a collection, add collections, create local properties and methods, remove information from a screen, and write custom code that runs when certain screen-related events occur. The following table describes each button on the screen designer command bar:

Command	Description
Edit Query	Use this command to modify the query of a data collection. This command only appears if you select the heading of a collection in the screen members list. For more information, see How to: Filter Data on a Silverlight Screen.
Add Data Item	Use this command to add a method, local property or data collection to the screen. For more information, see any of the following topics: How to: Add a Custom Command to a Silverlight Screen. How to: Add Data to a Screen. How to: Add a Local Property to a Silverlight Screen.
Add Layout Item	Use this command to add a button, group, or custom control to the screen. For more information about how to add buttons and groups, see How to: Design a Silverlight Screen by Using the Screen Designer. For more information about how to add a custom control, see How to: Add a Custom Control to a Silverlight Screen.
Delete	Use this command to delete items that appear in the screen members list or the screen content tree.
Reset	Use the command to reset controls to their default control type and add to add back fields that you have removed. This command only applies to certain types of controls.
Write Code	Use this command to open the screen code file. In the screen code file, from the Declarations drop-down list, you can select methods that you want to extend. In the Screen Designer command bar, you can click the drop-down arrow next to the Write Code button to reveal a list of methods that apply to the item that is currently selected in the screen content tree or screen members list. From this list, you can select methods that you want to extend. For more information, see How to: Handle Silverlight Screen Events.

See Also

Tasks

How to: Create a Silverlight Screen

How to: Design a Silverlight Screen by Using the Screen Designer

How to: Customize a Silverlight Screen in a Running Application

How to: Create an HTML Client Screen

How to: Design an HTML Screen by Using the Screen Designer

Concepts

Reference: Screen Designer Properties

Other Resources

Screens: The User Interface of Your LightSwitch Application