当宽度超过可用空间时，WPF 将中间控件移动到下一行

Question

我目前在我的窗口顶部有 3 个用户控件，我想根据可用空间对它们进行相应的排列。我想要的是在有可用空间时水平对齐 3 个控件，但我希望在调整窗口大小时中心控件向下移动到新的行/行。左右控件应始终水平对齐。所有 3 个控件都是固定宽度。下面的例子。

^{3 个控件对齐的宽窗口。}

^{小窗口 - 中间的 UserControl 移到下方。}

我尝试过使用WrapPanel 和DockPanel，但我认为这两个都不是我想要的。我想我想要的是介于两者之间的某个地方。

是否有使用任何标准 WPF 控件执行此操作的好方法，或者是扩展 Panel 并自己实现此逻辑的最佳解决方案？

Answer 1

这称为自适应布局，WPF 没有内置控件来支持这种布局。 尽管使用触发器可能会得到一些令人愉快的结果。请看： How can I create an adaptive layout in WPF?

Answer 2

我尝试实现您想要的相同功能。这是我的代码的结果：

XAML：

<Window x:Class="Test.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800"
        TextOptions.TextFormattingMode="Display">
    <Grid x:Name="Grid" Margin="20" VerticalAlignment="Top" SizeChanged="Grid_SizeChanged">
        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="auto"/>
            <ColumnDefinition/>
            <ColumnDefinition Width="auto"/>
        </Grid.ColumnDefinitions>
        <Button Width="160" Height="40" VerticalAlignment="Top" Content="Left UserControl"/>
        <Button x:Name="MiddleUserControl" Grid.ColumnSpan="3" Width="300" Height="60" Content="Middle UserControl"/>
        <Button Grid.Column="2" Width="160" Height="40" VerticalAlignment="Top" Content="Right UserControl"/>
    </Grid>
</Window>

C#：

using System.Windows;
using System.Windows.Controls;

namespace Test
{
    /// <summary>
    /// Логика взаимодействия для MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        private void Grid_SizeChanged(object sender, SizeChangedEventArgs e)
        {
            if (Grid.ColumnDefinitions[1].ActualWidth < MiddleUserControl.ActualWidth + 40)
            {
                Grid.SetRow(MiddleUserControl, 1);
                MiddleUserControl.Margin = new Thickness(0, 20, 0, 0);
            }
            else
            {
                Grid.SetRow(MiddleUserControl, 0);
                MiddleUserControl.Margin = new Thickness(0);
            }
        }
    }
}