LightSwitch Tutorial - Adding Image to a LightSwitch Screen

Posted by ChrisD on Geeks with Blogs See other posts from Geeks with Blogs or by ChrisD
Published on Thu, 17 Nov 2011 04:27:02 GMT Indexed on 2011/11/17 9:54 UTC
Read the original article Hit count: 337

Last week, I have discussed how to control Screen Layouts in LightSwitch. Now, I will talk about how to add an image to the LightSwitch screen.

In this demo, I will try to upload the image to the screen and will save the image into the database. The first step we need to do is start the VS 2010, create LightSwitch Desktop application with the name “AddingImageIntoScreenInLSBeta2” as shown in the following figure.

The second steps, create a table as shown in the screen by selecting the "create a table" option in the start up screen.

Then, we need to add a New Data Screen to our demo application. See the following figure which is the default screen layouts for the screen we have created.

So we have to change the layout of this screen so that the uploading and using the image in the screen can be easily explained.

Before adding the Model Window we have to prepare the layout. So delete the Highlighted fields as shown in the above figure.

After preparing the layout to add the image, just add a new Group to the Person Property Rows Layout.

To add a new group,

[No: 1] – Select the Rows layout, it will shows you the Add button.
[No: 2] – Click the Add button to select the new group.
[No: 3] – Select the New Group.

After adding the new group change the Layout type to Columns Layout.

Here,

-          Change the rows layout to columns layouts and give the display name as Uploading Image Example.

-          Click on the add button to add the Photo field under the column layout.

Add a new group under the Column layout group.

Follow the [No: #] to create a new group under the columns layout group.

After adding a new group of rows layout add the fields to the newly created group.

[No: 1] – Select the Rows Layout group and change the display name as Details.
[No: 2] – Click on Add button to select the appropriate fields to add to the group.
[No: 3] – Add the fields to the group

The above snippet shows the complete layout tree for our screen.

Now the screen for uploading the image is ready. Just press the Play button. And see the result.

© Geeks with Blogs or respective owner