Articles → LIGHT SWITCH 2011 → Adding Controls Dynamically In Lightswitch 2011

Adding Controls Dynamically In Lightswitch 2011

In this article, I will explain how to add controls dynamically in lightswitch application.

Software Requirement

Before you start reading this article, you should ensure that

Visual studio 2010 is installed on your machine.
Visual Studio 2010 service pack 1 is installed on your machine.
Microsoft Visual Studio Light switch 2011 is installed on your machine

Prerequisite Knowledge

Before you go ahead, it is required that you should know

How to add screen in lightswitch?
What is Created event in lightswitch?
What is ControlAvailable event in lightswitch?

Creation Of New Screen

The first step is to add a new screen. For this article, I have created a new screen of type New Data Screen. See the screen shot for screen designer.

Picture showing design mode of New data screen

Click to Enlarge

Add Custom Controls In The Screen

To add a custom control click on "Add" button and click on "New Custom Control…" option.

Picture showing how to add custom control

Click to Enlarge

From the "Add Custom Control" window, select "StackPanel" option.

Picture showing a pop up to select StackPanel for custom control

Click to Enlarge

Once you click "Ok" a custom control is added on the screen. See the screen shot below

Click to Enlarge

Register Controlavailable Event In Screen’S Created Event

In screen’s created event, register the ControlAvailable event.

partial void CreateNew_Created() {
	// Write your code here.
	this.FindControl("ScreenContent").ControlAvailable += new EventHandler < ControlAvailableEventArgs > (CreateNew_ControlAvailable);
}

Add Code In Controlavailable Event

Add the following code in ControlAvailable event

void CreateNew_ControlAvailable(object sender, ControlAvailableEventArgs e) {
	if (e.Control is StackPanel) {
		StackPanel spanel = (StackPanel) e.Control;

		HyperlinkButton lnk = new HyperlinkButton();
		lnk.Content = "google";
		lnk.NavigateUri = new Uri("http://google.com");
		lnk.TargetName = "_blank";
		spanel.Children.Add(lnk);

		lnk = new HyperlinkButton();
		lnk.Content = "rediff";
		lnk.NavigateUri = new Uri("http://rediff.com");
		lnk.TargetName = "_blank";
		spanel.Children.Add(lnk);
	}
}

In this code I am checking if the control type is stackpanel or not. If the control is stack panel then I am adding 2 links inside the stackpanel control.

Output

Click to Enlarge

Download

Posted By -	Karan Gupta

Posted On -	Thursday, August 2, 2012

Query/Feedback

Your Email Id		**

Subject		*

Query/Feedback	Characters remaining 250	**