Search code examples
c#.netwpfsplitter

C# - How to create a WPF interface with independent splitters on the same column and/or row?

I'm completely novice with the Visual Studio 2019 WPF interfaces, but I need to create a demo project for my job, in order to determine if we will migrate to a such technology in the future.

To determine that, I decided to mimic the main interface of one of our existing application, created with the Embarcadero RAD Studio compilers. This application is mainly divided into 4 distinct parts, as follow:

Demo interface

Now I want to add splitters between each part, in a such manner they may be resized, the ones independently of others. For example, I want the top splitter to resize the left top and right top panels, but without resizing the left bottom and right bottom ones.

To create the above interface I wrote the following xaml content:

<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>

However, when I move e.g the top splitter, the bottom splitter moves together, and the bottom part is resized. How can I modify my code to get the behavior I want?

Solution

  • You could do this by having a grid inside a grid. So your first grid only consists of three rows. The first would contain a grid with three columns for your two textblocks and a gridsplitter. The second row would be the splitter to resize your two rows. The third would contain another grid with the same setup as for your first row.

    It would look like this:

    <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