Windows Phone 8 App Dynamically/programmatically create buttons in g grid/Panel

Question

I have a problem in creating buttons dynamically in windows phone 8 app.

I can create these buttons in my Xaml file But not programmatically... here is the snapshot of that file....

http://www.4shared.com/photo/Hu1FVCdn/wp8.html

I have a grid view at left side and buttons on it.(1,2,3,4,5).. I made these buttons in Xaml file. Not through program.

When Trade button is clicked then these buttons should display (programmatically)....By Handler of Trade Button..

Here is My Xaml Code..

    <Grid x:Name="grid" Height="618" Margin="6,147,0,0" Width="112" HorizontalAlignment="Left" VerticalAlignment="Top">
        <Grid.Background>
            <ImageBrush Stretch="Fill" ImageSource="pannel.png"/>
        </Grid.Background>
        <Button x:Name="a" Content="1" HorizontalAlignment="Left" Margin="-7,-11,-11,563" VerticalAlignment="Bottom" Width="130" RenderTransformOrigin="0.636,0.638" Height="66" BorderThickness="0" d:IsHidden="True">
            <Button.Background>
                <ImageBrush Stretch="Fill" ImageSource="pannel_btn_unselected.png"/>
            </Button.Background>
        </Button>
        <Button x:Name="b" Content="2" HorizontalAlignment="Left" Margin="-7,0,-11,519" VerticalAlignment="Bottom" Width="130" RenderTransformOrigin="0.636,0.638" Height="66" BorderThickness="0" d:IsHidden="True">
            <Button.Background>
                <ImageBrush Stretch="Fill" ImageSource="pannel_btn_unselected.png"/>
            </Button.Background>
        </Button>
        <Button x:Name="c" Content="3" HorizontalAlignment="Left" Margin="-7,0,-11,475" VerticalAlignment="Bottom" Width="130" RenderTransformOrigin="0.636,0.638" Height="66" BorderThickness="0" d:IsHidden="True">
            <Button.Background>
                <ImageBrush Stretch="Fill" ImageSource="pannel_btn_unselected.png"/>
            </Button.Background>
        </Button>
        <Button x:Name="d" Content="4" HorizontalAlignment="Left" Margin="-7,0,-11,431" VerticalAlignment="Bottom" Width="130" RenderTransformOrigin="0.636,0.638" Height="66" BorderThickness="0" d:IsHidden="True">
            <Button.Background>
                <ImageBrush Stretch="Fill" ImageSource="pannel_btn_unselected.png"/>
            </Button.Background>
        </Button>
        <Button x:Name="e" Content="5" HorizontalAlignment="Left" Margin="-7,0,-11,387" VerticalAlignment="Bottom" Width="130" RenderTransformOrigin="0.636,0.638" Height="66" BorderThickness="0" d:IsHidden="True">
            <Button.Background>
                <ImageBrush Stretch="Fill" ImageSource="pannel_btn_unselected.png"/>
            </Button.Background>
        </Button>
    </Grid>

Except creating like this..I just want to put a for loop (C# File)in Trade Button handler then This work will done Programmatically..

I did it but it shows only one button..Not all buttons..? may b location issue..??

Here is My xaml.cs code.

 public main()
  {
    InitializeComponent();

  }
private void Button_Click(object sender, RoutedEventArgs e)
{
    NavigationService.Navigate(new Uri("/MainPage.xaml", UriKind.RelativeOrAbsolute));
}
private void Grid_View_Btn_1_Click(object sender, System.Windows.RoutedEventArgs e)
{
           int i;
           for (i=0;i<5;i++)
             {
                Button btn = new Button() { Content = "Button" };
                btn.Width=130;
                btn.Height = 66;
                 grid.Children.Add(btn);
             }

    //       Grid.SetRow(control, i);
    //    Grid.SetColumn(control, j);
    // TODO: Add event handler implementation here.
}

how my result become like my snapshot...But Dynamically/Programmatically. Kindly guide me for this problm..Thanks in advance..!

Answer 1

Jahind answer is good solution but I think there is little mistake, you need to add the panel to the grid after the loop, something like that should work:

    private void Grid_View_Btn_1_Click(object sender, System.Windows.RoutedEventArgs e)
    {   
        Dispatcher.BeginInvoke(() => {         
            StackPanel panel = new StackPanel();
            panel.Orientation = System.Windows.Controls.Orientation.Vertical;
            int i;
            for (i=0;i<5;i++)
            {
                Button btn = new Button() { Content = "Button" };
                btn.Width=130;
                btn.Height = 66;
                // btn.Margin = new Thickness(0,0,0,0)//try this if you use grid
                //grid.Children.Add(btn);
                panel.Children.Add(btn);
            }

            grid.Children.Add(panel);

            //       Grid.SetRow(control, i);
            //    Grid.SetColumn(control, j);
            // TODO: Add event handler implementation here.
        });
    }