c# - 如何在 WrapPanel 中将 VerticalContentAlignment 设置为顶部？

Question

我有一个垂直对齐的 WrapPanel。

我的问题是，每当元素溢出时，它都会转到下一列。因此，第一列中的项目变得均匀垂直对齐。

示例：假设 WrapPanel 的高度为 170 像素，WrapPanel 的项目高度为 35 像素。因此它将在第一列中显示前 4 个元素，这些元素将均匀分布。其余项目将转移到下一列，依此类推。在 170px 高度中，我希望这些项目使用它们所需的高度并保留额外的空间。所以在 140px 之后，我应该得到 30px 的空闲空间。

我没有从 WrapPanel 的属性中获得任何方法来做到这一点，因为它具有非常少的属性来支持其项目的布局和样式。

我怎样才能做到这一点？

Answer 1

您可以使用 VariableSizedWrapGrid，就像 Contoso Cookbook Windows 8 示例中的一样。在那里声明一个 MaximumRowsOrColumns，它会将您的项目包装到另一列（或行）上。

    <VariableSizedWrapGrid Orientation="Vertical"
                           MaximumRowsOrColumns="4" />

这是你想要的吗？

Answer 2

这是一个使用 UniformGrid 的示例，它可能接近您想要实现的目标。

XAML

<Grid>
    <ListBox ItemsSource="{Binding GridItemsList}" >
        <ListBox.ItemsPanel>
            <ItemsPanelTemplate>
                <UniformGrid Rows="2" Columns="4" FlowDirection="RightToLeft" />
            </ItemsPanelTemplate>
        </ListBox.ItemsPanel>
        <ListBox.ItemTemplate>
            <DataTemplate>
                <StackPanel>
                    <TextBlock Text="{Binding ItemName}" />
                    <StackPanel.LayoutTransform>
                        <RotateTransform Angle="-90"/>
                    </StackPanel.LayoutTransform>
                </StackPanel>

            </DataTemplate>
        </ListBox.ItemTemplate>
        <ListBox.LayoutTransform>
            <RotateTransform Angle="-90"/>
        </ListBox.LayoutTransform>
    </ListBox>
</Grid>

代码背后

public partial class UniformGridWindow : Window {
    public UniformGridWindow() {

        //Sample Data
        GridItemsList = new List<GridItem> {
            new GridItem("Item 1"),
            new GridItem("Item 2"),
            new GridItem("Item 3"),
            new GridItem("Item 4"),
            new GridItem("Item 5"),
            new GridItem("Item 6"),
            new GridItem("Item 7"),
            new GridItem("Item 8")
        };

        InitializeComponent();
        this.DataContext = this;
    }

    public List<GridItem> GridItemsList { get; set; }

}

public class GridItem {
    public string ItemName { get; set; }
    public GridItem(string itemName) {
        this.ItemName = itemName;
    }
}