在环绕面板中水平对齐子元素

Question

我的窗口中有以下 XAML：

<WrapPanel>
    <WrapPanel.Resources>
        <Style TargetType="Rectangle">
            <Setter Property="Margin" Value="10,10,10,10"/>
            <Setter Property="VerticalAlignment" Value="Top"/>
        </Style>
    </WrapPanel.Resources>
    <Rectangle Height="100" Width="100" Fill="Red"/>
    <Rectangle Height="200" Width="200" Fill="Yellow"/>
    <Rectangle Height="150" Width="150" Fill="Green"/>
    <Rectangle Height="50" Width="50" Fill="Blue"/>
    <Rectangle Height="250" Width="250" Fill="Purple"/>
</WrapPanel>

在设计器中生成以下 UI：

我正在寻找的是一种在换行面板中“水平对齐”子元素的方法，以便窗口看起来像这样：

有什么方法可以在包装面板中实现这一点，还是我需要考虑使用其他控件或编写自定义控件？

这张图片还说明了我想要实现的目标：

Answer 1

使用几种不同的技术，您或许能够到达您想去的地方。这个SO answer 展示了如何定义响应式列宽：

<Grid.ColumnDefinitions>
    <ColumnDefinition Width="3*"/>
    <ColumnDefinition Width="2*"/>
    <ColumnDefinition Width="3*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
    <RowDefinition Height="3*"/>
    <RowDefinition Height="2*"/>
    <RowDefinition Height="3*"/>
</Grid.RowDefinitions>

如果这还不够，您可以继续使用自定义控件，该控件使用网格布局并重新定位每个子控件当前所在的列/行，并在控件或窗口调整大小事件中重做基于列/像素计算的布局定位。

更新：

对于自定义控件，您可以尝试类似这样的操作：

公共类 CustomLayout : 控制 { 私有列表子项；

  public CustomLayout()
  {
      children = new List<Control>();      
  }

  public void AddChild(Control childToAdd)
  {
      children.Add(childToAdd);
      // TODO: Determine if new layout is needed.
  }

  public void RemoveChild(Control childToRemove)
  {
      children.Remove(childToRemove);
      // TODO: Determine if new layout is needed.
  }

  // Call to update the layout.
  private void PerformLayout(int columns, int rows)
  {
     Grid layoutGrid = new Grid();
     // TODO: Programmatically build grid layout.
     RowDefinition row = new RowDefinition();
     row.Height = 100;
     layoutGrid.Rows.Add(row);

     // Methods for layout:
     // Grid.SetRow(rowID, childControl);
     // Grid.SetColumn(columnID, childControl);


     // Note: This may produce some flashing on resize, so there may be better ways to remove/add the grid such as redoing rows and columns instead.
     Controls.Clear();
     Controls.Add(layoutGrid);
  }

  // Should be called when the window or parent resizes. I can't remember the events in question.
  public void OnResize()
  {
     int columns;
     int rows;
     // TODO: Calculate columns/rows
     PerformLayout(columns, rows);
  }

}

希望这能让你朝着正确的方向前进。请记住，这是伪代码，可能无法完全编译。

Answer 2

看起来你想要的是一个包含行和列的 Grid。

<Grid>
    <Grid.Resources>
        <Style TargetType="Rectangle">
            <Setter Property="Margin" Value="10,10,10,10"/>
            <Setter Property="VerticalAlignment" Value="Top"/>
            <Setter Property="HorizontalAlignment" Value="Left"/>
        </Style>
    </Grid.Resources>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="Auto"/>
    </Grid.ColumnDefinitions>
    <Rectangle Height="100" Width="100" Fill="Red" Grid.Column="0"/>
    <Rectangle Height="200" Width="200" Fill="Yellow" Grid.Column="1"/>
    <Rectangle Height="150" Width="150" Fill="Green"  Grid.Column="2"/>
    <Rectangle Height="50" Width="50" Fill="Blue"  Grid.Column="3"/>
    <Rectangle Height="250" Width="250" Fill="Purple" Grid.Row="1"/>
</Grid>

这实现了第二张图片的精确布局，但不会随着窗口大小的变化而换行。为此，您可能需要一个自定义 Grid 控件，该控件在调整容器大小时动态排列子项。