Customizing Screen Appearance

In this lesson you will learn how to change the layout and appearance of a screen in LightSwitch.

Customize the Screen

By using the Screen Designer, you can customize a screen in many ways. For example, you can change the display order of fields, change the kind of control that is used to present a field, and restrict the ability to modify a field.

To view a screen

1. In Solution Explorer, double-click the OrdersByCustomers screen.

2. Press F5 to run the application, and then, on the navigation menu, click Orders By Customers to display the form.

   When you select a customer in the Customers list on the left, details about that customer and a list of related orders are displayed on the right.

3. Click the Close button in the upper-right corner of the application window to close it.

To change display names

1. In the center pane of the Screen Designer, select the topmost Columns Layout | Orders By Customer node.

2. In the Properties window, select the Description field and type Select a customer to see their orders..

   

   This message will be displayed as a tooltip for the screen when you run the application.

3. Press F5 to run the application, and on the navigation menu, click Orders by Customers to display the screen. To display the tooltip, move the pointer over “Orders By Customer” on the screen’s tab and pause.

4. Click the Close button in the upper-right corner of the application window to close it.

To change controls and display order

1. Under the Rows Layout | Details Column node, select the Company node.

   

2. In the dropdown list, select Label.

   This prevents the Company field from being edited in the running application.

3. Select the Phone node.

4. Drag it just under the Company node.

   This changes the display order on the screen.

5. Press F5 to run the application, and on the navigation menu, click Orders By Customers to display the screen and verify the changes.

6. Click the Close button in the upper-right corner of the application window to close it.

To disable commands for a data grid

1. Expand the DataGrid | Orders node.

2. Expand the Command Bar node if it isn’t already expanded.

3. Select the Edit… node. In the Properties window, clear the IsVisible check box.

   

   This disables the Edit command for the Orders data grid.

4. Repeat the process for the Delete node.

5. Press F5 to run the application, and on the navigation menu, click Orders By Customers to display the screen and verify the changes.

   Notice that the Edit and Delete buttons are now missing.

6. Click the Close button in the upper-right corner of the application window to close it.

To make a screen read-only

1. Expand the DataGrid | Orders node.

2. Expand the Command Bar node.

3. Select the Add… node, and then on the ToolBar Ribbon, click the Delete button.

4. Select the DataGrid | Orders node and select Data Grid Row | Order.

5. In the Properties window, select the Use Read-Only Controls check box.

   This prevents users from modifying data in the grid.

6. Press F5 to run the application, and on the navigation menu, click Orders By Customers to display the screen and verify the changes.

   Notice that the Add button is gone, and that you can no longer modify data in the grid.

7. Click the Close button in the upper-right corner of the application window to close it.

Closer Look

This lesson showed how to perform several tasks to modify the appearance and behavior of the OrdersByCustomer screen. The lesson also demonstrated how the Screen Content Tree in the Screen Designer relates to the user interface in the running screen.

When you changed the Description for the screen, you provided help for the end user. You may remember that you changed the Description for the ContactName field in the Entity Designer in an earlier lesson. When you set the Description in the Entity Designer, the change is propagated to all screens; when you set it in the Screen Designer only the screen that you are working with is changed.

When you changed the control type for the Company field from a TextBox to a Label, you may have noticed that the list of available controls for each field only includes controls that are appropriate for the underlying data type of the field. For example, for a Text field, you can choose a TextBox or a Label. If you have installed an extension that includes a control for displaying Text, that control would also appear in the list. Another lesson describes extensions.

In addition to dragging a field to another place in a list, in this case, the Customers list, you can also drag fields from the left pane of the Screen Designer to the center pane. For example, if you were to accidentally delete the City field, you could drag it back from the Customers node in the left pane.

When you disabled the Edit and Delete commands in the Orders grid, you may have noticed that you could still edit and delete orders directly in the grid. To address this, you later made the Orders grid read-only by setting the Use read-only Controls property. The Use read-only Controls property affects all nodes under it in the Screen Content tree. For example, if you set the Use read-only Controls property for the top-level Grid | Orders by Customers node, the whole screen becomes read-only.

Note

When the Use read-only Controls property is set, it does not disable the Add, Edit, and Delete commands. Users can still modify data when these commands are enabled.

Next Steps

In the next lesson, you will learn how to further customize the screen.

Next lesson: Adding a Local Property

See Also

Tasks

How to: Create a Silverlight Screen

Walkthrough: Designing a Screen

Other Resources

Creating Screens

Screens: The User Interface of Your LightSwitch Application