Click here to Skip to main content
Click here to Skip to main content

How to integrate Usercontrols in LightSwitch Application?

, 13 Nov 2011
Rate this:
Please Sign up or sign in to vote.
In this Tutorial, I will show you how to integrate a UserControl in LightSwitch Application.

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 3rd 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:

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:

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.

1. Create a New LightSwitch Project

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:

2. Create a New Table

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:

3. Define TaskTable Columns

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:

4. Edit Method to Compute the Column5. Computation Method

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.

6. Add a New Screen

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.

7. Create New Details Screen

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:

8. Initial View of the Demo Application

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.

9. Insert Some Data Records to the TaskTable

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:

10. Switch to File View 11. Switch to Show All Files View

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.

12. Add a new Custom Control to the Screen

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.

13. Add TaskDashboardChart Control to the Screen

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

14. Custom Control Added to the Screen

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:

15. Default Screen Loaded to the UI

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:

16. Updating Records Reflects in the Chart Control

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

  • 14th November, 2011: Initial post

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

About the Author

_ Kunal Chowdhury _
Technical Lead
India India
Kunal Chowdhury is a Microsoft "Client Development" MVP (Most Valuable Professional), a Codeproject Mentor, Telerik MVP, Nokia Developer Champion, Speaker in various Microsoft events, Author, passionate Blogger and a Software Engineer by profession.
 
He is currently working in an MNC located in India. He has a very good skill over XAML, C#, Silverlight, Windows Phone, WPF and Windows 8 (WinRT). He posts his findings, articles in his technical blog and CodeProject.
 
Technical Blog: http://www.kunal-chowdhury.com
Facebook: http://facebook.com/blog.kunal
Twitter : http://twitter.com/kunal2383
Follow on   Twitter   Google+   LinkedIn

Comments and Discussions

 
GeneralMy vote of 5 PinmemberKanasz Robert17-Nov-11 9:13 
GeneralRe: My vote of 5 Pinmvp_ Kunal Chowdhury _17-Nov-11 14:12 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web01 | 2.8.140721.1 | Last Updated 14 Nov 2011
Article Copyright 2011 by _ Kunal Chowdhury _
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid