2016-08-01 2 views
1

ItemsControlのWrapGridは、最初のアイテムの幅をすべての子アイテムのデフォルトの幅としてとります。個々のアイテムのコンテンツに応じてitemwidthを伸ばすための回避策はありますか? ここは私のXAMLです。ItemsControlのアイテムは、最初のアイテムの幅をとります。

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

スクリーン:それは最初の項目の幅をとるよう 第2の画像内のenter image description here

「ニュースレター」の項目は、完全に表示されていません。 enter image description here

これを解決するにはどうすればよいですか?

答えて

2

変更WrapGrid UPDATE

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

ItemsStackPanelしようとしたアイテムは、画面を超えて...私はitemsstackpanelを使用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; 
    } 
} 
+0

に応じてカスタムラップグリッドパネルを使用するには.. 。私は、画面サイズを超えている場合、項目が次の行にラップされたい – Razor

+0

https://www.dropbox.com/s/w4e0ayxblnl6dzb/Capture1.PNG?dl=0 – Razor

+0

助けてくれてありがとう! – Razor

関連する問題