Question

I have a 5 column layout. The aim is to have 3 main columns, (left, middle, right) which I could then expand and shrink. To achieve this I added two extra columns which contains the splitters. One between the left and middle column and another between middle and right.

After starting the application and moving the first spliter towards the left the last column (right) suddenly snaps all the way to the left, collapsing all three columns. Any suggestions? Thanks

Here’s the XAML:

<Window x:Class="ThreeColumns.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="725">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"></ColumnDefinition>
            <ColumnDefinition Width="auto"></ColumnDefinition>
            <ColumnDefinition Width="*"></ColumnDefinition>
            <ColumnDefinition Width="auto"></ColumnDefinition>
            <ColumnDefinition Width="*"></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition></RowDefinition>
        </Grid.RowDefinitions>
        <Border BorderBrush="Red" BorderThickness="5" Grid.Column="0" Grid.Row="0" CornerRadius="10">
            <TextBlock Text="Left side" FontSize="24"></TextBlock>
        </Border>
        <GridSplitter Background="blue" Width="5" 
                      HorizontalAlignment="Stretch"
                      VerticalAlignment="Stretch" Grid.Column="1"></GridSplitter>
        <Border BorderBrush="Red" BorderThickness="5" Grid.Column="2" Grid.Row="0" CornerRadius="10">
            <TextBlock Text="Middle" FontSize="24"></TextBlock>
        </Border>
        <GridSplitter Background="blue" Width="5" 
                      HorizontalAlignment="Stretch"
                      VerticalAlignment="Stretch" Grid.Column="3"></GridSplitter>
        <Border BorderBrush="Red" BorderThickness="5" Grid.Column="4" Grid.Row="0" CornerRadius="10">
            <TextBlock Text="Right side" FontSize="24"></TextBlock>
        </Border>
    </Grid>
</Window>

I managed to solve it by setting the first and last columns width to “auto” and the middle content column to “*”:

<Window x:Class="ThreeColumns.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="725">
    <DockPanel>
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition MinWidth="50"  Width="auto" Name="Col1"></ColumnDefinition>
                <ColumnDefinition Width="7" Name="Col2"></ColumnDefinition>
                <ColumnDefinition Name="Col3" Width="*"></ColumnDefinition>
                <ColumnDefinition Width="7" Name="Col4"></ColumnDefinition>
                <ColumnDefinition MinWidth="50" Width="auto"></ColumnDefinition>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition></RowDefinition>
            </Grid.RowDefinitions>
            <Border BorderBrush="Red" BorderThickness="5" Grid.Column="0" Grid.Row="0" CornerRadius="10" Margin="2 2 2 2">
                <TextBlock Text="Left side" Width="250" FontSize="24"></TextBlock>
            </Border>

            <Border BorderBrush="Red" BorderThickness="5" Grid.Column="2" Grid.Row="0" CornerRadius="10" Margin="2 2 2 2">
                <TextBlock Text="Middle" FontSize="24"></TextBlock>
            </Border>
            <Border BorderBrush="Red" BorderThickness="5" Grid.Column="4" Grid.Row="0" CornerRadius="10" Margin="2 2 2 2">
                <TextBlock Text="Right side" Width="250" FontSize="24"></TextBlock>
            </Border>
            <GridSplitter Background="blue" Width="5" 
                      HorizontalAlignment="Center" ResizeDirection="Columns"
                      VerticalAlignment="Stretch" Grid.Column="1" Grid.ZIndex="1"/>
            <GridSplitter Background="blue" Width="5" 
                      HorizontalAlignment="Center" ResizeDirection="Columns"
                      VerticalAlignment="Stretch" Grid.Column="3" Grid.ZIndex="1"/>
        </Grid>
    </DockPanel>
</Window>

Answer 1

Your code works for me.
But I find it cleaner to use fixed width for the splitter and center it.
It the splitter is against the next column sometimes it seems to wack out.

Often need to use Auto for all but one.
If you try something like 2* 3* for relative sizing things often go bad.
If you want even sizing to start sometimes multiple single * will work.

    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto></ColumnDefinition>
            <ColumnDefinition Width="7"></ColumnDefinition>
            <ColumnDefinition Width="*"></ColumnDefinition>
            <ColumnDefinition Width="7"></ColumnDefinition>
            <ColumnDefinition Width="Auto"></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition></RowDefinition>
        </Grid.RowDefinitions>
        <Border BorderBrush="Red" BorderThickness="5" Grid.Column="0" Grid.Row="0" CornerRadius="10">
            <TextBlock Text="Left side" FontSize="24"></TextBlock>
        </Border>
        <GridSplitter Background="blue" Width="3" 
                      HorizontalAlignment="Center"
                      VerticalAlignment="Stretch" Grid.Column="1"></GridSplitter>
        <Border BorderBrush="Red" BorderThickness="5" Grid.Column="2" Grid.Row="0" CornerRadius="10">
            <TextBlock Text="Middle" FontSize="24"></TextBlock>
        </Border>
        <GridSplitter Background="blue" Width="3" 
                      HorizontalAlignment="Center"
                      VerticalAlignment="Stretch" Grid.Column="3"></GridSplitter>
        <Border BorderBrush="Red" BorderThickness="5" Grid.Column="4" Grid.Row="0" CornerRadius="10">
            <TextBlock Text="Right side" FontSize="24"></TextBlock>
        </Border>
    </Grid>