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

The Dynamic Image Viewer control Dynamic Image Viewer and The Dynamic Colour Viewer control Dynamic Colour Viewer

If you want to add some visual impact to a data grid (or anywhere else for that matter), one way to do it is to use an icon or block of colour to signify the status of the customer, product, event, etc. This is not so easy to do out of the box in Lightswitch, although there are ways around it. I have seen some very clever, but very complex solutions to this problem, which is why I decided to make it much easier with these two controls.

The Dynamic Image Viewer and Dynamic Colour Viewer controls can be bound to an integer property, giving you the flexibility and visual impact, without the need for much (or any) code. As they are very similar, I'll describe the Dynamic Image Viewer first, and then just explain the slight differences for the Dynamic Colour Viewer.

It's easiest to explain how to use these controls by example, so we'll assume you have a screen on which you want to display a list of customers in a data grid. You want to show the customer status in the grid, as follows.

The Dynamic Image Viewer on a screen

What you can't see from the screen shot is that there are tooltips for each image, so if you hover your mouse over one, you'll see an explanation of the image.

The control allows you to choose an image for each integer, as well as a tooltip (optional). You can also set the width and height for the images.

Now there are (at least) two ways you could determine the status. One is to have a link from the Customer entity to a CustomerStatus entity. The other is to compute the status, maybe based on the customer's recent purchases, speed of payment, etc.

If you have a status entity, then you can add this to the data grid, and bind the Dynamic Image Viewer to the ID property. This is the simplest way of doing it, as you don't have to write any code.

The other way to do it is to add a computed integer property to the Customer entity, and write some code to set it based on your specific criteria. Then you bind the Dynamic Image Viewer to the computed property.

The important point to remember is that the Dynamic Image Viewer will only accept integera between 1 and 5 inclusive, and will ignore any others. Therefore, you must make sure that the integer used falls within this range.

For example, you could arbitrarily decide that anyone whose name begins with an "a" is an elephant, and anyone whose email address ends in ".com" is very bright, in which case your StatusCode computed property would have code like this...

    partial void StatusCode_Compute(ref int result) {
      if (FirstName.ToLower().StartsWith("a")) {
        result = 1;
      } else if (Email.ToLower().EndsWith(".com")) {
        result = 2;
      } else {
        result = 0;

This would give you a result as follows...

The Dynamic Image Viewer on a screen

Note that I included an extra "else" clause to set the value to zero explicitly in cases when I didn't want to show an image. This isn't actually necessary, but was added for completeness. You could choose to use one of the images for the default value instead.

The Dynamic Colour Viewer works in exactly the same way, except it allows you to choose a colour for each integer value, instead of choosing an image. It looks like this on screen...

The Dynamic Image Viewer on a screen

Just to show that you don't have to have square blocks, I made these narrower than they are tall, but you can choose whatever size suits your situation.