11

我正在尝试类似 Windows 8 的瓷砖，并希望显示不同宽度和/或高度的瓷砖。WrapPanel使每列的宽度和高度相等，在较小的项目周围留下空白。有没有一种方法或面板可以像 a 一样显示项目，StackPanel其中每个项目都可以具有单独的尺寸并像 a 一样包装WrapPanel？

编辑：这是我的ItemsControl. Border我用一个简单的and替换了 Tile DataTemplate TextBlock。除了创建大小相等的单元格外，宽度auto和瓷砖看起来都很好。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，每列的 是最宽项的宽度。

如果我在边框上明确设置宽度，事情会变得更丑陋。 设置宽度的项目

4

1 回答 1

10

您正在寻找的行为是从以下示例中可以看出的默认行为。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>

这会产生以下结果：

在此处输入图像描述

正如你所看到的，每个项目的宽度都是很荣幸的。

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

将您的输出与我的屏幕截图进行比较，其中面板设置为水平方向；每一行的大小都是最高的Rectangle。不相信我？尝试将Rectangle's Height属性之一设置为更大的值，您会观察到行大小将增加并且Rectangles不再垂直排列。

阅读您的评论，我认为最好的开始方法是执行以下操作：

  • 有一个WrapPanel水平布局其内容的。
  • 物品应统一Height。
  • Height将的约束WrapPanel到一定大小，以免出现垂直滚动条。

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

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

每个项目的宽度也需要考虑一下，以便面板像地铁界面一样水平放置项目（排列而不是交错）。

有两种瓷砖尺寸；小的为 80px 宽，大的为 166px 宽。大瓷砖的宽度是这样计算的：

(项目宽度 * 2) + (左边距 + 右边距)

这可以确保瓷砖正确排列。

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

<ScrollViewer HorizontalScrollBarVisibility="Auto"
              VerticalScrollBarVisibility="Disabled">
    <StackPanel Orientation="Horizontal"
                Margin="10,0">
        <StackPanel.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>
            <Style TargetType="{x:Type WrapPanel}">
                <Setter Property="Margin"
                        Value="0,0,25,0" />
                <Setter Property="MaxWidth"
                        Value="516" />
            </Style>
        </StackPanel.Resources>
        <WrapPanel Height="258">
            <Rectangle Width="166" />
            <Rectangle />
            <Rectangle Width="166" />
            <Rectangle />
            <Rectangle Width="166" />
            <Rectangle />
            <Rectangle />
            <Rectangle />
            <Rectangle />
            <Rectangle Width="166" />
            <Rectangle />
        </WrapPanel>
        <WrapPanel Height="258">
            <Rectangle />
            <Rectangle Width="166" />
            <Rectangle />
            <Rectangle />
            <Rectangle />
            <Rectangle />
            <Rectangle />
            <Rectangle Width="166" />
            <Rectangle />
        </WrapPanel>
    </StackPanel>
</ScrollViewer>

这会产生以下结果：

在此处输入图像描述

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

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