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

Solution 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.
        });
    } 

Solution 2

Your code seems OK no problem in button creation. your code exactly create 5 buttons and add into grid but the only problem is you put all buttons in one location inside grid. here is the solution 1. if you want to use as parent container set the margin of every single button. 2. Create a stackpanel with orientation vertical and add button first into stackpanel then add stackpanel into grid.

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.
         });
    }

Comments

[Arsal]

Brother showing no error..but after project launching ahen I clicked the button trade then sudden break /continue option comes...So not showing proper result..??

[Arsal]

An exception of type 'System.InvalidOperationException' occurred in System.Windows.ni.dll but was not handled in user code If there is a handler for this exception, the program may be safely continued.

[Arsal]

Jaihind Dear when I comment out grid.children.add(panel) then click become possible...and no result shows....may b in background this is showing result..but not front..??

[Jaihind]

kidOfDeath yes you are right i made changes @user3061129 give a look. this works