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".

Step 2

Open the Solution Explorer.

Step 3

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

Step 4

The Table Designer appears.

We add a table named "Faculty Tabs".

We add another table named "Student Tabs".

Step 5

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

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

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

Step 6

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

Step 7

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

Step 8

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

Step 9

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

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.

Step 11

The Select Image dialog box appears.

Step 12

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

Step 13

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

Step 14

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

Finally click on the "OK" button.

Step 15

Go to the Property window to open it.

Step 16

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

Similarly choose the width and height for the image.

Step 17

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

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

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

Insert data in the Add New Student Tab.

Insert more data into the Add New Student Tab.

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

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

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

Delete 1 item from the list.

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.

Finally we click on the "Save" button.