С# — Как создать интерфейс WPF с независимыми разделителями в одном столбце и/или строке?

Я совсем новичок в работе с интерфейсами WPF Visual Studio 2019, но мне нужно создать демонстрационный проект для моей работы, чтобы определить, будем ли мы переходить на такую ​​технологию в будущем.

Чтобы определить это, я решил сымитировать основной интерфейс одного из наших существующих приложений, созданных с помощью компиляторов Embarcadero RAD Studio. Это приложение в основном разделено на 4 отдельные части, а именно:

Демонстрационный интерфейс

Теперь я хочу добавить разделители между каждой частью, чтобы они могли изменять размер, одни независимо от других. Например, я хочу, чтобы верхний разделитель изменял размеры левой верхней и правой верхней панелей, но не изменял размеры левой нижней и правой нижней панелей.

Чтобы создать вышеупомянутый интерфейс, я написал следующее содержимое xaml:

<Window x:Class="WPFApp.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="clr-namespace:WPFApp"
    mc:Ignorable="d"
    Title="MainWindow" Height="450" Width="800">
    <Grid Margin="2">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="100*"/>
            <ColumnDefinition Width="5"/>
            <ColumnDefinition Width="295*"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="30*"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="53*"/>
        </Grid.RowDefinitions>
        <TextBlock FontSize="55" HorizontalAlignment="Center" VerticalAlignment="Center" TextWrapping="Wrap">Left Top</TextBlock>
        <TextBlock FontSize="55" HorizontalAlignment="Center" VerticalAlignment="Center" TextWrapping="Wrap" Grid.Row="2">Left Bottom</TextBlock>
        <TextBlock FontSize="55" HorizontalAlignment="Center" VerticalAlignment="Center" TextWrapping="Wrap" Grid.Column="2">Right Top</TextBlock>
        <TextBlock FontSize="55" HorizontalAlignment="Center" VerticalAlignment="Center" TextWrapping="Wrap" Grid.Column="2" Grid.Row="2">Right Bottom</TextBlock>
        <GridSplitter x:Name="MainHorzSplitterTop" HorizontalAlignment="Stretch" Width="5" Grid.Column="1"/>
        <GridSplitter x:Name="MainHorzSplitterBottom" HorizontalAlignment="Stretch" Width="5" Grid.Column="1" Grid.Row="2"/>
        <GridSplitter x:Name="MainVertSplitterLeft" HorizontalAlignment="Stretch" Height="5" Grid.Row="1"/>
        <GridSplitter x:Name="MainVertSplitterRight" HorizontalAlignment="Stretch" Height="5" Grid.Row="1" Grid.Column="2"/>
    </Grid>
</Window>

Однако, когда я перемещаю, например, верхний разделитель, нижний разделитель перемещается вместе, а нижняя часть изменяется. Как я могу изменить свой код, чтобы получить желаемое поведение?


.net c# wpf splitter
person Jean-Milost Reymond    schedule 04.07.2019    source источник
comment
Отдельные сетки внутри основной сетки, причем верхняя и нижняя части представляют собой отдельные сетки с вертикальным разделителем.   -  person Nkosi    schedule 04.07.2019
comment
Вы не указали, хотите ли вы также иметь возможность независимо перемещать каждую половину горизонтального разделителя, чтобы изменить размер только слева вверху + слева внизу ИЛИ справа вверху + справа внизу. Если вы хотите сделать это, я не думаю, что это возможно с чистым xaml - вам, вероятно, действительно нужно создать дополнительные разделители для представления командной части в середине и выполнить некоторую магию кода программной части, чтобы гарантировать, что сегменты изменены/скрыты как другие сплиттеры перемещаются.   -  person NeilMacMullen    schedule 04.07.2019

Ответы (1)


arrow_upward
2
arrow_downward

Вы можете сделать это, имея сетку внутри сетки. Итак, ваша первая сетка состоит только из трех строк. Первый будет содержать сетку с тремя столбцами для ваших двух текстовых блоков и разделитель сетки. Вторая строка будет разделителем для изменения размера двух строк. Третий будет содержать другую сетку с той же настройкой, что и для вашего первого ряда.

Это будет выглядеть так:

<Window x:Class="Splitted.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="clr-namespace:SplitterProject"
    mc:Ignorable="d"
    Title="MainWindow" Height="350" Width="525">
<Grid Margin="2">
    <Grid.RowDefinitions>
        <RowDefinition Height="30*"/>
        <RowDefinition Height="*"/>
        <RowDefinition Height="53*"/>
    </Grid.RowDefinitions>
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="100*"/>
            <ColumnDefinition Width="5"/>
            <ColumnDefinition Width="295*"/>
        </Grid.ColumnDefinitions>
        <TextBlock>Top left</TextBlock>
        <GridSplitter VerticalAlignment="Stretch" Width="5" Grid.Column="1"/>
        <TextBlock Grid.Column="2">Top right</TextBlock>
    </Grid>
    <GridSplitter HorizontalAlignment="Stretch" Height="5" Grid.Row="1"/>
    <Grid Grid.Row="2">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="100*"/>
            <ColumnDefinition Width="5"/>
            <ColumnDefinition Width="295*"/>
        </Grid.ColumnDefinitions>
        <TextBlock>Bottom left</TextBlock>
        <GridSplitter VerticalAlignment="Stretch" Width="5" Grid.Column="1"/>
        <TextBlock Grid.Column="2">Bottom right</TextBlock>
    </Grid>
</Grid>

You can then resize the top and bottom row independently: enter image description here

person Vhitewidow    schedule 04.07.2019