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

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

Rate This
  • Comments 9

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

Leave a Comment
  • Please add 6 and 5 and type the answer here:
  • Post
  • Excellent. Now can we get rid of the name of the grid (Adresses in the example above)? It is often redundant and takes quite a lot of space.

  • Hi Marcelo.  Yes, you are correct.  With the Data Grid inside of the Group Box (as it appears in the example above), it is redundant, and the label for the grid can certainly be hidden to reclaim real estate.  However, if you were to add additional data elements inside that Group Box, you may want to display the label of the grid after all to avoid confusion.  The important take away is that now you have more options available to you.

  • Andrew, Something that I completely overlooked! Thanks for the very useful insight into the use of the new Group Box. Off to improve my screens. Thanks, Keith

  • That's great to hear, Keith.

  • Hi Andrew,

    The label can be easily hidden (the default appearance is None). What I cannot find a way to hide is the name of the grid that shows up within the grid, on the top.

    Thanks for your answer anyway.

  • Hi thanks, for the article.

    I installed VS LightSwitch 2011 on VS2010 - If i add a new group to my screen, the dropdown of layout options for that group dont include 'Group Box'. Any idea why it disappeared?  (3 items is missing: Group Box, Adress Viewer and Address Editor)

  • My issue was cleared up in this thread:

    social.msdn.microsoft.com/.../1ad1af22-83b7-449c-a7b0-2dd6315ddc54

  • Marcelo - You can hide the Title of any grid in the code behind.

    partial void <Screen>_Created()

    {

               //Hide the title of the grid

               this.FindControl("GridName").ControlAvailable -= this.HideGridTitle;

               this.FindControl("GridName").ControlAvailable += this.HideGridTitle;

    }

    public void HideGridTitle(object sender, Microsoft.LightSwitch.Presentation.ControlAvailableEventArgs e)

    {

               DataGrid eGrid = e.Control as DataGrid;

               Grid grid = (Grid)((System.Windows.FrameworkElement)((System.Windows.FrameworkElement)(((System.Windows.FrameworkElement)eGrid).Parent)).Parent).Parent;

               grid.Children[0].Visibility = System.Windows.Visibility.Collapsed;

    }

  • Is there a way to put data into the GroupBox heading?  I have a data structure of Subject, Details, Response and would like the Subject info to be the heading of the group box, with the Details and Response making up the 'body'.  Can I do this?

Page 1 of 1 (9 items)