當寬度超過可用空間時，WPF將中間控件移至下一行

Question

我目前在窗口頂部有3個UserControl，我想根據可用的房地產來相應地安排它們。 我想要的是在有可用空間的情況下使3個控件水平對齊，但是當窗口調整大小時，我希望中心控件向下移動到新的行/行。 左右控件應始終水平對齊。 所有3個控件均為固定寬度。 下面的例子。

我試過使用WrapPanel和DockPanel但我不認為這兩個都是我想要的。 我想我想要的是介於兩者之間的某個地方。

是否可以通過任何標准的WPF控件來執行此操作，或者是擴展Panel並自己實現此邏輯的最佳解決方案？

Answer 1

這稱為自適應布局，WPF沒有內置的控件來支持這種布局。 盡管使用觸發器可能會得到一些令人愉快的結果。 請查看： 如何在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);
            }
        }
    }
}