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

如果您将WrapPanel指定为ItemsPanel，它应该有效，如下所示：

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

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

</ItemsControl>

Answer 2

包装面板不允许您限制连续项目的数量，但您可以使用自定义控件执行此操作。下面是我创建的自定义控件，允许您设置＆＃34; MaxColumns＆＃34;属性，它是每行的最大项目数。如果超出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>

希望这有帮助！

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>

需要在一行中显示多个记录

3 个答案: