Manipulating Silverlight controls at Runtime

// 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.