Adding Static Images and Logos to LightSwitch Applications

NOTE: This information applies to LightSwitch Beta 1 ONLY. For V1 release (RTM) please see Adding Static Images and Text on a LightSwitch Screen

We’ve had a couple questions on how you can add your own static images and logos to your LightSwitch applications so I thought I’d detail a few ways that you can do this to make your applications look a little more branded without having to load a completely different shell or theme. When you have an image property on your entity, LightSwitch handles creating a nice image editor for you to load and save images in your database. However sometimes you just want to add a static image or logo to your screens that aren’t part of your data entities. There are a few ways you can do this.

The first method just displays an image onto the background of the application itself. You can see it when the application loads and also when all screens are closed. To add the logo to your application, go to Project –> Properties and select the General tab. There you can specify the Logo Image.

image 

When you run your application the logo appears on the background of the main window area.

image

Adding a Static Image to a Screen

There are a couple ways you can add a static image to a screen. One way is by writing a little bit of code to load an image from the client resources and pop it onto a static screen property. This allows you to load any image from the client resources onto any screen. Open the screen designer and click “Add Data Item…” at the top and choose Local Property with a type of Image. I named the property MyImage:

image

Next drag the MyImage property to where you want it in the content tree. Note, however, that not all areas of the tree will allow you to drop the image if there is a binding already set to a group of controls. The trick is to manipulate the layout by selecting the right groups of controls (i.e. new groups of two rows or columns) and then binding them by selecting the data items you want. For instance let’s say I have an image I want to place across the top of a screen and I want the rest of the controls to appear below that. In that case start, with a Two Row layout and for the top row content select the MyImage property and set the control to Image Viewer.

image 

Then for the bottom row you can select the data item or collection you want to display. If you have a master-detail scenario, then you’ll want more rows. For the bottom row select “New Group” for the content and then change the Vertical Stack to the Two Rows control. This technique lets you build up as many sections on the screen that you want. You can also select Two Column layout for positioning controls side-by-side.

image image

For my example I’m working with data similar to the Vision Clinic walkthrough sample so I’ll also add patient details as a two column layout and then under that I’ll and the child prescriptions, appointments and invoices as a tabbed control of data grids on the bottom row (you can also tweak the layout of the screen at runtime for a live preview). So my content tree looks like this:

image

Okay now for the fun part – showing the static image on the MyImage screen property. What we need to do first is add the image to the client as a resource. To do that, switch to File View on the Solution Explorer, expand the Client project node, right-click on the UserCode folder and select Add –> Existing Item and choose your image file.

image   image

This will add the image as a resource to the client project. Next we need to write a bit of code to load the image into the screen property. Because the loading of the image resource is pretty boilerplate code, let’s add a shared class that we can call from any screen. Right-click on the UserCode folder again and select Add –> Class and name the class ImageLoader. Write the following code:

 Public Class ImageLoader ''' <summary> ''' Loads a resource as a byte array ''' </summary> ''' <param name="path">The relative path to the resource (i.e. "UserCode\MyPic.png")</param> ''' <returns>A byte array representing the resource</returns> ''' <remarks></remarks> Shared Function LoadResourceAsBytes(ByVal path As String) As Byte()
        'Creates a URI pointing to a resource in this assembly Dim thisAssemblyName As New System.Reflection.AssemblyName(GetType(ImageLoader).Assembly.FullName)
        Dim uri As New Uri(thisAssemblyName.Name + ";component/" + path, UriKind.Relative)

        If uri Is Nothing Then Return Nothing End If 'Load the resource from the URI Dim s = System.Windows.Application.GetResourceStream(uri)
        If s Is Nothing Then Return Nothing End If Dim bytes As Byte() = New Byte(s.Stream.Length) {}
        s.Stream.Read(bytes, 0, s.Stream.Length)
        Return bytes
    End Function End Class 

 

 

Now back on the screen designer drop down the “Write Code” button on the top right and select the Loaded method. Now all you need to do is call the ImageLoader with the relative path of the image:

 Public Class PatientDetailScreen Private Sub PatientDetail_Loaded()
        Me.MyImage = ImageLoader.LoadResourceAsBytes("UserCode/funlogo.png")
    End Sub End Class

Run it and you will see the image loaded into the image viewer. You can customize the screen and change how the image is displayed by playing with the Content Size and Stretch properties.

image

Building your own Static Image Control

The above technique works well if you have a lot of different static images across screens or if you are just using Visual Studio LightSwitch edition. However if you just have a single image you want to display on all your screens it may make more sense to build your own control and use that on your screens instead. This eliminates the need for any code on the client. If you have Visual Studio Professional edition or higher you can create a Silverlight Class Library in the same solution as your LightSwitch project. You can then add an image control into that library and then use it on your LightSwitch screens.

To make it easy I added a User Control and then just placed an image control on top of that using the designer. I then set the Stretch property to Fill and added the logo into the project and set it as the Source property of the image control using the properties window:

image

Rebuild the entire solution and then head back to the LightSwitch screen designer. First comment out the code from the Loaded method we added above if it’s there. Change the control for MyImage to Custom Control. Then in the properties window click the “Change…” link to set the custom control. Add a reference to the Silverlight class library you built, select the control, and click OK.

image

Now when we run the screen we will see the static image control we created:

image 

The nice thing about creating your own control is you can reuse it across screens and LightSwitch projects and there’s no need to add any code on the client.

Enjoy!