ItemsControl中的項目佔用第一項的寬度

Question

ItemsControl中的WrapGrid將第一項的寬度作爲所有子項的默認寬度。是否有任何解決方法根據每個單獨項目的內容來擴展項目寬度？ 這是我的XAML。

    <Grid Grid.Row="2"> 
         <ItemsControl Grid.Column="1" ItemsSource="{x:Bind articleTags}"> 
          <ItemsControl.ItemsPanel> 
           <ItemsPanelTemplate> 
            <WrapGrid Orientation="Horizontal"/> 
           </ItemsPanelTemplate> 
          </ItemsControl.ItemsPanel> 
          <ItemsControl.ItemTemplate> 
           <DataTemplate> 
            <Border BorderBrush="#E1E1E1" HorizontalAlignment="Stretch" Background="#E1E1E1" Margin="4,4,0,0"> 
             <TextBlock Text="{Binding NAME}" Margin="6,0,6,0"/> 
            </Border> 
           </DataTemplate> 
          </ItemsControl.ItemTemplate> 
         </ItemsControl> 
        </Grid> 

屏幕截圖：

在第二圖像的「通訊」項目沒有被充分，因爲它需要的第一個項目的寬度顯示。

如何解決這個問題？

Answer 1

更改WrapGrid到ItemsStackPanel

<ItemsControl.ItemsPanel> 
    <ItemsPanelTemplate> 
     <ItemsStackPanel Orientation="Horizontal"/> 
    </ItemsPanelTemplate> 
</ItemsControl.ItemsPanel> 

UPDATE 嘗試根據this sample

public class CustomWrapPanel : Panel 
{ 
    protected override Size MeasureOverride(Size availableSize) 
    { 
     // Just take up all of the width 
     Size finalSize = new Size { Width = availableSize.Width }; 
     double x = 0; 
     double rowHeight = 0d; 
     foreach (var child in Children) 
     { 
      // Tell the child control to determine the size needed 
      child.Measure(availableSize); 

      x += child.DesiredSize.Width; 
      if (x > availableSize.Width) 
      { 
       // this item will start the next row 
       x = child.DesiredSize.Width; 

       // adjust the height of the panel 
       finalSize.Height += rowHeight; 
       rowHeight = child.DesiredSize.Height; 
      } 
      else 
      { 
       // Get the tallest item 
       rowHeight = Math.Max(child.DesiredSize.Height, rowHeight); 
      } 
     } 

     // Add the final height 
     finalSize.Height += rowHeight; 
     return finalSize; 
    } 

    protected override Size ArrangeOverride(Size finalSize) 
    { 
     Rect finalRect = new Rect(0, 0, finalSize.Width, finalSize.Height); 

     double rowHeight = 0; 
     foreach (var child in Children) 
     { 
      if ((child.DesiredSize.Width + finalRect.X) > finalSize.Width) 
      { 
       // next row! 
       finalRect.X = 0; 
       finalRect.Y += rowHeight; 
       rowHeight = 0; 
      } 
      // Place the item 
      child.Arrange(new Rect(finalRect.X, finalRect.Y, child.DesiredSize.Width, child.DesiredSize.Height)); 

      // adjust the location for the next items 
      finalRect.X += child.DesiredSize.Width; 
      rowHeight = Math.Max(child.DesiredSize.Height, rowHeight); 
     } 
     return finalSize; 
    } 
}