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.