wpf gridsplitter issues -- both sides shrink

Question

Gridsplitter trouble:

I have a: grid with 4 columns

• Column 0 contains a grid with 3 columns
• Column 1 contains a gridsplitter
• Column 2 contains a stackpanel of width 20 pixels
• Column 3 contains a grid with 3 columns

When the gridsplitter is moved to either the left or right, BOTH panels shrink the same amount -- one should shrink and the other should grow.

I am hesitant to include the xaml, but you are going to ask for it, so here is an abridged version. I have only removed a few unrelated controls, and gutted the treeviews and listviews. If you really need the whole thing, then of course I can supply it.

Thanks for any help!

<Window x:Class="Calvin.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"
        Title="Calvin" >
    <DockPanel Height="Auto" Width="Auto" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" LastChildFill="True" >
        <Grid DockPanel.Dock="Top" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" RenderTransformOrigin="0.5,0.497" >
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="1*" />
                <ColumnDefinition Width="5"  />
                <ColumnDefinition Width="20"  />
                <ColumnDefinition Width="1*" />
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>
            <Grid Grid.Column="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" >
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="1*" />
                    <ColumnDefinition Width="5" />
                    <ColumnDefinition Width="2*" />
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                </Grid.RowDefinitions>
                <TextBox Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="3"  TextWrapping="NoWrap" Text="Field One"  HorizontalAlignment="Stretch"/>
                <TextBox Grid.Row="0" Grid.Column="4" Grid.ColumnSpan="3"  TextWrapping="NoWrap" Text="Field Two"  HorizontalAlignment="Stretch" />
                <TreeView DockPanel.Dock="Left" Grid.Column="0" Grid.Row="1" Name="PaneOneTree" 
                          Width="Auto"  HorizontalAlignment="Stretch" VerticalAlignment="Stretch" >
                </TreeView>
                <GridSplitter Grid.Column="1" Grid.Row="1" Width="5" HorizontalAlignment="Center"/>
                <ScrollViewer Grid.Column="2" Grid.Row="1" >
                    <ListView DockPanel.Dock="Left" Name="FileDetailsLeft" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Width="Auto" >
                        <ListView.View>
                            <GridView>
                                <GridViewColumn Header="Name" Width="120"  />
                                <GridViewColumn Header="Size" Width="120"  />
                                <GridViewColumn Header="Access Time" Width="120"  />
                                <GridViewColumn Header="Extension" Width="120"  />
                            </GridView>
                        </ListView.View>
                    </ListView>
                </ScrollViewer>
            </Grid>
            <GridSplitter Grid.Column="1" Grid.Row="0" Width="5" HorizontalAlignment="Left" />
            <StackPanel Grid.Column="2" Grid.Row="1" VerticalAlignment="Stretch" HorizontalAlignment="Center" Width="Auto" Background="Red">
                <Button  >Move</Button>
                <Button >Other</Button>
            </StackPanel>
            <Grid Grid.Column="3" Grid.Row="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" >
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="auto" />
                    <ColumnDefinition Width="5" />
                    <ColumnDefinition Width="auto" />
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                </Grid.RowDefinitions>
                <TextBox Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="3"  TextWrapping="NoWrap" Background="Cornsilk"
                         Text="Pane Two Text"  HorizontalAlignment="Stretch"/>
                <TextBox Grid.Row="0" Grid.Column="4" Grid.ColumnSpan="3"  TextWrapping="NoWrap"
                         Text="Pane Two Text"  HorizontalAlignment="Stretch" Background="Linen" />
                <TreeView DockPanel.Dock="Left" Grid.Column="0" Grid.Row="1" Name="PaneTwoTree" Width="Auto"  HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
                          Background="SeaShell" >
                </TreeView>
                <GridSplitter Grid.Column="1" Grid.Row="1" Width="5" HorizontalAlignment="Center" />
                <ScrollViewer Grid.Column="2" Grid.Row="1" >
                    <ListView DockPanel.Dock="Left" Name="FileDetailsRight" 
                              HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Width="Auto" Background="Moccasin" >
                        <ListView.View>
                            <GridView>
                                <GridViewColumn Header="Name" Width="120"  />
                                <GridViewColumn Header="Size" Width="120"  />
                                <GridViewColumn Header="Access Time" Width="120"  />
                                <GridViewColumn Header="Extension" Width="120"  />
                            </GridView>
                        </ListView.View>
                        <ListViewItem >List Item</ListViewItem>
                        <ListViewItem >List Item</ListViewItem>
                        <ListViewItem >List Item</ListViewItem>
                        <ListViewItem >List Item</ListViewItem>
                        <ListViewItem >List Item</ListViewItem>
                        <ListViewItem >List Item</ListViewItem>
                        <ListViewItem >List Item</ListViewItem>
                    </ListView>
                </ScrollViewer>
            </Grid>
        </Grid>
    </DockPanel>
</Window>

And, of course, feel free to suggest better ways to do anything:) -- I'm still learning.

:bp:

Answer 1

Ok, I see your problem now... basically, you can't set an exact Width on a column who's Width will be changed by a GridSplitter control. Instead, you can only set MinWidth and/or MaxWidth property on the ColumnDefinition, but be aware that you can then not use the "*" notation. Also, looking at the code example below, you can see that you could have stripped out a whole load more code for your question example... this was all that was required to demonstrate your problem (before I fixed it):

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto" MinWidth="150" />
        <ColumnDefinition Width="5" />
        <ColumnDefinition Width="20" />
        <ColumnDefinition Width="*" MinWidth="150" />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>
    <Rectangle Grid.Column="0" Fill="PowderBlue" />
    <GridSplitter Grid.Column="1" Background="Black" HorizontalAlignment="Stretch" />
    <Rectangle Grid.Column="2" Fill="Red" Height="100" />
    <Rectangle Grid.Column="3" Fill="Purple" />
</Grid>

Answer 2

I had the same issue. When I moved one GridSplitter it would also move the other (Usually in the opposite direction.). I eventually discovered that I had forgotten to set a property of the GridSplitter. For a GridSplitter you MUST have both vertical and horizontal properties set ie...

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition/>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition/>
    </Grid.ColumnDefinitions>
    <GridSplitter Grid.Column="1" Width="2" 
        VerticalAlignment="Stretch" HorizontalAlignment="Center"/>
</Grid>