Introduction

If you are working on LightSwitch application, you may probably need to use UserControl or you may need to use Telerik controls or any other 3^rd party controls. So, in such case, how will you add UserControls in LightSwitch application?

In this article, I will demonstrate you how to add a UserControl in LightSwitch app using the Telerik RadChartControl. This will give you basic understanding of the use of RadChartControl.

Prerequisite

To start with LightSwitch application development, you need the Visual Studio LightSwitch 2011. Remember that this is not a free product and hence the downloaded version will have a trial limit of 30 days with the option to register it for another 60 days.

If you are not an MSDN Subscriber, you can download the Trial version from the below link. Make sure that you read the installation steps mentioned in the same link before the installation:

• Visual Studio LightSwitch 2011 Released - Download the Final Version Now

If you are an MSDN Subscriber, you can download it from the Subscriber's download page for FREE. Before installing this product, read the System Requirements and other Known Issues mentioned in the Official Readme Document.

Now you need the Telerik RadControls for Silverlight. You can download the trial from the below link:

• Download Telerik RadControls for Silverlight (Trial Edition)

Begin with Project Setup

Let us start with the project creation. Open Visual Studio 2010 (Hope, you already have the prerequisite installed in your dev environment). Go to "File" and create a "New Project". As shown in the below screenshot, select the "LightSwitch" template. We will use C# Template for our demo application.

Enter a name for our project and chose the location as per your choice. Click "OK" to continue. This will take some time to create the default project. Once done, it will open up the Startup Screen.

Setup Table

Once you are done with the project creation, it's time to create a Table. If you have any table that exists in your SQL Server, you may connect with that. For this article, we will create our own table directly from the IDE.

As shown below, click the "Create new table" link. This will open the table in design view:

Give a name to the Table (say "TaskTable") and add proper columns to it. We will add a string named "Task", two Integers named "Estimate" and "Completed". We will add a Computed Property as column named "Remaining".

Have a look into our database table definition:

We need to add the computation process to the "Remaining" column. To do this, select the column in the design view and go to the Properties panel.

As demonstrated in the below screenshot, go to the "General" category and click on the "Edit Method" link. This will open the code behind (.CS) file in the IDE. Proper method will also be generated for you. Add the code inside it as shown below:

The result will be added to the column "Remaining" automatically.

Create the Screen

Now it's time to create the screen. We will add an "Editable Grid Screen" to our application. Open the table in design mode and Click on the "Screen..." button to start with the Screen creation process. Alternatively, you can right click on the "Screens" folder to start with the same.

This will popup the "Add New Screen" dialog. From there, select the "Editable Grid Screen". Give a name to the Screen and chose the Screen Data to our table "TaskTables". Now click "OK" to continue.

This will add the screen to the project. The screen will be automatically populated with the proper Grid column. Let's run the project to see it in action. Here is the screenshot of our initial screen:

Let's add some default records in the Table by entering data into the DataGrid present in the screen. Once done, click on "Save" to store the entered records into the table.

This will save the entered values in the table. When you return back to this application later, you will see the same values in screen. Hope this gave you a basic understanding of the screen creation.

Integration Steps

Now, we will discuss integration of Telerik Chart control in LightSwitch application. This will not only help you Telerik control integration but will help you to add your own UserControls into the screen.

Hope you already downloaded the Telerik RadControl for Silverlight (Trial) from the Telerik site. Install it in your system. We need this library now.

Adding Telerik Assembly References

Now we need to add the required assemblies of Telerik RadControls in our project. First of all, go to the Solution Explorer and click the small view icon and select the File View. The default view is the logical one where you see the Screens and Tables. Once you changed it to File View, you will see various projects in the solution as shown below:

As shown above, click the "Show All Files" icon to show the hidden projects under the main project. Once this step is done, add the following three Assembly References in the projects called "Client" and "ClientGenerated":

• Telerik.Windows.Controls.dll
• Telerik.Windows.Controls.Charting.dll
• Telerik.Windows.Data.dll

The above mentioned DLLs are required by our application to integrate the Telerik Chart Controls that we want to demonstrate here.

Adding Chart Control

It's time to add the chart control in the LightSwitch UI. To do this, we will go with a different approach. Instead of adding the control directly, we will create a UserControl in the Client project and will add the chart inside that UserControl. To start with, create a folder named "UserControls" in the Client project and add the UserControl.

Now we will add the xmlns namespace in the UserControl XAML (we will name the UserControl as "TaskDashboardChart" for reference) and modify the XAML to add the control inside LayoutRoot. Here is the modified code:

<UserControl x:Class="LightSwitchApplication.UserControls.TaskDashboardChart"
    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"
    xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
    mc:Ignorable="d" Width="300" Height="250">
    <Grid x:Name="LayoutRoot" Background="White">
        <telerik:RadChart>
            <telerik:RadChart.SeriesMappings>
                <telerik:SeriesMapping LegendLabel="Task Dashboard" 
                                       ItemsSource="{Binding Screen.TaskTables}">
                    <telerik:SeriesMapping.SeriesDefinition>
                        <telerik:LineSeriesDefinition ShowItemLabels="True" 
                                                      ShowPointMarks="False" 
                                                      ShowItemToolTips="True" />
                    </telerik:SeriesMapping.SeriesDefinition>
                    <telerik:SeriesMapping.ItemMappings>
                        <telerik:ItemMapping DataPointMember="YValue" 
                                             FieldName="Completed" />
                        <telerik:ItemMapping DataPointMember="XValue"
                                             FieldName="Id" />
                    </telerik:SeriesMapping.ItemMappings>
                </telerik:SeriesMapping>
            </telerik:RadChart.SeriesMappings>
        </telerik:RadChart>
    </Grid>
</UserControl>

Let's build the project for any error and resolve those issues if any.

Adding UserControl to LightSwitch Screen

By now, our UserControl is ready with the Chart control. Now we need to add the UserControl to the screen. Open the screen in Design view. As shown below, click the "Rows Layout" -> from the "Add Layout Item" dropdown, select the "Custom Control" menu item.

This will open a dialog called "Add Custom Control". Browse to the proper assembly and select the UserControl (in our case, it is TaskDashboardChart). Now click "OK" to continue.

This will add the Control in the screen as shown below:

This completes the end of the Telerik Chart integration. Place the control properly in the UI as per your need.

See it in Action

Build the project and run the application. If you followed the steps properly, you will see the screen as shown below:

The chart control has all the data set to zero initially because we marked them with the "Completed" column of the table, where all the completed fields have value as zero. Let's try to modify those values one by one.

You will now notice that whenever you are modifying the completed value, the value of remaining field is auto calculating based on the algorithm and the chart control is also getting updated based on the column values.

After some modifications, you will see the graph similar to this:

Hope this article will be helpful for you to understand how to integrate UserControl in LightSwitch screen, as well as the integration of Telerik chart controls. Don't forget to vote to show your support.

History

• 14^th November, 2011: Initial post