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.
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.
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.
In your screen’s InitializeDataWorkspace method, set the value of the label string.
Private Sub EditableCustomersGrid_InitializeDataWorkspace(saveChangesTo As List(Of Microsoft.LightSwitch.IDataService))
‘ Write your code here.
Me.MyLabel = “My Label Text”
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.