How to Add Images and Text to your LightSwitch Applications (Andrew Lader)

Note: This article applies to LightSwitch in Visual Studio 2012 (LightSwitch V2)

It’s common for developers to add static images and text to their screens to help guide their users through the application.  Although you can easily add images that come a database to your screens, up till now, adding static images and labels has not been a straightforward task for LightSwitch developers in the past.  With the release of LightSwitch in Visual Studio 2012, you can add images and text to your screen without writing any code, or having to first add the images and/or text to your database.  This new feature makes adding images and text a snap.

Adding an Image to a Screen

Let’s jump right in and see exactly how easy it is to add an image to a screen.  Perhaps you want to add an image to complement a screen that creates new customers for the application.  The LightSwitch project is quite simple, consisting of a single Customer table that has just two fields, first and last name.  We’ll use the New Data screen template to add a new screen, specifying the Customers table as the screen data.

On this screen, you want to provide a standard image that users will easily recognize as ‘customers’.  In the screen designer, pick a location where you want to add an image.  For my example, I am going to add it to the Rows Layout that contains the FirstName and LastName elements in the content tree.  When I click the Add menu button, the drop down menu is displayed.  Notice two additional menus: Add Image… and Add Text…


For now, let’s focus on the Add Image… menu.  Click on that menu and you will see the Select Image dialog popup:


This dialog may be familiar since it’s used to select the image for the application logo image, and the application icon.  In this case, we’ll add a new image by clicking on the Import… button.  This brings up the standard Open dialog.  As a quick demonstration, let’s go to the Pictures library on your computer and select one of the sample pictures there (I have chosen the penguins image).  Click OK on the Open dialog.  Your Select Image dialog should now look like this:


As the image above illustrates, the penguins image is now added to the list on the left (and selected), and a preview is displayed on the right.  Now click OK to accept this selection.  Your content tree should look like this:


That’s it!  The image is added to the content tree, despite not being a data-bound element.  That’s all we need to do to add an image to our application.  So, let’s try it out.  What happens when we run it?  Hitting F5 yields the following:


As you can see from the image above, the penguins picture is placed just below the first and last name fields, and fills up the rest of the screen.  As it turns out, the penguins image has a resolution of 1024×768, so no wonder it shows up so big.

Let’s change a few things.  First, let’s find a more apropos image for this screen.  I have a generic clip art image I am going to use, but you can use whatever image you wish.  To specify a different image, first close the application and return to the screen designer.  Making sure the image element in the content tree is selected, and examine the Properties window.  You’ll notice there is a link called Choose Image… (circled in red below):


Click on this link to bring the Select Image dialog back up.  We’ll probably not use the penguins image in our application anymore, so go ahead and delete it by clicking on the Delete button.  A dialog prompt asks if you want to continue; click OK.  Now, choose the image you really want to use, and click OK to dismiss the dialog.  And finally, drag the image element in the content tree to above the first name element:


Now, let’s use the properties in the Properties window to make sure the image shows up the way we want.  By default, the Horizontal Alignment is set to Left, and the Vertical Alignment is set to Top.  These are fine.  But the Width and Height are set to Auto.  Let’s change these to the actual pixel size of our image.  In my case, my image is 32×32, so I will set the Height and Width properties to be 32 pixels each.

While doing this, you may noticed another property called Show Border in the appearance category.  By default, this is unchecked.  If you wish, you can check this to add a border around your image.  We’ll leave it unchecked for now.  Hit F5, and you should see something like this (depending on the image you chose):


This looks much better.

Add some Text to a Screen

Now, we’re going to add some text next to our image.  But first, we need to reorganize our screen a little bit.  We’re going to have a Columns Layout above the Rows Layout where our first and last name elements are located.  This will allow us to place our text beside our image.  So under the screen’s top-level Rows Layout, add a Columns Layout, and drag it above the Rows Layout that contains the first and last name elements.  then, drag the image element to this new Columns Layout.  Your content tree should look like this:


Below the image element, click on the Add menu button, and select Add Text… from the drop down menu:


The Edit Text dialog now appears.  Enter some text like this:


Click OK to accept the text.  Before we run this, let’s examine the properties for the text.  In the Properties window, you’ll notice the familiar properties used to control the look and feel of text in LightSwitch.  The default settings are good enough for our purposes right now, but let’s make one change.  Set the Vertical Alignment to be Center.

Notice that like the image, there is a property called Edit Text… which will bring up the Edit Text dialog (see the circled item below).  This will let you modify the text for this element.


There is one more change we need to make.  Select the Columns Layout, go to the Properties window, and set the Vertical Alignment to Top.  This will ensure that the Columns Layout does not take any more of the screen real estate then it needs.

Now click F5, and let’s see how our application looks:


That’s all there is to it.

Wrapping Up

In this post, I have demonstrated how you can add images and text to your application.  This feature has added new menu items to the screen designer which allow you to add images and text to your content tree.  To add an image, simply select the new Add Image… menu item; this pops up a dialog that lets you choose which image to add.  The image (which is not data-bound) is then added as a new element to the content tree.  Likewise, when choosing the new Add Text… menu item, an Edit Text dialog is displayed to allow you to add text to the screen.  The text (which is also not data-bound) is then added to the content tree.  The properties for images and text that have been added to a screen can be modified in the Properties window, just as you would expect.  Both the image and text elements will have links in the Properties window.  Clicking these links will re-display their respective dialogs, allowing you to modify the image or text.  Images have an additional property, Show Border, that allows you to add a border to your image.  Really simple.  I hope you are excited as I am by this new feature, and you start experimenting with adding images and text to your applications!

-Andrew Lader, Visual Studio LightSwitch Team