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.
When you click the OK button, you'll see the new property in the view model section on the left side of 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.
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...
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.