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

Question

我正在尝试像Windows 8瓷砖一样的东西,并希望显示不同宽度和/或高度的瓷砖.WrapPanel使每列的宽度和高度相等,在较小的项目周围留下空白.是否有一种方式或面板来显示项目,就像StackPanel每个项目可以有各自的尺寸和包裹像WrapPanel？

编辑:这是我的ItemsControl.我取代了瓷砖的DataTemplate用一个简单的Border和TextBlock.宽度为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>

这产生以下结果:

如您所见,每个项目的宽度都很受尊重.

您的问题是由模板中的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将仍然排列).
• 我会限制可以显示的"瓷砖"数量(在当前示例中,如果瓷砖不适合布局,则只是隐藏它们可能不是您想要的).