Visual Studio LightSwitch is a new tool provided by Microsoft in July 2011. Which is used to build business application software. Visual Studio LightSwitch does not have its own controls; instead we use Silverlight's controls.
A User control is a custom control which acts as a HTML and Web server controls. In this article I'm going to explain how to create and use a user control in a LightSwitch application.
Step by step solutions for create User Control
Step 1 : First of all open Visual studio LightSwitch application->Click on create new table.
![last.png]()
Step 2 : Create table person like as in the following image.
![image1.png]()
Step 3 : Now we will add a screen. Right-click on screens->Add screen.
![image2.png]()
Step 4 : Select List and Details Screen->Select screen data (People)->Ok.
![image3.png]()
Step 5 : Go to menu bar.
File->Add->New project.
![image4.png]()
Step 6 : Select Silverlight->Silverlight Class Library->Write name (PersonUserControl)->Ok.
![image5.png]()
Step 7 : Now select Silverlight 4->Ok.
![image6.png]()
Step 8 : Right-click on PeronUserControl->Add->New item.
![image7.png]()
Step 9: Select Silverlight User control->Write name (PersonControl.xaml)->Add.
![image8.png]()
Step 10 : Now write the XAML code.
![image9.png]()
Code
<UserControl x:Class="PersonUserControl.PersonControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="400">
<Grid x:Name="LayoutRoot" Background="White">
<ComboBox ItemsSource="{Binding Screen.People}"
SelectedItem="{Binding Screen.People.SelectedItem, Mode=TwoWay}"></ComboBox>
</Grid>
</UserControl>
Step 11 : Expand rows layout->Add->New Custom Control.
![image10.png]()
Step 12 : Click on add reference->Project->Select PersonUserControl->Ok.
![image11.png]()
Step 13 : Build the solution->Expand PersonUserControl->Select PersonControl->Ok.
![image12.png]()
Step 14 : Run application (Press F5). When you select Person name from the Combo Box then the details of Person is displayed on the screen. In the following image we select Priyanka; then the details of Priyanka shown on the screen.
![image13.png]()
Conclusion
So in this article you saw, how to create and use a User Control in a LightSwitch application. As in the same process you can create your own control in the LightSwitch application.
Some Helpful Resources