Part 9/11: Using a custom control in LightSwitch

Table of Content

1. Introduction
2. Aim of the article
3. Steps to use custom control in LightSwitch Application
4. Conclusion

Introduction

Rapid business application development is a need of today’s business and keeping that in focus software stewards wants to build the 3 tire applications at a lightning speed where there will be less code, less time will be spent on designing the UI screens , the BAL layer and DAL layer. By keeping all these into focus, on 26th July, 2011, Microsoft has released their new product – LightSwitch.

It is the simplest way for developers of all skill levels to develop business applications for the desktop as well as for cloud. This is the ninth part of the series of 12 LightSwitch tutorials where we will look into how to use custom control in LightSwitch Application.

You can read the other parts of the LightSwitch tutorial as under

1. Part 1: Introduction to Light Switch
2. Part 2: Rapport with New Data Screen
3. Part 3: Rapport with Search Data Screen
4. Part 4: Rapport with Editable Grid Screen
5. Part 5: Rapport with List and Details Screen
6. Part 6: Rapport with Details Screen
7. Part 7: Rapport with External Data Source – Database
8. Part 8: Rapport with External Data Source – WCF RIA Service
9. Part 9:Using a custom control in LightSwitch
10. Part 10: Publish LightSwitch Application as Desktop application and host in local system
11. Part 11: Publish LightSwitch Application as Web application

Assumption

The article assumes that, we have LightSwitch 2011 installed in our system

Steps to use custom control in LightSwitch Application

Before we start as how to use a custom control in our LightSwitch application , it will be useful to know as what custom controlwe are trying to build.We will have some Employee Information like Name and Salary(1 to 10 max) field and the slider control will indicate those values.

One question that may come up as why we needa custom control? The reason is that apart from teh regular controls that LightSwitch provides, we may need to have complex controls.In the Lightswitch applications we can create custom controls in Silverlight and implement them in our LightSwitch application

Now let us see as how to do so

Step 1: First create a new LightSwitch Project and a new table with 2 fields e.g. Name (type string ) and Salary (type Integer).Say the table name is tblEmployee

Step 2: Create a New Data Entry Screen(name it as InsertRecordInEmployee) and add some records by running the application. Keep in mind that the salary value should be between 1 to 10.

Step 3: Create a List and Details Screen(name it as ViewEmployee) to our Project. So at this point our project looks as under

If we want to view our application at this stage, it will look as under

Step 4:Now let us add Silverlight class library project. For this, choose File –> Add –> New Project and then choose Silverlight Class Library from the available templates. Name it as "SliverLightCustomLibrary".

Choose Sliverlight 4 when prompted to choose which silverlight version the Silverlight SDK will be pointed to.

And delete the Class1.cs file from the Silverlight Class Library project.

Step 5: The next step is to add a Silverlight User Control. So select the SliverLightCustomLibrary Project –> Add –> New Item and select "Silverlight User Control".Name it as "SilverlightSliderControl.xaml". Click on Add button.

Step 6: Next step is to add a slider control from the toolbox and in the xaml write the below code

Value="{Binding Path=Screen.tblEmployee.SelectedItem.Salary, Mode=TwoWay}"

Let us undrstand the code.Our original data source is the tblEmployee. From that we are interested only in the Salary field. So whatever will be the value of the Salary, that will be source for the slider control.

The complete xaml code looks as under

<UserControl x:Class="SliverLightCustomLibrary.SilverlightSliderControl"
    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">
        <Slider
            Height="23" 
            HorizontalAlignment="Left" 
            Margin="13,115,0,0" 
            Name="mySliderCtrl" 
            VerticalAlignment="Top" 
            Width="375" 
            Value="{Binding Path=Screen.tblEmployee.SelectedItem.Salary, Mode=TwoWay}" 
	     Background="Crimson"
            />
    </Grid>
</UserControl>

And the screen as under

Build the project

Step 7: Now let us go back to our "View Employee" List and Details Screen that we created at step 3. Point the "Rows Layout – tbl Employee Item Details". Then click on the Add button -> New Custom Control.

Step 8:Click on the "New Custom Control" option and we will be presented with a screen from where we can add our custom control.

Step 9:Click on the "Add Reference" button and from the Project tab, choose "Silverlight Custom Library" and click OK button"

Step 10: Now expand "SliverlightCustomLibrary" and choose "SilverlightSliderControl".Then click on OK button.

Step 11: Run the application and we will be presented with the below screen

As can be figure out that the value has been set to the slider control as per the data present in the Salary field.Now change the value in the salary field to 10 and we will get the below

So we can figure out that, based on value presented on the Salary field, the slider value has been changed

Now drag the indicator of the of the slider control and the value will change in the Salary field.It is hapenning because in the slider control, we set the Mode as TwoWay.

Also the "*" beside the record indicates that it is in the editing stage.Now click on the save button and the record will be saved

Conclusion

So in this part we have learn about how to use custom control in LightSwitch Application.In the next article we will look into how to publish a LightSwitch application as a desktop application.

Thanks for reading the article.Happy lightning with LightSwitch.