Click here to Skip to main content
13,593,169 members
Click here to Skip to main content
Add your own
alternative version


62 bookmarked
Posted 19 Oct 2010
Licenced CPOL

Beginners Guide to Visual Studio LightSwitch

, 29 Oct 2010
Rate this:
Please Sign up or sign in to vote.
In this article, I will show you how you can start with Visual Studio LightSwitch with an example.


Visual Studio LightSwitch is a new tool for building data-driven Silverlight Application using Visual Studio IDE. It automatically generates the User Interface for a DataSource without writing any code. You can write a small amount of code also to meet your requirement. Recently, I got some time to explore Visual Studio LightSwitch. I created a small DB application with proper data inserting UI within a small amount of time (without any XAML or C# code). Here in this article, I will guide you to understand it with the help of a small application. There will be a series of articles on this topic regularly. Read the complete article to learn about creating a Silverlight data driven application with the help of Visual Studio LightSwitch.

Setting up LightSwitch Environment

Microsoft Visual Studio LightSwitch Beta 1 is a flexible, business application development tool that allows developers of all skill levels to quickly build and deploy professional-quality desktop and Web business applications. To start with LightSwitch application development, you need to install the Visual Studio LightSwitch in your development machine. To do so, follow the below steps:

  • Install Visual Studio 2010
  • Install Visual Studio LightSwitch

The LightSwitch installation will install all other components to your PC one by one including SQL Express, Silverlight 4, LightSwitch Beta server, etc. You can download the LightSwitch Beta 1 from here: Microsoft Download Center (Visual Studio LightSwitch Beta 1).

Creating a LightSwitch Project

Once you installed Visual Studio LightSwitch, run the Product to create a new project. Go to File –> New –> Project or press Ctrl + Shift + N to open the “New Project”. From the left panel, select “LightSwitch”. In the right pane, it will filter the LightSwitch project templates. This will include of type VB & C#. Select your respective type. Here I will use the C# version.


In the above dialog Window, enter the name of the project, select proper location for the project to create and hit “Ok”. This will create the blank LightSwitch project for you by the Visual Studio 2010 IDE. It will take some time for the project creation. So, be patient.

Create a Database Table

After the project has been created by the IDE, it will open up the following screen:


You can see that, it has two options in the UI. You can create a new table for your application. Also, you can attach an external database. If you open the Solution Explorer, you will see that, the project is totally empty. It has only two folders named “Data Sources” and “Screens”. “Data Sources” stores your application data, i.e. Database Tables. On the other side, the “Screens” folder stores the UI screens created by you. I will describe them later in this tutorial. Let’s create a new Table for our application. Click on the “Create new table” to continue. This will bring up the following screen on your desktop:


In the above page, you can design your Table structure as you do in the SQL server while creating a new table. Each table will have a “Id” assigned to the table of type “Int32” & it is a Primary Key to the table. Add some additional columns to the table.


In the above snapshot, you can see that, there are several column types (data types) available in LightSwitch application. For our sample application, we will create 4 additional columns called “FirstName (String)”, “LastName (String)”, “Age (Int16)” and “Marks (Decimal)”. Change the title of the table from “Table1Item” to “StudentTable”. This name will be used while saving the table. Save the table now. If you want to change the name of the table later, just rename the table header and save it. This will automatically update the table name.


Be sure to set all the fields as “Required” field. This will be helpful validating the data. I will show it to you later.

Create a Data Entry Screen

Once you are done with structuring your database table columns, you will need to create a UI screen for your application to insert records. Click on the “Screen…” button from the top panel as shown in the below snapshot:


This will open the “Add New Screen” dialog window to the screen. Select “New Data Screen” from the Screen Template, provide a Screen Name in the right panel & choose the database table as Screen Data from the dropdown.


Click “Ok” to continue. This will create a new UI screen for your application to insert new data record by end user. Now, in the solution explorer you can see that, the “Data Sources” folder has one database named “ApplicationData” and it has a table called “StudentTables”. In the “Screens” folder, you can find the recently created data entry screen named “CreateNewStudentTable”. You can change the design of the UI from the below screen:


You can add or delete new fields or controls. You can also rearrange the controls in the UI. For our first sample application, we will go with the default layout controls.

See the Application in Action

Woo!!! Our application is ready. We will be able to insert new records in our database table from our application. No need to write a single line of code. What? You are not agreeing with me! Let’s run the application by pressing F5. This will build your solution. It will take some time to compile the solution. Once it builds successfully, it will open the following UI in your desktop:


It is a Silverlight OOB Application. If you want to confirm, right click on the application & you will see the Silverlight context menu pops up in the screen. OMG!!! We didn’t do anything to design the above UI! The Visual Studio LightSwitch automatically created the screen for you with a “Save” and “Refresh” button. You can see a collapsible “Menu” panel at the left of the screen. In the right side, you will see tabular panel containing some labels and TextBox which will be required to insert data in your application database. In the top right corner of the screen, you will see a “Customize Screen” button. Once you click this, it will pop up another Child Window for you to customize the application screen at runtime. This will not be visible, once you deploy the application. We will cover them later in different article.

Validation of Fields

As I told you earlier, our application is ready. So, what to do for writing some simple validation for our application? Wait, you don’t have to worry about that. LightSwitch internally does that for you. Let’s have a demo on it. In the form panel, insert some data. We will purposefully write invalid data in the “Age” field. Instead of entering age, we will enter some text in the age field. If you press tab or click elsewhere (on lost focus), it will do the validation & show the error on the screen.


You can see the validation error popup in the screen as shown here:


Now enter proper values for all of the fields and click “Save”. This will save the records properly.

More on Save

Once you entered proper values in the input boxes, click “Save” to store the record.


This will save the record and add another field called “Id” in the UI. The value for the Id will be 1 (one) as this was our first record & will increase by 1 as we add more records.


To add more records, close the current tab and click “CreateNewStudentTable” menu item from the left panel.


Now enter some records and click Save button. You will see it in action that, the Id is automatically increasing by 1 as and when you are saving a new record.


If you have any unsaved records and want to close the tab or want to add a new record, it will open a message dialog to the screen warning about unsaved changes. It will ask you to save the changes before proceeding.


Click “Save” to save the unsaved record to database. Click “Discard” if you don’t want to save the record. Click “Cancel” to stay on the same page.

Customize the Screen

If you want to change the UI at runtime, click on the “Customize Screen” button available at the top right corner of the application window. Remember, this button will not visible once you deploy the application. Once you click the button, it will popup the Customization screen. Here you can change the layout of the screen, insert come new field or delete something which already exists. For now, we will not go with changing the layout or controls. I will cover them in another article.


Here, we will change the display name of the new student menu item. Select the top level node of the screen items and in the properties panel, change the “Display Name” from the default one to “New Student”. Now save the settings and restart the application for the changes to take effect. Once you run your application now, you will see the display name of the menu item has been changed to the entered value, i.e. “New Student”. This is more meaningful than the default text.


If you want to do the same thing inside the Visual Studio IDE, go to the properties pane as shown in the below figure. Find the “Display Name” property and change the display name to your own meaningful name. Run the application to see it in action.


You can change many other properties from the properties panel too.

End Note

Oh, it is too easy to create a data-driven Silverlight OOB application using Visual Studio LightSwitch. No need to write XAML or C# code to create such professional quality application in Silverlight. Hope, this helped you to understand Visual Studio LightSwitch to create a simple data entry application without writing any C# code or writing any XAML code. In the next few articles of the series, I will discuss more about the other screens. I think, you enjoyed it a lot and hence please give your feedback about this article.


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Kunal Chowdhury «IN»
Software Developer (Senior)
India India
Kunal Chowdhury is a Microsoft "Windows Platform Development" MVP (Most Valuable Professional), a Codeproject Mentor, Telerik Developer Expert, Nokia Developer Champion, Windows 10 Champion, Microsoft Rockstar, Speaker in various Microsoft events, Author, passionate Blogger and a Software Engineer by profession.

He is currently working in an MNC located in India. He has a very good skill over XAML, C#, Silverlight, Windows Phone, WPF and Windows Store (WinRT) app development. He posts his findings, articles, tutorials in his technical blog and CodeProject.

Book authored:

Connect with me on:

My CodeProject Awards/Prizes:

You may also be interested in...

Comments and Discussions

GeneralMy vote of 4 Pin
GregoryW30-May-13 19:46
memberGregoryW30-May-13 19:46 
QuestionSpeed and portability Pin
Asif Rehman8-Mar-13 22:11
memberAsif Rehman8-Mar-13 22:11 
QuestionPlease help Pin
nirav savla26-Dec-12 19:34
membernirav savla26-Dec-12 19:34 
GeneralMy vote of 5 Pin
Christian Amado29-Aug-12 8:33
memberChristian Amado29-Aug-12 8:33 
GeneralMy vote of 5 Pin
Mario Majcica4-Oct-11 22:32
memberMario Majcica4-Oct-11 22:32 
GeneralMy vote of 3 Pin
Grahame Stanley28-Jan-11 11:56
memberGrahame Stanley28-Jan-11 11:56 
GeneralRe: My vote of 3 Pin
DaveAuld20-Aug-11 0:25
mentorDaveAuld20-Aug-11 0:25 
GeneralMy vote of 5 Pin
prasad0218-Dec-10 15:23
memberprasad0218-Dec-10 15:23 
GeneralRe: My vote of 5 Pin
Kunal_Chowdhury12-Jan-11 15:31
mvpKunal_Chowdhury12-Jan-11 15:31 
GeneralCustomize Screen button still visible after Publish Pin
NeCroFire13-Nov-10 1:52
memberNeCroFire13-Nov-10 1:52 
AnswerRe: Customize Screen button still visible after Publish Pin
KunalChowdhury13-Nov-10 2:31
mentorKunalChowdhury13-Nov-10 2:31 
GeneralRe: Customize Screen button still visible after Publish [modified] Pin
NeCroFire14-Nov-10 22:12
memberNeCroFire14-Nov-10 22:12 
GeneralMy vote of 5 Pin
venugopalm10-Nov-10 1:23
membervenugopalm10-Nov-10 1:23 
GeneralRe: My vote of 5 Pin
KunalChowdhury10-Nov-10 8:19
mentorKunalChowdhury10-Nov-10 8:19 
GeneralMy vote of 5 Pin
Durgaprasadtb7-Nov-10 21:03
memberDurgaprasadtb7-Nov-10 21:03 
GeneralRe: My vote of 5 Pin
KunalChowdhury7-Nov-10 21:21
mentorKunalChowdhury7-Nov-10 21:21 
GeneralMy vote of 5 Pin
Maxx12781-Nov-10 22:17
memberMaxx12781-Nov-10 22:17 
AnswerRe: My vote of 5 Pin
KunalChowdhury2-Nov-10 7:26
mentorKunalChowdhury2-Nov-10 7:26 
GeneralWaiting with impatience for next articles Pin
aquant30-Oct-10 21:39
memberaquant30-Oct-10 21:39 
AnswerRe: Waiting with impatience for next articles Pin
KunalChowdhury2-Nov-10 7:25
mentorKunalChowdhury2-Nov-10 7:25 
GeneralQuery Pin
Sacha Barber23-Oct-10 21:21
mvpSacha Barber23-Oct-10 21:21 
GeneralRe: Query Pin
KunalChowdhury23-Oct-10 22:26
mentorKunalChowdhury23-Oct-10 22:26 
GeneralMy vote of 5 Pin
Habib El-Zoghbi23-Oct-10 5:38
memberHabib El-Zoghbi23-Oct-10 5:38 
GeneralRe: My vote of 5 Pin
KunalChowdhury23-Oct-10 7:05
mentorKunalChowdhury23-Oct-10 7:05 
GeneralMy vote of 5 Pin
Durba Deb23-Oct-10 4:57
memberDurba Deb23-Oct-10 4:57 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Cookies | Terms of Use | Mobile
Web04 | 2.8.180618.1 | Last Updated 30 Oct 2010
Article Copyright 2010 by Kunal Chowdhury «IN»
Everything else Copyright © CodeProject, 1999-2018
Layout: fixed | fluid