하나의 행에 여러 레코드를 표시해야합니다.

Question

내 WPF 레이아웃에서 중요한 문제는 WPF에서 아래 구조가 필요하다는 것입니다. 내가 그리드와 함께 노력하고 있지만 아래 보이는 것처럼 필요한 구조를 얻을 수 없습니다.

날 나는 새 행 한 행과 이후에 여러 레코드를 표시 할 수 있어요 너무 무엇을 할 수 있는지 알려 주시기 바랍니다.

![<Grid Width="500" Height="400"> 

       <ItemsControl Name="icTodoList"> 
        <ItemsControl.ItemTemplate> 
         <DataTemplate> 


         <Grid MouseUp="Grid_MouseUp_1"> 

           <Grid.RowDefinitions> 
            <RowDefinition></RowDefinition> 
            <RowDefinition></RowDefinition> 
            <RowDefinition></RowDefinition> 
           </Grid.RowDefinitions> 

           <Grid.ColumnDefinitions> 
            <ColumnDefinition Width="*" /> 
            <ColumnDefinition Width="100" /> 
            <ColumnDefinition Width="100" /> 
           </Grid.ColumnDefinitions> 
           <TextBlock > 

           <Image Style="{DynamicResource MainTextBlock}" Grid.Column="0" Grid.Row="0" Height="60" Width="60" Source="{Binding ProjectIcon}" x:Name="imgPhoto" ></Image> 

           <TextBlock Grid.Column="0" Grid.Row="1" Text="{Binding ProjectTitle}" /> 
           </TextBlock> 
          </Grid> 


        </DataTemplate> 
        </ItemsControl.ItemTemplate> 
       </ItemsControl> 
      </Grid>][2] 

Answer 1

이처럼 ItemsPanel로 WrapPanel를 지정하는 경우, 그것은 작동합니다 :

<ItemsControl > 
    <ItemsControl.ItemsPanel> 
     <ItemsPanelTemplate> 
      <WrapPanel/> 
     </ItemsPanelTemplate> 
    </ItemsControl.ItemsPanel> 

    ... Add the rest of your code here ... 

</ItemsControl> 

Answer 2

랩 패널 늘 당신이 행의 항목 암갈색을 제한 할 수 있지만, 사용자 정의를 사용할 수 이것을하기위한 통제. 아래는 내가 만들었던 사용자 정의 컨트롤입니다.이 함수는 "MaxColumns"속성을 설정할 수 있습니다.이 속성은 행당 최대 항목 수를 나타냅니다. 최대 너비를 초과하거나 MaxColumns가 fmunkert에 의해 제안 템플릿 패널을 사용 itemsSource에 바인딩하기 위해 다음

public class ColumnLimitedWrapPanel : WrapPanel 
{ 

    public int MaxColumns 
    { 
     get { return (int)GetValue(MaxColsProperty); } 
     set { SetValue(MaxColsProperty, value); } 
    } 

    public static readonly DependencyProperty MaxColsProperty = 
     DependencyProperty.Register("MaxColumns", typeof(int), typeof(ColumnLimitedWrapPanel), new UIPropertyMetadata(5)); 

    protected override Size ArrangeOverride(Size finalSize) 
    { 
     Point currentPosition = new Point(); 
     double ItemMaxHeight = 0.0; 
     int numChildsInRow = 0; 

     foreach (UIElement child in Children) 
     { 
      ItemMaxHeight = ItemMaxHeight > child.DesiredSize.Height ? ItemMaxHeight : child.DesiredSize.Height; 

      if ((currentPosition.X + child.DesiredSize.Width > this.DesiredSize.Width) || ((numChildsInRow == MaxColumns))) 
      { 
       currentPosition = new Point(0, currentPosition.Y + ItemMaxHeight); 
       ItemMaxHeight = 0.0; 
       numChildsInRow = 0; 
      } 
      child.Visibility = System.Windows.Visibility.Visible; 
      Rect childRect = new Rect(currentPosition, child.DesiredSize); 
      child.Arrange(childRect); 
      numChildsInRow++; 
      currentPosition.Offset(child.DesiredSize.Width, 0); 
     } 
     return finalSize; 
    } 

    protected override Size MeasureOverride(Size availableSize) 
    { 
     return base.MeasureOverride(availableSize); 
    } 
} 

을 초과 한 경우이 랩 패널은 새 행을 추가합니다.

<ItemsControl> 
    <ItemsControl.ItemsPanel> 
     <ItemsPanelTemplate> 
      <myControls:ColumnLimitedWrapPanel MaxColumns="3" MaxWidth="120"/> 
     </ItemsPanelTemplate> 
    </ItemsControl.ItemsPanel> 
</ItemsControl> 

희망이 있습니다. 나를 위해 코드 작품 아래

Answer 3

:

이

<Grid MouseUp="Grid_MouseUp_2"> 
      <ListBox ScrollViewer.HorizontalScrollBarVisibility="Disabled" BorderBrush="#FFF3800C" Name="icTodoList" Background="#FFF3800C" Height="300" Width="700"> 
       <ListBox.ItemTemplate> 
        <DataTemplate> 
         <Canvas Margin="20,20,20,20" Height="200" Width="200" ClipToBounds="True" Background="#F39437" > 
         <StackPanel Orientation="Vertical"> 
          <Image Source="{Binding ProjectIcon}" Height="60" Width="80" HorizontalAlignment="Center" Margin="-10,10,20,20" /> 
          <TextBlock Text="{Binding ProjectTitle}" Padding="20" Foreground="White" FontSize="26" HorizontalAlignment="Center"/> 
         </StackPanel> 
         </Canvas> 
        </DataTemplate> 
       </ListBox.ItemTemplate> 
       <ListBox.ItemsPanel> 
        <ItemsPanelTemplate> 
         <WrapPanel IsItemsHost="True" Orientation="Horizontal" /> 
        </ItemsPanelTemplate> 
       </ListBox.ItemsPanel> 
      </ListBox> 
     </Grid>