Adding Images in LightSwitch Using Visual Studio 2012

Adding Images in LightSwitch Using Visual Studio 2012

This article describes how to add images in LightSwitch using VisualStudio 2012.

Procedure for adding an image in LightSwitch 2012

Step 1

To begin our work with LightSwitch 2012 we will perform the following steps:

  • Open the Visual Studio 2012.
  • Go to "File" => "New" => "Project..."
  • In "New Project" => "Installed" => "Template"
  • In "Template" => "LightSwitch"
  • Select "LightSwitch Application (Visual C#)".
  • Enter the Name and choose the location.
  • Click "OK".

new pro.jpg

Step 2

Open the Solution Explorer.

sol explo.jpg

Step 3

In the Solution Explorer, right-click on the data source to add a table.

add table.jpg

Step 4

The Table Designer appears.

mt tab.jpg

We add a table named "Faculty Tabs".

facultytab.jpg

We add another table named "Student Tabs".

student tab.jpg

Step 5

In the Solution Explorer, right-click on "Screens" to create a new screen in the application.

add src.jpg

Now we select a Screen Template and provide the screen information.

add new src.jpg

When we click "OK", the Screen Designer appears.


srcdesigner.jpg

Step 6

Now the Solution Explorer appears in such a manner as shown.

explo.jpg

Step 7

Select "Add Image" by clicking on the drop-down arrow in the Add node at the bottom of the Rows Layout.

addimg.jpg

Step 8

In the Screen Designer, the image is added at the bottom.

appdescontain img.jpg

Step 9

We can drag and drop the image to anywhere we want to.

drag drop.jpg

Step 10

Double-click on the Image option in the Screen Designer, or go to the property window. In the property window, click on "Choose image" to select an image.

proper1.jpg

Step 11

The Select Image dialog box appears.

selectimgdialogbox.jpg

Step 12

Click on the "Import" button, an open dialog box appears.

open dia box.jpg

Step 13

Select the image from the open dialog box and click on the "Open" button.

open dia.jpg

Step 14

Now the Select Image dialog box appears in such a manner.

imgappear in selectimg.jpg

Finally click on the "OK" button.

Step 15

Go to the Property window to open it.

prop img.jpg

Step 16

Select "Stretch field" for the image in the property window.

prop stretch.jpg

Similarly choose the width and height for the image.

prop width height.jpg

Step 17

When we run the application we get the output as shown.

output.jpg

By selecting add ("+"), we can add a new item to the list.

output add symbol.jpg

When we select the add symbol ("+"), the "Add New Student Tab" appears.

add new stutab in out.jpg

Insert data in the Add New Student Tab.


insert data.jpg

Insert more data into the Add New Student Tab.

insert another data.jpg

Click on the edit symbol (that looks like a pen) to display a dialog to edit the current item in the list.

edit tab.jpg

The Edit Student Tab appears. Perform the edit operation and click "Ok".

Edit stu tab.jpg

Click on delete ("-") in the Student Tab List Detail.


delete item.jpg

Delete 1 item from the list.

delete item.jpg

Click on A-Z to arrange the data in the ascending manner. If we click on A-Z option the "A" letter data will appear first or in the same manner if we click on Z-A then the "Z" letter data will appear first.

a-z list.jpg

Finally we click on the "Save" button.

save button.jpg


Similar Articles