在 wpf 中的网格内动态填充网格

Question

我是 WPF 新手。这里我有以下静态网格

主网格

像这样子网格的框架

子网格

我有一个主网格，我正在尝试动态生成子网格并将其填充到主网格列 0 中

我试图得到的最终结果如下所示

这里我正在尝试使用一些样式填充项目集合（每个集合项目属性都有单独的块）。

所以对于每个集合项，我想生成一个网格并将集合属性名称和值绑定在上图中的网格内，红色表示集合项的网格，黑色网格是主网格。

非常感谢为此目的提出一个想法或提出更好的解决方案

编辑：

到目前为止，我尝试关注，这里作为子网格我试图填充 icTodoList 网格 3 次，但这里只填充 1 次

XML 文件

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

代码隐藏文件

    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

这只是一个示例（我将每个网格的背景设置为不同的颜色，这只是一个示例）以帮助您入门，您可以通过添加自己的方法来扩展它。

在代码中：

    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>

您可以在我的 xaml 代码中看到，只有一个网格，即上面 C# 代码中使用的主网格。