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 Static Image Viewer control Static Image Viewer

This control allows you to add images and icons to your screen...

The Static Image Viewer control in action

Although Lightswitch 2012 now includes this feature, the Static Image Viewer control is still required for those using the first version of Lightswitch. The control also includes a lot of extra properties that the Visual Studio 2012 version does not, so it still has its place if you want to add a border or drop shadow to your image.

To use the control, add a screen property (as described in the using the static controls page), and drag it onto your screen. From the control's dropdown, choose "Pixata Static Image Viewer" as shown in the screen shot below.

On the property sheet for the control, you will see a link named "Choose Image..."

Click this to open a dialog box where you can either choose an existing image, or add a new one...

That's all you need to do! If you want to add more images, you can drag the same screen property onto the screen, and repeat the above steps.

Customising the appearance of the image

If you look at the property sheet for the control, you will see that you can add a border to the image...

You can set the border colour, and the thickness. If you set the border thickness to zero, then a border will not be displayed.

Below this on the property sheet are the settings for the drop shadow...

If you don't want a drop shadow, just set the opacity to zero. The meaning of these settings are as follows...

Colour: OK, a bit obvious this one!

Direction: This is a number between zero and 359, and represents the direction of the imaginary light source that is causing the shadow. A value of zero gives a shadow directly to the right of the image. A value of 90 gives a shadow directly above the image and so on. Once you get to 360, the values wrap around, so 360 is equivalent to zero, 370 is equivalent to 10 and so on.

Depth: This setting is the number of pixels that the shadow will be offset from the centre of the image. A value of zero means that the shadow will be directly centred under the image. A value of 10 means that the shadow will be offset by 10 pixels in the direction set above.

Radius: This is the degree of blurriness at the edge of the shadow. A value of zero will give a hard shadow, a value of 10 will give a fairly soft edge, and a value of 30 will give a very soft, blurred edge.

Opacity: This is a number between zero and one, and sets the transparency of the shadow. A value of zero will make the shadow totally transparent (ie invisible), a value of 0.5 will make it semi-transparent, and a value of one will make it opaque. Note that the opacity only affects the main shadow, whereas the blurred art at the edge (assuming the radius is greater than zero) will always be partly transparent.

The best way to get a feel for how these settings work is to try them!

Here is a screen shot, showing a simple screen, with three static image controls, all using the same image, but with 1) no border or shadow, 2) a border and 3) a border and shadow.

Thanks to Justin Anderson for showing me how to cut the huge amount of code I had to implement this down to a fairly short and simple method.

Here is the home screen of an application I wrote for our doctors, that makes extensive use of the Static Image Viewer control...

The home screen of a Lightswitch application using the Static Image Viewer control

Yes, the clients liked the peppers! They have a good sense of humour (they need to with me as their software developer!)

This home screen also makes use of the rather excellent group control written by Yann Duran, available as part of his Luminous Controls for Lightswitch.