How to Add Custom Control in LightSwitch

Prologue:

In my last article on LightSwitch, we discussed how to save records at the time of adding them. Today we shall see how to handle custom controls in LightSwitch as a series of articles.

As the first article of this series, let us discuss how to add a custom control to a LightSwitch screen. To demonstrate this, we have to create a demo application.

In LightSwitch, the controls are created automatically while creating the screen depending on the property's type. We can change the control of the property with the limited amounted of builtin controls available.

If you need to add new controls, you have to choose Custom controls options from the control list.

Let us create a demo LightSwitch application with the name "WorkingWithCustomControlsInLSBeta2" as shown in the figure.

Follow the [No: #] to complete the application creation.

The Entity Designer:

Let us create a table.

This the new screen of Beta 2 which is not available in Beta 1. Select the rounded option to create a new table.

After clicking on the "Create new table" option, the Entity Designer will be displayed to create the Entity required.

As per our demo application we need to create a table called "Person".

Designing the Screen:

Let us create a List and Details screen for the Student entity. There are two ways to create a screen. One of the options is by selecting the Screen... button on the Entity Designer screen.

Another way is right-clicking on the Screens section in the Solution Explorer. In our demo application we have created using the first way.

As shown in the above figure, select the New Data Screen template to create the screen for the Person entity.

The above figure shows the complete screen structure for our demo application before adding the Custom controls.

Here,

Select the "Person Property" screen element.
To add the new control to the screen, select the "Add" dropdown list.
Select the "New Custom Control"

Once you click on the "New Custom Control" option, you will be getting the "New Custom Control" dialog as shown in the following figure.

To add the Windows Button control as a custom control to the LightSwitch screen:

Select the "System.Windows" namespace.
Select the Button control under the"Controls" namespace of the "System.Windows" namespace and Click OK to proceed.

After adding the Button control to the screen, change some properties of the Custom Control.

Here,

Set the "Label Position" to "None". Because we don't need a label for the button control saying that this is button right.
Set the Position of the button to center.
By default, the button control will be stretched to the screen. So we need to set the width and height for the button control.

Quick Note:

Actually LightSwitch provides the "holder" for the custom control. Here in the above figure we have set the width and height of the holder not the actual button control.

So we have added the Windows button control as a LightSwitch custom control. Let us see the application in action.

Application in Action:

In this above figure, as we have added the button control, it is simply displayed on the screen as per the height and width of the custom control holder.

In the next article, we shall discuss how to access the custom control in LightSwitch.

Summary:

In this article part I, we have seen how to add a custom control to the LightSwitch screen.

Thanks for spending your precious time here. Please provide your valuable feedbacks and comments, which enablee me to give a better article the next time.

Thanks.

6 Comments

Join the conversation! Your thoughts help the community grow.

fiko JZ15y ago
Hi, im looking how to handle the click event of the button. How can I manage the event?
- Jaganathan Bantheswaran15y ago
  Please look into this article http://www.c-sharpcorner.com/UploadFile/dbd951/8349/?ArticleID=96322763-6774-4ae1-934f-2968139b2310
Lana15y ago
good writing,it was easy to understand
- Jaganathan Bantheswaran15y ago
  Thanks lana
Shalini Juneja15y ago
Useful Article
- Jaganathan Bantheswaran15y ago
  Thanks shalini...