User Control in Visual Studio LightSwitch 2011

In this article you wiil see, how to create and use a User Control in a Visual Studio LightSwitch application.


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