Basic LightSwitch Custom Controls

Out of the box LightSwitch comes with a limited set of visual controls, but since the UI is rendered in Silverlight you can include other Silverlight controls including your own custom controls. Here I will provide a simple example of how to make your own custom control, its easier then you might think. To do this you will need to install LightSwitch on top of a full version of Visual Studio 2010. I am going to start with a simple table, then add a Create New Employee screen to the application. I am going to create a custom control that formats the First, Last and Middle name text boxes in a different way.

1. In your LightSwitch solution add a new Silverlight 4 Class Library project. I am going to call it EmployeeDbControls.
   
   
2. To the new project add a Silverlight User Control item. I am going to call it NameControl.
   
   
3. Here is the XAML I am going to add to that control:
   

   <Grid x:Name="LayoutRoot" DataContext="{Binding Screen.EmployeeProperty}">
   
   <Grid.RowDefinitions>
    <RowDefinition />
    <RowDefinition />
   </Grid.RowDefinitions>
   
   <Grid.ColumnDefinitions>
    <ColumnDefinition Width="150" />
    <ColumnDefinition Width="150" />
    <ColumnDefinition Width="150" />
   </Grid.ColumnDefinitions>
   
   <TextBlock Grid.Column="0" Grid.Row="0">First</TextBlock>
   <TextBlock Grid.Column="1" Grid.Row="0">Middle</TextBlock>
   <TextBlock Grid.Column="2" Grid.Row="0">Last</TextBlock>
   <TextBox Margin="5" Grid.Column="0" Grid.Row="1" Text="{Binding FirstName,Mode=TwoWay}"></TextBox>
   <TextBox Margin="5" Grid.Column="1" Grid.Row="1" Text="{Binding MiddleName,Mode=TwoWay}"></TextBox>
   <TextBox Margin="5" Grid.Column="2" Grid.Row="1" Text="{Binding LastName,Mode=TwoWay}"></TextBox>
   
   </Grid>
   

   This will create three textboxes laid out in a grid. The important thing to note here is the data binding properties. First we need to set a DataContext so I am did this on the grid so that all the controls in the grid can use it. In the DataContext binding the EmployeeProperty comes from the editor for the Create New screen, you can see it just above the field names:

   

   
   

   The second part of the binding is in the textboxes. Here we simply bind to the field names in the record. Note that the mode must be set TwoWay so we can edit and display.



4. Once the control is complete, build the project.
   


5. Return to the designer screen for the Create New screen and remove the FirstName, MiddleName and LastName fields.
   
   
6. Click on the line that says "(TOP ROW) Vertical Stack", then click the Add Layout Item menu and select Custom Control. You will see this screen:
   

   

   
   
7. Click Add Reference… and select the EmployeeDbControls project.
   


8. Drill down on the EmployeeDbControls reference and select NameControl. Click OK to close the References screen.
   

   

   
   
9. Click and drag the NameControl up above the Address field.
   
   
10. Make sure the NameControl is selected, then in the property window change the Display Name from ScreenContent to Name.
    
    
11. Run the application. When you open the CreateNewEmployee screen you will see the new control.

If I wanted to I could create a Details Screen for the Employee table and add the new name control to that screen so we have the same control when we are editing a record.

This is a very basic example but will get you started with designing custom controls for LightSwitch.