How to Use the New LightSwitch Group Box (Andrew Lader)

Note: This article applies to LightSwitch in Visual Studio 11 (LightSwitch V2)

When building a LightSwitch application, organizing the content is an important aspect of screen design.  The layout system in LightSwitch has allowed you to use columns, rows, tabs and tables to great effect.  And to give you even more options, the upcoming release of LightSwitch in Visual Studio 11 allows you to leverage a new grouping control, the Group Box.  Using this control, you can create boundaries in your screens, grouping similar elements together to help users focus on input fields that belong together.

Using the Group Box Control

Let’s get right to it.  The Group Box control is leveraged through the screen designer.  In the content tree, a Group Box can be added in the same way you would add a new group.  Click on the Add button, and from the drop down menu, select New Group.  This will add a Rows Layout to the tree (unless you add it under a Table Layout, which will add a TableColumn Layout).

Now, click on the down arrow of the Rows Layout, and the drop down menu will contain a new item: Group Box:

GroupBoxMenu

Choose this option, and the Rows Layout will switch to a Group Box:

GroupBoxGroup

This group behaves exactly like a Rows Layout.  Adding elements beneath it creates new row elements within the Group Box organized vertically.

Two Flavors

But unlike a Rows Layout, the Group Box has a couple of additional properties.  First, the Group Box control can be displayed one of two ways: with all four borders (the default), or with just the top border displayed.  With the Group Box selected, examine the Properties window.  In the Appearance section, you will see a new option called Border Mode.  By default it is set to All Borders.  Click on the drop down, to see the other mode options:

BorderMode

The first mode displays all four borders of the Group Box with rounded corners.  Choosing this option (or leaving it as the default) gives you the typical look and feel of a Group Box control:

GroupBoxAllBorders

Choosing the second mode, Top Border, displays only the top border of the Group Box; this is also a typical way to group fields together.  It consists of a single line that stretches across horizontally.

GroupBoxTopBorder

This mode is great for delineating portions of content that are organized vertically.

Labels

In both of the examples above, the Group Box displayed the label associated with it.  In the Properties window, right below Border Mode is a property called Show Display Name.  This option is used to suppress the label.  By default, it is checked, which means the label will be displayed.

ShowDisplayName

Likewise, unchecking it hides the label.  So for a Group Box with All Borders chosen, it will look like this:

GroupBoxAllBordersNoLabel

And a Group Box with Top Border selected and no label, you will see this:

GroupBoxTopBorderNoLabel

Nested Group Boxes

The Group Box can be nested within other layouts, including other Group Boxes.  Since it behaves like a Rows Layout, you can place a Group Box anywhere in the content tree that you can a Rows Layout.

The Group Box in Action

To make the screen shots above, I used two entities and one screen.  The first entity is Person which has a first name, a last name, a computed field for the full name, and a one-to-many relationship to the second entity, Address. The Address entity has a type, which is a choice list of address types, and then typical address fields like street, city, state and zip code.  The screen was created using the List Details screen template.  With both entities created, I added another computed field on the Person entity called HomeAddress that displays a summarized address of the first address in the list.

Once I had my entities set up, and my screen created, I set about to adding some Group Boxes:

  1. Under the top-level Columns Layout, I changed the right column (the details column) from Rows Layouts to Group Boxes.
  2. Under the right column, I changed the Person Details Rows Layout to a Group Box.  I set its Border Mode property value to Top Border.
  3. I added a new group above the Addresses Data Grid, and then moved the data grid so it was a child under this new group.
  4. I then changed this new group from a Rows Layout to a Group Box, and set the Border Mode property value to Top Border.

When I was done, my content tree looked like this:

GroupBoxContentTree_a

And when I pressed F5 and added some data, my application looked like this (note the nested Group Boxes in the Details Column):

HowItLooks_c

Wrapping Up

I have demonstrated the new Group Box control, and the various ways you can use it in your screens to create boundaries and organize your fields to help users focus on related input.  You can use this new control in the screen designer in exactly the same way as the Rows Layout.  This flexibility allows you to nest Group Boxes under other layouts, including other Group Boxes.  The Group Box allows you to display all four borders of the control, or just the top border.  And it allows you to choose whether or not you want to display the associated Group Box label.  I hope you enjoy using it in your applications!

-Andrew Lader, Visual Studio LightSwitch Team