Image Datatype in LightSwitch 2012

Here we will see how to use the Image Datatype in LightSwitch Visual Studio 2012.

The following is the procedure for using an Image data type on a screen.

Step 1

Open the LightSwitch Application in Visual Studio 2012 and go to the Solution Explorer.

Solution Explorer

Right-click on Data Sources and choose "Add Table".

Add Table

The table appears in the table designer window. Insert the records in the following table.

Student Table

Here in the table I have added a record named "Photo" and I have taken its datatype as "Image" as shown below.

image datatype

Step 2

Now once again go to the Solution Explorer, right-click on Screens and choose "Add Screen".

Add Screen

The Add New Screen dialog box appears. Select the "Editable Grid Screen" from the Screen Template, inside the screen information, choose "Student" under screen data and provide some name to the Screen and click the "OK" button.

Add New Screen

The Screen Designer appears. 

Screen Designer

Then click on Photo under the Data Grid Row, and go to the property window and choose the Label Position.

Label Position top

Step 3

Press F5 to run the application. Click on the Add Button (+). The Add New Student dialog box will appear. Provide the information. 

Add New Student

In order to an add image, click on the Load Image button (->). An Open Dialog Box will appear. 

open dialogbox appear

Select the image and click the "OK" button. 

pic added to Add New Student.jpg

Editable student grid output with label at Top

Step 4

Stop debugging the application.

Once again go to the Property window of "Photo" in the screen designer. We select the Label Position to "None" and select the Stretch property from the property window. 

Stretch Property

Step 5

Once again press F5 to run the application. 

Editable Student Grid output with no Label