Pixata Custom Controls
For Lightswitch

Recent Posts

Popular tags (# posts in brackets)

Anonymous types (3) ASP.NET (5) C# (3) C# tricks and tips (2) Computers (6) Design patterns (3) DomainDataSource (3) Dynamic data (4) Entity framework (3) Entity model framework (5) F# (3) LightSwitch (12) Linq (6) Microsoft (2) MVP (2) MVVM (2) Project Euler (2) RIA services (5) Silverlight (2) SQL Server (4) Unit testing (4) Visual Studio (7) WCF (3) WPF (3)

Gratuitous link to StackExchange




The opinions expressed herein are my own personal opinions and do not represent my employer's view in any way.

Actually, as I'm self-employed, I guess that means that any views I expressed here aren't my own. That's confusing!


Theme modified from one by Tom Watts
C#/F# code styling by Manoli (for posts pre-2016) and Google code prettify (for post from Jan 2016 and beyond)

My rambling thoughts on exploring the .NET framework and related technologies

Please note that this blog has ben retired. Most of the material has been migrated to my new blog at www.pixata.co.uk. Please update your bookmarks to point to the new blog.

The Expandable Panel control Expandable Panel

If you want to save some screen space, then the Expandable Panel may be of interest. It adds a group control (like the built-in Rows Layout control) that allows you to hide or show the contents. You can specify whether the panel is initially expanded or contracted, and control this behaviour in code if you wish.

Using the Expandable Panel is very easy. Click the Add button in the Lightswitch designer, just like you would to add a new Rows Layout control...

The Add button in the Lightswitch designer

When the default Rows Layout control has been added, open the pop-up menu and change the type to Pixata Expandable Panel. You can now drag controls into it, just like you would with a regular Rows Layout control. If you want a columns layout instead, then the easiest way to do this is to add a Columns Layout control to the Expandable Panel, and add your data controls to that. A future version of the Expandable Panel may include a property to allow a columns layout option without needing to do this.

Here is an example of a screen with a collapsed panel...

The Expandable Panel in its collapsed state

...and here's what it looks like when you expand it...

The Expandable Panel in its expanded state

The control-specific properties that you can set are as follows...

  • Image - sets the image that will be used for the button that expands and collapses the panel. If you leave this unset, then the default image will be used.
  • Header Text - controls the text that is displayed vertically to the left of the panel
  • Initially Expanded - tick this to have the panel expanded when the screen is first loaded. Leave it clear (the default) to have the panel collapsed
  • Expanded Width - the size (in pixels) of the panel when it is expanded
  • Header Button Image Size - pretty self-explanatory!

You can control the panel's state in code. To do this, you will first need to get hold of a reference to the control when the screen first loads. From the designer, click the Write Code button, and choose ScreenName_Created. This will take you to the code for the screen. You'll need to add the following line right at the top of your code file...

using PixataCustomControls.Presentation.Controls;

...and you will need to modify the ScreenName_Created method to look like this...

    private ExpandablePanel pep;

    partial void ScreenName_Created_Created() {
      this.FindControl("exppanel").ControlAvailable += (s, e) => {
        pep = (ExpandablePanel)e.Control;

Note that this assumes you named your Expandable Panel "exppanel" - if you used a different name, change the code above. You now have a reference to the Expandable Panel, which you can use later.

In the code where you want to expand or collapse the panel, you can simply set the IsExpanded property of the control. For example if you were to add a method named TogglePanel to the screen, and drag it to the Screen Command bar, then you could add the following to the TogglePanel_Execute method...

    partial void TogglePanel_Execute() {
      Dispatchers.Main.BeginInvoke(() => {
        pep.IsExpanded = !pep.IsExpanded;

Note that you need the dispatcher if you are calling this from a screen method, as the panel code will run on the UI thread. If threads and dispatchers confuse you, please see this slightly facetious, but hopefully helpful explanation of Lightswitch threads and dispatchers. Hopefully it will clarify things a little.

OnExpanded and OnCollapsed event handlers

In case you want to do something when the panel expands or collapsed, you can capture these two events in code. The following is a simple example of how to do this...

    partial void MyScreen_Created() {
      this.FindControl("ExpPanel").ControlAvailable += (s1, e1) => {
        ((ExpandablePanel)e1.Control).OnExpanded += (s, e) => {
          ExpandedMessage = "Panel expanded at " + DateTime.Now.ToLongTimeString();
        ((ExpandablePanel)e1.Control).OnCollapsed += (s, e) => {
          ExpandedMessage = "Panel collapsed at " + DateTime.Now.ToLongTimeString();

This assumes you have a string screen property named ExpandedMessage, which you want to update when the panel state changes. In practice, you may want to do something more complex, but the principle is the same.

To make this work, you'll need to add the following line to the top of your code file...

using PixataCustomControls.Presentation.Controls;