Is there a way to have the GridSplitter not to push elements out of the window?

Question

With the XAML below when I drag the GridSplitter to the left it pushes elements out of the window. How can I keep all elements within the window frame?

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="auto"/>
        <ColumnDefinition Width="auto"/>
    </Grid.ColumnDefinitions>

    <Button Grid.Column="0" Content="0" />
    <Button Grid.Column="1" Content="1" />
    <Button Grid.Column="2" Content="2" />
    <GridSplitter Grid.Column="1" Width="5" HorizontalAlignment="Left" />
</Grid>

Thanks

Stand

Try setting MinWidth for ColumnDefinitions of Grid. – Xenocryst

Thanks for your reply. Tried that, no luck. I also tried * sized columns with no result. When I change window to size to its content then controls remain in window frame but window size changes. Ideally I would like to achieve that the window size is fixed and all other sizes are autosized/proportionally sized. – Stand

Answer 1

The only way I know to solve your problem is have the columns that are left and right of your gridsplitter have the width property set as Width="*" and give the GridSplitter its own column with a HorizontalAlignment set as HorizontalAlignment="Stretch". Your code would then end up looking like this.

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="auto"/>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="auto"/>
    </Grid.ColumnDefinitions>

    <Button Grid.Column="0" Content="0" />
    <GridSplitter Grid.Column="1" Width="5" HorizontalAlignment="Stretch"/>
    <Button Grid.Column="2" Content="1" />
    <Button Grid.Column="3" Content="2" />
</Grid>  

Kilderkin

Answer 2

I was having this same issue, and came up with this solution. Basically, the idea is to dynamically change the MaxWidth of the appropriate column when the grid/columns change. I've shown with two columns here, but I've used this approach with three columns successfully.

With this approach, if you resize the window down to not fit the contents of the grid anymore, the grid stops changing size, so the ResizeGrid_SizeChanged event stops getting called. To solve for this, you can also listen for the window (or user control) size change events. You may also need to bind the MaxWidth of your grid appropriately, or use the control size directly if your grid fills the window/UserControl. I've shown how to bind the MaxWidth property through XAML here. If you didn't want to do that, you could replace "ResizeGrid.MaxWidth" with "ActualWidth" inside the window code behind, and remove the "MaxWidth" binding on the "ResizeGrid" object.

XAML:

<Window x:Class="App.Window1"
        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:Default="clr-namespace:App" 
        mc:Ignorable="d"
        SizeChanged="Window_SizeChanged"
        Title="Window1" Height="300" Width="300">
    <Grid>
        <Grid x:Name="ResizeGrid" SizeChanged="ResizeGrid_SizeChanged" 
              MaxWidth="{Binding ActualWidth, Mode=OneWay, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Default:Window1}}}">

            <Grid.ColumnDefinitions>
                <ColumnDefinition x:Name="C0" Width="150" MinWidth="50" />
                <ColumnDefinition Width="5" />
                <ColumnDefinition x:Name="C2" Width="*" MinWidth="50" />
            </Grid.ColumnDefinitions>

            <Grid Grid.Column="0" Background="Green">
                <Label Content="Left" />
                <Label Content="Right" HorizontalAlignment="Right" />
            </Grid>

            <GridSplitter Grid.Column="1" Width="5" HorizontalAlignment="Stretch" DragCompleted="GridSplitter_DragCompleted" />

            <Grid Grid.Column="2" Background="Red">
                <Label Content="Left" />
                <Label Content="Right" HorizontalAlignment="Right" />
            </Grid>
        </Grid>
    </Grid>
</Window>

C# Code Behind

private void Window_SizeChanged(object sender, SizeChangedEventArgs e)
{
    UpdateGridSplitterWidths();
}

private void ResizeGrid_SizeChanged(object sender, SizeChangedEventArgs e)
{
    UpdateGridSplitterWidths();
}

private void GridSplitter_DragCompleted(object sender, System.Windows.Controls.Primitives.DragCompletedEventArgs e)
{
    UpdateGridSplitterWidths();
}

private void UpdateGridSplitterWidths()
{
    C0.MaxWidth = Math.Min(ResizeGrid.ActualWidth, ResizeGrid.MaxWidth) - (C2.MinWidth + 5);
}

Smedley

Answer 3

Just to add to @Joseph's answer, which pointed me in the right direction, it still works when you fraction the "*", or include min/max widths.

<Grid>
<Grid.ColumnDefinitions>
    <ColumnDefinition Width="0.35*"
                      MinWidth="48" />
    <ColumnDefinition Width="Auto"/>
    <ColumnDefinition Width="*"
                      MaxWidth="48" />
</Grid.ColumnDefinitions>

This lets you set the initial width of each column in keeping with your intent, as well as providing the functionality of not pushing things off screen.

Confiscatory