Share via

How to: Customize a Silverlight Screen in a Running Application

  • Article

 

For the latest documentation on Visual Studio 2017, see Visual Studio 2017 Documentation.

You can modify the appearance of a screen while the application is running by using the Customization Mode screen. You can also see a preview of how the screen will look after you apply those changes. To open the Customization Mode screen, click the Design Screen button at the top of the screen.

Note

The Design Screen button appears at the top of a screen that is open in the running application only. This button does not appear above a screen that is open in the screen designer.

When you have finished making your changes, click the Save button to commit them.

link to videoFor a related video demonstration, see How Do I: Create an Edit Details Screen in a LightSwitch Application?.

You can use the Customization Mode screen to accomplish the following design tasks:

  • Add a group of information to a screen.

  • Modify the layout of a group.

  • Add buttons.

  • Remove items.

  • Move items.

  • Change item captions.

  • Change the label position of an item.

  • Show or hide an item.

  • Change the control type of an item (for example, a label or text box).

  • Undo changes.

  • Reset item properties to their default values.

For more information about how to accomplish design tasks by using the screen designer, see How to: Design a Silverlight Screen by Using the Screen Designer.

Add a Group of Information to a Screen

  1. In the Screen Content Tree, select the node to which you want to add a group of items.

  2. Click the Add Group button. Adds a group.

  3. In the Screen Content Tree of the Customization Mode screen, select the item (for example, a field or command).

  4. Next to the screen, click the Move Up (Moves the item to a higher position in the list.) and Move Down (Moves an item to a position lower in the list.) buttons to move an item into the group.

Modify the Layout of a Group

  1. In the Screen Content Tree, click the down arrow next to a group that you want to modify.

    A drop-down list appears. The drop-down list shows all of the control types that are available for the group.

  2. In the drop-down list of controls, select a control type.

    The control type that you select affects the layout of the group. For more information about each control type, see Reference: Screen Designer Properties.

Add Buttons

  1. In the Screen Content Tree, select the node to which you want to add a group of items.

  2. Click the Add Button button, and then click New Button.

Remove Items

  1. In the Screen Content Tree of the Customization Mode screen, select the item that you want to remove from the screen.

  2. Next to the Screen Content Tree, click the Delete (Deletes the selected item.) button.

Move Items

  1. In the Screen Content Tree of the Customization Mode screen, select the item (for example, a field or command).

  2. Next to the screen, click the Move Up (Moves the item to a higher position in the list.) and Move Down (Moves an item to a position lower in the list.) buttons to position an item in the list of items.

Change Item Captions

  1. In the Screen Content Tree of the Customization Mode screen, select the item (for example, a field or command).

  2. In the Properties window, select the Display Name field, and then type the text that you want to appear as the caption of the item.

Change the Label Position of an Item

  1. In the Screen Content Tree of the Customization Mode screen, select the item (for example, a field or command).

  2. In the Properties window, click the drop-down list under Label Position, and then select the desired position.

    The following table describes each option.

    Label position Description
    Left-aligned The label appears to the left of the control.
    Right-aligned The label appears to the right of the control.
    Top The label appears above the control.
    Bottom The label appears below the control.
    None No label appears for the selected data field.
    Collapsed The label appears as collapsed.

Show or Hide an Item

  1. In the Screen Content Tree of the Customization Mode screen, select the item (for example, a field or command).

  2. In the Properties window, select or clear the Is Visible property.

    If you select Is Visible, the item will appear on the screen. If you clear Is Visible, the item will not be visible on the screen.

Change the Control Type of an Item

  1. In the Screen Content Tree of the Customization Mode screen, select the drop-down list next to the item.

  2. From the drop-down list, click the desired control type.

    Most control types are built-in control types. You can also set the control type to a custom control that you create by using other tools. For more information about custom controls, see How to: Add a Custom Control to a Silverlight Screen.

Undo Changes

  • In the Customization Mode screen, click Cancel.

    All changes that you made since you opened the Customization Mode screen will be discarded.

    Note

    You cannot undo individual edits on the Customization Mode screen.

Reset the Properties of Items to Their Default Values

  1. In the Screen Content Tree, select a node that represents a group of items.

  2. Next to the Screen Content Tree, click the Reset Items button. Resets item properties to their default values.

See Also

Screens: The User Interface of Your LightSwitch Application
How to: Design a Silverlight Screen by Using the Screen Designer