有没有办法在wpf wrappanel中显示不同宽度的项目

Question

我正在尝试类似windows 8瓷砖的东西，并希望显示不同宽度和/或高度的瓷砖。 WrapPanel使每列的宽度和高度相等，在较小的项目周围留下空白。是否有一种方式或面板可以像StackPanel一样显示项目，其中每个项目可以具有单独的尺寸并像WrapPanel那样换行？

编辑： 这是我的ItemsControl。我用简单的Border和TextBlock替换了Tile DataTemplate。宽度为auto，Tiles看起来很好，除了WrapPanel创建相同大小的单元格。

            <ItemsControl ItemsSource="{Binding Path=Contents}" HorizontalContentAlignment="Left">
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <WrapPanel Orientation="Vertical" />
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <Border Background="#B1DBFC" Height="200px" BorderBrush="#404648" Margin="5">
                        <TextBlock VerticalAlignment="Center" Text="{Binding Path=Name}" />
                    </Border>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>

您可以从图像中看到每列的width是最宽项目的宽度。

如果我在边框上明确设置宽度，事情会变得更加难看。

Answer 1

您正在寻找的行为是WrapPanel的默认行为，如以下示例所示。

<WrapPanel >
    <WrapPanel.Resources>  
        <Style TargetType="{x:Type Rectangle}">
            <Setter Property="Width"
                    Value="80" />
            <Setter Property="Height"
                    Value="80" />
            <Setter Property="Margin"
                    Value="3" />
            <Setter Property="Fill"
                    Value="#4DB4DD" />
        </Style>
    </WrapPanel.Resources>

    <Rectangle Width="150" />
    <Rectangle />
    <Rectangle />
    <Rectangle />
    <Rectangle Width="200"/>
    <Rectangle />
    <Rectangle />
    <Rectangle />
    <Rectangle  Width="220"/>
    <Rectangle />
    <Rectangle />

</WrapPanel>

产生以下结果：

如您所见，每件商品的宽度均得到尊重。

您的问题是由您在模板中设置WrapPanel到Vertical的方向造成的。这是从上到下而不是从左到右布置项目，这意味着它是您需要设置的Height属性（或者您可以恢复为水平布局，如我的示例中所示） ）。

将您的输出与我的屏幕截图进行比较，其中面板设置为水平方向;每个行是最高Rectangle的大小。不相信我？尝试将其中一个Rectangle's Height属性设置为更大的值，您会发现行大小会增加，而Rectangles也不会垂直排列。

阅读您的评论我认为最好的入门方式是执行以下操作：

• 让WrapPanel横向列出其内容。
• 项目应具有统一Height。
• 将Height的{​​{1}}限制在一定的大小，以便您不会获得垂直滚动条。

WrapPanel的高度应使用以下公式计算：

  

（（项目高度+上边距+下边距）x行数））

每个项目的宽度也需要一点点思考，以便面板像横向接口一样水平放置物品（排成一行而不是交错排列）。

有两种瓷砖尺寸;小的是80px宽，大的是166px宽。 大瓷砖的宽度如下：

  

（项目宽度* 2）+（左边距+右边距）

这可确保瓷砖正确排列。

所以现在我的XAML看起来像这样：

WrapPanel

产生以下结果：

这应该为您提供足够的信息以开始将其重新计算为完全控制。如果您这样做，请记住以下几点：

• 应该计算布局属性（小项目大小，大项目大小，间隙等）而不是硬编码，这样如果你想改变边距，布局仍然可以正常工作（IE将是瓷砖将仍然排队）。
• 我会限制可以显示的“图块”的数量（在当前示例中，如果图块不适合布局，则只是隐藏它们可能不是您想要的那样）。