2016-08-01 2 views
1

ItemsControl의 WrapGrid는 첫 번째 항목의 너비를 모든 하위 항목의 기본 너비로 취합니다. 개별 항목의 콘텐츠에 따라 항목 폭을 늘릴 수있는 해결 방법이 있습니까? 여기 내 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> 

스크린 : 그것은 첫 번째 항목의 폭을 필요로 번째 이미지에서 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

관련 문제