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

Using The Static Controls

Lightswitch is a data-driven design environment, meaning that everything on the screen is bound to data. This is fine when you want to display information from your database, but is a bit of a problem if you want to display static information, such as instructions, images and so on.

The original method for adding static information to a screen was to add a local property to the screen, set its value to be the information you wanted to display, and then bind this to a control on the screen. Whilst this works, it's a bit painful, especially if you want more than two or three things displayed, as you need a separate local property for each one. To make life worse, displaying images required a pile of code to put the image data in the right format.

To make life easier, the Pixata Custom Controls For Lightswitch collection includes several static controls, which allow you to set the content directly in the screen designer.

In order to use these controls, you still need a local screen property, but the value of this is not used, meaning that you can reuse a single one as many times as you like.

As an example, we will add some information to a screen using some of the Pixata Custom Controls For Lightswitch. On a screen, click the "Add Data Item..." button at the top of the designer, and in the window that pops up, change the Screen member Type to "Local Property" and uncheck the "Is Required" checkbox. You can leave the Type as String, as all of the static controls work with string properties. You can name the property anything you like, but I find it easiest to name it StaticProperty, as this makes it clear what it's there for.

The Add Data Item window

When you click the OK button, you'll see the new property in the view model section on the left side of the designer.

The new static property in the designer

Note that I have dragged the new property to the top of the list, so it doesn't get mixed up with the other stuff in there. This also prevents Lightswitch from automatically expanding the query, which takes up a lot of space and can be annoying on a screen with many properties.

Now you can drag this property onto your screen, and then change the control type.

Choosing the type of control to use

Once you have chosen the control type, you can set the properties in the screen designer. For example, if we choose the Static Image Viewer, then the Properties panel will show the following...

The properties panel for the Static Image Viewer

As you can see, everything can be set directly, without the need for writing any code.

Note that Lightswitch v2 (the one that comes with Visual Studio 2012) allows you to add static text and images without the need for adding a local property. If you just want plain text or a plain image, these are even easier to use than the two corresponding static controls here. However, if you are using Lightswitch v1 (also known as Lightswitch 2011), or if you want something more than plain text and images, the static controls in the Pixata Custom Controls For Lightswitch will be a good choice.