Manipulating Silverlight controls at Runtime

This article shows how to create and delete Silverlight controls or XAML elements at runtime. You will also learn how to create event handlers and associate them with the dynamically created control at runtime.

By default, when you create a Silverlight application, a root element is created automatically. This root element is a Canvas object, which can act as a container for other child controls. You can access element 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, you can use the same Children collection with Add and Remove methods to add and remove controls dynamically on the page.

Let's see 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:

<UserControl x:Class="DynamicGeneration.MainPage"

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"

mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480">

<Canvas x:Name="LayoutRoot" >

<Button x:Name="btnAddText" Content="Add TextBlock" Click="btnAddText_Click" Canvas.Left="20" Canvas.Top="10"></Button>

<Button x:Name="btnDeleteText" Content="Delete TextBlock" Click="btnDeleteText_Click" Canvas.Left="20" Canvas.Top="40"></Button>

<Button x:Name="btnAdd" Content="Add Button" Click="btnAdd_Click" Canvas.Left="140" Canvas.Top="10"></Button>

<Button x:Name="btnDelete" Content="Delete Button" Click="btnDelete_Click" Canvas.Left="140" Canvas.Top="40"></Button>

</Canvas>

</UserControl>

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

 

namespace DynamicGeneration

{

public partial class MainPage : UserControl

{

TextBlock tblk;

Button btnSubmit;

 

public MainPage()

{

InitializeComponent();

}

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.

// Adding a TextBlock control at runtime

private void btnAddText_Click(object sender, RoutedEventArgs e)

{

tblk = new TextBlock();

tblk.Height = 20;

tblk.Width = 80 ;

tblk.Text = "Dynamically Generated TextBlock";

tblk.Foreground = new SolidColorBrush(Colors.Magenta);

 

// Sets dependency properties

tblk.SetValue(Canvas.LeftProperty, 20.00);

tblk.SetValue(Canvas.TopProperty, 90.00);

 

// Adds the dynamically created control to the canvas

LayoutRoot.Children.Add(tblk);

 

}

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.
 

// Deleting the control at runtime

private void btnDeleteText_Click(object sender, RoutedEventArgs e)

{

btnDeleteText.IsEnabled = false;

btnAddText.IsEnabled = true;

// Removes the dynamically created control from the canvas

LayoutRoot.Children.Remove(tblk);

}

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.
 

// Adding a control at runtime

private void btnAdd_Click(object sender, RoutedEventArgs e)

{

btnAdd.IsEnabled = false;

 

btnSubmit = new Button();

btnSubmit.Height =20;

btnSubmit.Width = 60;

 

btnSubmit.Content = "Submit";

btnSubmit.Background = new SolidColorBrush(Colors.Magenta);

 

// Sets dependency properties

btnSubmit.SetValue(Canvas.LeftProperty, 250.00);

btnSubmit.SetValue(Canvas.TopProperty, 90.00);

 

// Adds the dynamically created control to the canvas

LayoutRoot.Children.Add(btnSubmit);

}

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.

btnSubmit.Click += new RoutedEventHandler(btn_Click);
btnDelete.IsEnabled = true;

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.
 

// Deleting the control at runtime

private void btnDelete_Click(object sender, RoutedEventArgs e)

{

btnDelete.IsEnabled = false;

btnAdd.IsEnabled = true;

 

// Removes the dynamically created control from the canvas

LayoutRoot.Children.Remove(btnSubmit);

}

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.

 

private void btn_Click(object sender, RoutedEventArgs e)

{

SkewTransform skt = new SkewTransform();

skt.AngleX = 45;

skt.AngleY = 0;

skt.CenterX = 0;

skt.CenterY = 0;

btnSubmit.RenderTransform = skt;

}

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

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

Conclusion:

 

This article showed how to dynamically add, remove and modify Silverlight controls at runtime.