Question

我目前在窗口顶部有3个UserControl，我想根据可用的房地产来相应地安排它们。我想要的是在有可用空间的情况下使3个控件水平对齐，但是当窗口调整大小时，我希望中心控件向下移动到新的行/行。左右控件应始终水平对齐。所有3个控件均为固定宽度。下面的示例。

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

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

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

是否可以通过任何标准WPF控件来做到这一点，或者是扩展Panel并自己实现此逻辑的最佳解决方案？

Answer 1

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

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);
            }
        }
    }
}

Answer 2

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

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

2 个答案: