Changing UI Element by Design Screen in LightSwitch 2012

This article describes how to change a UI element using the design screen in a LightSwitch Application (Visual C#) in Visual Studio 2012.

The following is the procedure for changing a UI element in LightSwitch 2012.

Step 1

Open the Solution Explorer.

solution.jpg

Step 2

In the Solution Explorer, right-click on the Server and choose "Add Table".

Add Tab.jpg

Step 3

The table appears.

employee table.jpg

Step 4

In the Solution Explorer, right-click on the Screens and choose "Add Screen".

add screen.jpg

Step 5

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

aew data.jpg

Step 6

The Screen Designer appears.


Step 7

Press F5 to run the application. 

output1.jpg

The Design Screen button appears on the data screen.

design.jpg

When you click on the button, a dialog box appears, click on the "Yes" button.

dialog.jpg

When you click on the Yes button, a screen open in Customization Mode.

custom screen.jpg

Step 8

Since I want to change the caption of the TextBox label from "Ph No" to "Phone Number", I click on the "Ph No" on the left side of the screen.

custom.jpg

The Properties are shown below:

prop wind.jpg

Now go to the property window at the bottom of the screen and change the caption from "Ph No" to "Phone Number" and then click on the "Save" button.

phone no prop.jpg

Step 9

The window will look like this as shown:

phone no text.jpg

The screen designer will appear as in the following.

src des last.jpg