Creating controls dynamically

By default, when you create a Silverlight application, a root element will be created automatically. This root element is a Canvas object, which can act as a container for other child controls. This element can be accessed in your code by using its name, which is typically "LayoutRoot" by default. If you rename the Canvas object in your XAML code, you will need to refer to that name in the code-behind class. Now, using this root element, you can invoke the Add method on its Children property which refers to the child elements of the root. The Children property returns a collection of child objects. Hence, the same Children collection can be used with Add and Remove methods to add and remove controls dynamically on the page.

Let's see all this in action. To begin with, we will create a Silverlight application having four buttons, Add TextBlock, Delete TextBlock, Add Button, and Delete Button respectively.

The XAML code for this would be as shown:

Next, we will declare in the C# code the necessary controls that are to be created at runtime.

Here, we have declared tblk and btnSubmit as the controls of type TextBlock and Button respectively. Note that as of now the controls have not been instantiated, only the names have been declared.

Now we will see how to add the TextBlock control dynamically. The TextBlock must be created only when the button AddTextBlock is clicked. The event handler for it is named as btnAddText_Click.

Here, we created a new instance of TextBlock and assigned it to tblk. Then we need to set all the required attributes for the control so that it can be rendered appropriately on the page. Hence, we have set the Height, Width, Text, Foreground, Left, and Top properties. Note that the Top and Left properties have been set through Canvas because these positions are relative to the Canvas. Such properties, like Canvas.Left, are called attached properties. An attached property is a type of property that supports a specialized XAML syntax in Silverlight.

Once all the requisite properties have been set, we add the TextBlock to the Canvas by using LayoutRoot.Children.Add method.

Similarly, we can delete the control at runtime upon Click action.

Before deleting the control, we need to ensure that the button DeleteText is not enabled and the button AddText is enabled. This is because, they could be clicked by the user again and again, resulting in chaos on the page. Hence, to avoid that, we enable and disable the buttons as and when required.

Similar to adding the TextBlock, we can add a Button control. btnSubmit had already been declared earlier. Now, we create an instance for it.

The TextBlock control does not have a Background property; however, the Button control has background which can be set. Therefore, we set the Background, Content, Left, Top, Height, and Width properties for the Button.

Likewise, we can add an event dynamically to the control and associate an event handler to it. This is shown below. The most common event for a button being a Click, we write an event handler for that and associate it with the Click event.

The above code is to be added to the btnAdd_Click event handler, after the LayoutRoot.Children.Add(btnSubmit); statement. This will ensure that when the button is added to the Canvas, its event also will be associated with the handler.

Next, we will delete the Button control, btnSubmit, at runtime.

Now we will see how to transform the button Submit upon click action. We will use the SkewTransform so as to skew the button in a tilted fashion. To do this, we create an instance of SkewTransform class, and then assign that instance to the btnSubmit's RenderTransform property. This property sets or gets a transform for the control. Here, in this code, we see a two-fold action. The Click event of the button btnSubmit is being given an action at runtime, and secondly, we are transforming the button to make it skewed.

Similar to the SkewTransform, we can use ScaleTransform, RotateTransform and TranslateTransform programmatically.

Thus, we can dynamically manipulate controls in many different ways.

Summary

In this article, you learnt how to dynamically add, remove and modify Silverlight controls dynamically.

About Medusa M

Medusa loves experimenting with technology trends, especially that of Microsoft. This author has published 14 articles on DotNetSlackers. View other articles or the complete profile here.

---

Discussion

Subject	Author	Date
Dynamic Controls	Solomon Pulapkura	3/26/2011 11:47 AM
Hi Medusa, Thanks for this article. Although can you tell me how to load a dynamic control from a different control and not the MainPage.xaml. I have a button on the MainPage.xaml which when clicked, I want it to load a custom control. Can you please help? Thanks Reply | Permanent link
That's easy	Medusa M	4/4/2011 1:51 PM
Well, though this example was given with MainPage.xaml, you can use similar code from any other page too.  Just create the control instances in that codebehind where you want it to be called. Reply | Permanent link

---

Please login to rate or to leave a comment.