dynamically populate grids inside a grid in wpf

Question

I'm new to WPF. here I'm having following static grid

Main Grid

frame for child grid like this

Child Grid

I have a main grid, I'm trying to dynamically generate child grids and populate it inside Main Grid Column 0

Final outcome I'm trying to get like below

here I'm trying populate a collection of items with some styles (with separate block for each collection item property).

so for each collection item I want to generate a grid and bind that collection property names and values inside of a grid here in above picture red color represent grid for a collection item, black color grid is main grid.

really appreciate suggest an idea or propose better solution for this purpose

Edit:

upto now I tried following, here as child grid I'm trying to populate icTodoList grid 3 times, but here its only populate 1 time

XML file

  <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="147*"/>
            <ColumnDefinition Width="220*"/>
            <ColumnDefinition Width="150*"/>
        </Grid.ColumnDefinitions>
        <ItemsControl Name="icTodoList">
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Vertical">
                        <Border BorderBrush="Black" BorderThickness="1">
                            <Grid Name="icTodoList" Grid.Row="0" Grid.Column="0" Margin="0,10,10,2941" RenderTransformOrigin="0.5,0.5" HorizontalAlignment="Right" Width="268">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="79*"/>
                                    <ColumnDefinition Width="99*"/>
                                    <ColumnDefinition Width="90*"/>
                                </Grid.ColumnDefinitions>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="39*"/>
                                    <RowDefinition Height="63*"/>
                                    <RowDefinition Height="29*"/>
                                </Grid.RowDefinitions>
                                <TextBlock Grid.Row="0" Grid.Column="0"  Text="{Binding Title}"/>
                                <TextBlock Grid.Row="0" Grid.Column="1"  Text="{Binding Completion}"/>
                                <TextBlock Grid.Row="0" Grid.Column="2"  Text="{Binding Description}"/>
                                <TextBlock Grid.Row="1" Grid.Column="0"  Text="{Binding Title}"/>
                                <TextBlock Grid.Row="1" Grid.Column="1"  Text="{Binding Completion}"/>
                                <TextBlock Grid.Row="1" Grid.Column="2"  Text="{Binding Description}"/>
                                <TextBlock Grid.Row="2" Grid.Column="0"  Text="{Binding Title}"/>
                                <TextBlock Grid.Row="2" Grid.Column="1"  Text="{Binding Completion}"/>
                                <TextBlock Grid.Row="2" Grid.Column="2"  Text="{Binding Description}"/>
                            </Grid>
                        </Border>
                    </StackPanel>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>
    </Grid>

Code Behind file

    public WindowPanelConstructor()
    {
        InitializeComponent();

        List<TodoItem> items = new List<TodoItem>();

        for (int i = 0; i < 3; i++)
        {
            items.Add(new TodoItem() { Title = "Title" + i.ToString(), Completion = "Completion" + i.ToString(), Description = "Description" + i.ToString() });
            icTodoList.ItemsSource = items;
        }      


    }

    public class TodoItem
    {
        public string Title { get; set; }
        public string Completion { get; set; }
        public string Description { get; set; }
    }

Answer 1

This is just an example (I set the background of each grid to be different colour, this is just an example) to get you started, you can expand this by adding your own methods.

In Code:

    public MainWindow()
    {
        InitializeComponent();

        // get the reference of the column definition of the main grid, then set your new column definition as required.
        var coldef = MainGrid.ColumnDefinitions;
        coldef.Add(new ColumnDefinition(){Name = "col1", Width=new GridLength(100.0)});
        coldef.Add(new ColumnDefinition() { Name = "col2", Width = new GridLength(100.0) });
        coldef.Add(new ColumnDefinition() { Name = "col2", Width = new GridLength(100.0) });

        // now add the child grids dynamically as many as you like.
        for (var i = 0; i < 2; ++i)
        {
            var  colour1 = (byte)(50 * i);
            var colour2 = (byte)(100 * i);
            var grid1 = new Grid()
            {
                Background = new SolidColorBrush(Color.FromRgb(100, colour1, colour2)),
            };
            grid1.SetValue(Grid.ColumnProperty, i);

            // get the reference to the row definition the child grid, then set the rows as required.
            var rowDef = grid1.RowDefinitions;
            rowDef.Add(new RowDefinition() { Name = "Row1", Height = new GridLength(100.0) });
            rowDef.Add(new RowDefinition() { Name = "Row2", Height = new GridLength(100.0) });

            // add nesting child grids as many as you like.
            for (var j = 0; j < 1; j++)
            {
                var r = (byte)(50 * i);
                var g = (byte) (100 * i);
                var grid2 = new Grid()
                {
                    Background = new SolidColorBrush(Color.FromRgb(r, g, 255)),

                };
                grid2.SetValue(Grid.RowProperty, 0);

                // add grid 3 to grid 2
                grid1.Children.Add(grid2);
            }

            // Add grid1 to main grid.
            MainGrid.Children.Add(grid1);

        }
    }

XAML:

<Window x:Class="SimpleProgressBar.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Grid x:Name="MainGrid">
    </Grid>
</Window>

You can see in my xaml code, there is only one grid, that is the main grid that is used in the C# code above.