Add Controls Dynamically to Silverlight Page

We some time need to create control on the page dynamically in Silverlight I will teach you about this in this article.

For learning how to add controls dynamically lets learn some basic controls that are good to align other controls on the page.

Step 1:

Start with new Silverlight project

Before Starting Lets understand below two controls

Canvas

Canvas is control that can be used to place other elements on it .it's similar to like we use canvas for drawing that we can draw anything on it.

Stack Panel

Stack panel is control used to stack controls on each other its orientation can be horizontal / vertical

This both controls we are going to use in our process of adding controls dynamically on the page of Silverlight. Its invisible control. 

Vertical Stack panel

Control1

Control2

Control3

Horizontal Stack panel

Control 1

Control2

Control3

We will use this stack panel because we don't need to specify at which position we want to add the control we can just add buttons into stack panel and it will be aligned automatically by stack panel.

Now lets start with code.

Step 2 :

Add new button from the toolbox to page

Set its Content = "Add Button"

Step 3:

Now look at your XAML code it would look like

<Grid x:Name="LayoutRoot" Background="White">
       
        <Button Content="Button" Height="23" HorizontalAlignment="Left" Margin="12,21,0,0" Name="button1" 
VerticalAlignment="Top" Width="75" Click="button1_Click" Canvas.Left="259" Canvas.Top="-3" />

        <
 </Grid>

Now we will add canvas into this code so that we can add controls dynamically on the canvas .so modified code will look like below

<Grid x:Name="LayoutRoot" Background="White">
        <Canvas Name="MyCanvas">
        <Button Content="Button" Height="23" HorizontalAlignment="Left" Margin="12,21,0,0" Name="button1" 
VerticalAlignment="Top" Width="75" Click="button1_Click" Canvas.Left="259" Canvas.Top="-3" />
        </Canvas>
    </Grid>

Now that we have done 60% of our work .

Step 4:

Now lets add code in code behind so that on the click event of button we can generate other buttons .

 public partial class MainPage : UserControl
    {
        StackPanel sp1 = new StackPanel();
        public MainPage()
        {
            InitializeComponent();
            sp1.Orientation = Orientation.Vertical;
            MyCanvas.Children.Add(sp1);
        }
 
        private void button1_Click(object sender, RoutedEventArgs e)
        {
            Button b1 = new Button();
            b1.Content = "I m new Button";
            b1.Click +=new RoutedEventHandler(b1_Click);
            sp1.Children.Add(b1);
        }
 
        public void b1_Click(Object Sender,RoutedEventArgs e)
        {
            MessageBox.Show("I m clicked");
        }
    }

Look at the code I have taken object of StackPanel and Added it to canvas before proceeding to other things .

Now we have stack panel on the canvas now on the click event of button we can write code for adding control dynamically .

So I have created one object of Button Class. Set its properties like Content and added event handler by b1.Click + new RoutedEventHandler(b1_Click)

We have declared event handler so we need to define method that will execute on that dynamically created button. So we written method called b1_Click and that contain code that will execute on click of dynamically created buttons.