需要在一行中显示多条记录答案

【问题标题】：Need to display mulitple records in a single row需要在一行中显示多条记录
【发布时间】：2014-04-21 09:52:26
【问题描述】：

在我的 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]

【问题讨论】：

你试过WrapPanel吗？那里有很多exapmles。如果您需要绑定，您可以使用ListView 并将ItemsPanel 设置为WrapPanel。
我没试过换行面板你有没有代码示例@icebat
试过这个不起作用仍然显示行中的记录::::::-->

标签： wpf wpf-controls wpfdatagrid

【解决方案1】：

如果您将WrapPanel 指定为ItemsPanel，它应该可以工作，如下所示：

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

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

</ItemsControl>

【讨论】：

【解决方案2】：

换行面板不允许您限制一行中的项目数量，但您可以使用自定义控件来执行此操作。下面是我创建的自定义控件，它允许您设置“MaxColumns”属性，该属性实际上是每行的最大项目数。如果超过 MaxWidth 或 MaxColumns，此换行面板将添加新行

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);
    }
}

然后将其绑定到 itemsSource 使用 fmunkert 建议的模板面板。

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

希望这会有所帮助！

【讨论】：

【解决方案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>

【讨论】：