Windows Phone：動態添加數據綁定項目中的列控件

Question

我想佈局一個網格，以便它可以有一個動態數量的列，並且每個數據綁定控件都會自動添加到正確的列（根據其索引數據上下文）。

想想保齡球框架，雖然通常總是10，但我不想在XAML中定義10列並逐個添加每個框架。我正試圖以編程方式進行。

這裏是我的XAML：

<ItemsControl x:Name="BowlingPlayers" ItemsSource="{Binding Game.Players}"> 
    <ItemsControl.ItemTemplate> 
     <DataTemplate> 
      <Grid Margin="0,0,0,20"> 
       <Grid.ColumnDefinitions> 
        <ColumnDefinition Width="100"/> 
        <ColumnDefinition Width="*"/> 
       </Grid.ColumnDefinitions> 

       <TextBlock Text="{Binding Name}"/> 

       <ScrollViewer HorizontalScrollBarVisibility="Visible" Grid.Column="1"> 
        <ItemsControl ItemsSource="{Binding Frames}" > 
         <ItemsControl.ItemsPanel> 
          <ItemsPanelTemplate> 
           <Grid Loaded="BowlingGrid_OnLoaded"> 

           </Grid> 
          </ItemsPanelTemplate> 
         </ItemsControl.ItemsPanel> 
         <ItemsControl.ItemTemplate> 
          <DataTemplate> 
           <Border Height="64" BorderBrush="White" BorderThickness="1" Loaded="BowlingFrame_OnLoaded"> 
            <Grid> 
             <Grid.ColumnDefinitions> 
              <ColumnDefinition Width="*"/> 
              <ColumnDefinition Width="*"/> 
             </Grid.ColumnDefinitions> 
             <Grid.RowDefinitions> 
              <RowDefinition Height="*"/> 
              <RowDefinition Height="*"/> 
             </Grid.RowDefinitions> 

             <TextBlock Grid.Column="0" Text="{Binding Ball1}"/> 
             <Border Grid.Column="1" BorderBrush="White" BorderThickness="1,0,0,1"> 
              <TextBlock Text="{Binding Ball2}"/> 
             </Border> 
             <TextBlock Grid.ColumnSpan="2" Grid.Row="1" Text="{Binding Score}"/> 
            </Grid> 
           </Border> 
          </DataTemplate> 
         </ItemsControl.ItemTemplate> 
        </ItemsControl> 
       </ScrollViewer> 
      </Grid> 
     </DataTemplate> 
    </ItemsControl.ItemTemplate> 
</ItemsControl> 

然後在後臺代碼：

private void BowlingGrid_OnLoaded(object sender, RoutedEventArgs e) { 

    var grid = (Grid)sender; 

    if (grid.ColumnDefinitions.Any()) return; 

    var player = grid.DataContext as BowlingPlayer; 

    if (player != null) {     
     // Add columns for each frame 
     foreach (var frame in player.Frames) { 
      grid.ColumnDefinitions.Add(new ColumnDefinition() {Width = new GridLength(1, GridUnitType.Star)}); 
     } 
    } 
} 

private void BowlingFrame_OnLoaded(object sender, RoutedEventArgs e) { 
    var border = (Border) sender; 
    var frame = border.DataContext as BowlingFrame; 
    var presenter = VisualTreeHelper.GetParent(border); 
    var grid = VisualTreeHelper.GetParent(presenter) as Grid; 

    if (grid != null) { 
     var player = grid.DataContext as BowlingPlayer; 

     if (player != null) { 
      var frameIndex = player.Frames.IndexOf(frame); 
      Grid.SetColumn(border, frameIndex + 1);          
     } 
    } 
} 

據「之類的」工作，似乎所有的幀都被放進第一列，而不是各自的專欄索引。

是否有另一種方法可以在沒有在XAML中硬編碼寬度的情況下進行佈局？它可以工作，如果我使用水平的StackPanel並給每個框架（邊框）一個明確的寬度和高度，但我希望它縮放到可用寬度。

基本上，一個CSS3 flexbox等效的佈局。

Answer 1

我找到了WPF UniformGrid這裏相當於演示：

http://www.jeff.wilcox.name/2009/01/uniform-grid/

切換至後，它的工作如預期！現在不需要使用任何自定義代碼。