User Control in Visual Studio LightSwitch 2011

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.

Step 2 : Create table person like as in the following image.

Step 3 : Now we will add a screen. Right-click on screens->Add screen.

Step 4 : Select List and Details Screen->Select screen data (People)->Ok.

Step 5 : Go to menu bar.

File->Add->New project.

Step 6 : Select Silverlight->Silverlight Class Library->Write name (PersonUserControl)->Ok.

Step 7 : Now select Silverlight 4->Ok.

Step 8 : Right-click on PeronUserControl->Add->New item.

Step 9: Select Silverlight User control->Write name (PersonControl.xaml)->Add.

Step 10 : Now write the XAML code.

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.

Step 12 : Click on add reference->Project->Select PersonUserControl->Ok.

Step 13 : Build the solution->Expand PersonUserControl->Select PersonControl->Ok.

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.

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

• Control User Access in a LightSwitch Application
• How to create extensions for LightSwitch
• Create and Control Lookup Lists in a LightSwitch Application
• How to create my own shell for LightSwitch 2011
• Data Types in LightSwitch