Tips and Tricks for Using the Screen Designer (Sheel Shah)

Tips and Tricks for Using the Screen Designer (Sheel Shah)

Rate This
  • Comments 6

The screen designer in Visual Studio isn’t a typical forms design tool. We strove to make it simple to get started using some predefined templates. However, it’s also pretty easy to customize the output of those templates to get exactly the screen you want. In this post, I’m going to walk through some tips and tricks to get the most out of our screen designer.

Blank Screen Template

LightSwitch does not ship with a blank screen template out of the box, but it is relatively simple to start with a blank screen in order to completely control the screen layout yourself. In the Add Screen Dialog, select the Editable Grid template but do not select any screen data. This will result in an empty screen.

image

image

You can now add any data you need for your screen using the Add Data Item Dialog. For example, I can add a collection of Customers to my screen.

image

 

Adding Static Text to the Screen

Most LightSwitch controls provide a built-in label that can be controlled using the Label Position property. However, there are definitely situations in which you may just need to display some text on the screen. First, add a new String data item to the screen named MyLabel.

image

In your screen's InitializeDataWorkspace method, set the value of the label string.

VB:

        Private Sub EditableCustomersGrid_InitializeDataWorkspace(saveChangesTo As List(Of Microsoft.LightSwitch.IDataService))

            ' Write your code here.

            Me.MyLabel = "My Label Text"

        End Sub

C#:

        partial void EditableCustomersGrid_InitializeDataWorkspace(List<IDataService> saveChangesTo)

        {

            this.MyLabel = "My Label Text";

        }

 

Now you can drag the MyLabel property onto your screen's layout where needed. Change its control type to a Label and set the Label Position to Collapsed.

image

 

image

Similarly you can also add static images to screens. Take a look at Beth’s post that explains how to do this: Adding Static Images and Text on a LightSwitch Screen.

 

Using the Rows Layout

The rows layout will divide available space into a set of rows. It also allows you to control how much space is assigned to each row. This is controlled through a combination of the Vertical Alignment and Height properties for each child of the Rows Layout.

image

Directly specifying the height will assign that amount vertical space to the row. Any rows that have Stretch specify will use up the remaining room. To divide space among the stretch rows, LightSwitch will use the Weighted Row Height property. For example, if each row has its Weighted Row Height set to 1, each row will receive the same amount of vertical space. However, if one row has a Weighted Row Height set to 2, it will receive twice as much vertical space as those set to 1. This is similar to star (*) sizing in the Silverlight Grid.

image

image

To cause a particular row to only take up the amount of space that it needs its Vertical Alignment must be set to Top. This will ensure that LightSwitch uses the Height property to determine the size of the row.

image

 

Using the Columns Layout

The columns layout behaves similarly to the Rows Layout. Instead of dividing available space into a set of rows, it will divide it into columns. The Horizontal Alignment and Width properties behave similarly to Vertical Alignment and Height.

 

Using the Table Layout

Many layouts can be created with a combination of the Rows Layout and Columns Layout. For example, the List and Details screen uses the Columns Layout as its root. This Columns Layout contains two children - and therefore has two columns which are Rows Layouts.

image

However, a problem arises when you need information in columns to also align vertically. If you have two independent Rows Layouts, there is no guarantee that each row will be the same height.

image

In this example, the picture field causes any rows below it to not be aligned with the rows in the left column. The Table Layout will address this issue by aligning multiple rows of information across columns. Changing the columns layout to a Table Layout and each child to a TableColumn Layout will result in the following screen. The height of the first row is shared across both columns, resulting in a screen that is aligned correctly.

image

This is better, but ideally, String Field1 and String Field 2 would be moved up. Each Cell in a TableColumn Layout has a Row Span property. We can specify that the Picture field spans three rows, resulting in a more ideal screen. Row Span is similar to the Silverlight Grid Row Span property.

image

 

Using a Modal Window

To add a modal window to your screen, add a new group and change its control type to Modal Window. Any children of this group will then be displayed in the modal window. By default, this group will be displayed as a button on the screen. Clicking on this button will open the window.

image

image

In many situations, you don't want a modal window to be displayed as a button. Instead, it is shown based on some other action by the user (for example, clicking on an edit button in the data grid). To turn off the button, select the modal window and set the Show Button property to false.

image

There will no longer be a button to open the modal window. It can only be opened programmatically. Typically, I will place any modal windows that are launched programmatically as the last groups in the screen. This will ensure that they don't interfere with the rest of the screen's layout.

image

To programmatically open or close modal windows, each LightSwitch screen contains OpenModalWindow and CloseModalWindow functions. These take the name of the modal window to be opened or closed. For example, if our modal window is called "MyModalWindow", the following code will open the modal window.

VB:

    Me.OpenModalWindow("MyModalWindow")

C#:

    this.OpenModalWindow("MyModalWindow");

Using the CloseModalWindow function, it is relatively simple to build and Ok/Cancel modal dialog. Add two buttons to your modal dialog, called Ok and Cancel. In the code for these buttons call CloseModalWindow and take the appropriate Ok or Cancel action.

image

image

In my next post I’ll show you how you can create your own custom Add and Edit dialogs using some of the techniques I just discussed.

Leave a Comment
  • Please add 8 and 1 and type the answer here:
  • Post
  • Can you let us know how you installed: onto a virtual disk or side-by-side presence with exiting copy of Visual Studio. Is LightSwitch stable enough for side-by-side?

  • Hi Clinton,

    If you already have VS Pro or higher then LightSwitch will integrate directly into it. LS will just show up as another project template in VS. No side-by-side required.

    Please ask additional setup questions in the forum:

    social.msdn.microsoft.com/.../vslightswitch

    Cheers!

  • Nice, useful info, Sheel.  Thanks for the tutorial.

  • Hi Shah

    Please show me the code to perform the OK or Cancel.

    Thanks.

  • hi

    the code to perform OK and Cancel

    blogs.msdn.com/.../creating-a-custom-add-or-edit-dialog.aspx

  • Thank you!! the table layout made my day. Exactly what an alignment freak like me needed.

Page 1 of 1 (6 items)