WPF перемещает средний элемент управления в следующую строку, когда ширина превышает доступное пространство

Question

В настоящее время у меня есть 3 пользовательских элемента управления в верхней части моего окна, и я хочу расположить их соответствующим образом в зависимости от доступной недвижимости.Я хочу, чтобы 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 нет встроенных элементов управления для поддержки такого типа макетов.Хотя вы можете получить некоторые приятные результаты, используя триггеры.Пожалуйста, посмотрите: Как создать адаптивный макет в WPF?