動態填充網格中的網格wpf

Question

我是新來的WPF。在這裏我有以下靜電網

主網

框架子網格這樣

兒童電網

我有一個主電網，我試圖動態生成子網格並將其填充到主G中擺脫列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＃代碼。