WPF - Columns don't hide properly when GridSplitter is moved WPF - Columns don't hide properly when GridSplitter is moved wpf wpf

WPF - Columns don't hide properly when GridSplitter is moved


The problem is simple, you set GridSplitter ResizeBehavior="PreviousAndCurrent", but previous grid column width is * and as soon as you move splitter its width units will be changed to absolute (so it will not be able to resize when 3d column width is changed).

Simply set GridSplitter ResizeBehavior="PreviousAndNext" to solve the problem. If you do so the splitter will modify width of 3d column, but shouldn't touch first one anymore.

Btw, instead of using button and click event you can utilize ToggleButton (which IsChecked is bound to Visibility of container with content you want to hide), see this answer. Using converters with pure xaml view is better MVVM than the one with some code behind and x:Name.


Right, you have few layout problems, here is a complete solution:

<Window.Resources>    <BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter" /></Window.Resources><Grid>    <Grid.ColumnDefinitions>        <ColumnDefinition />        <ColumnDefinition Width="Auto" />    </Grid.ColumnDefinitions>    <Border Background="Green" />    <ToggleButton x:Name="toggleButton"                  Width="30"                  Height="30"                  Margin="0,10,10,0"                  HorizontalAlignment="Right"                  VerticalAlignment="Top" />    <Grid Grid.Column="1"          Visibility="{Binding IsChecked, ElementName=toggleButton, Converter={StaticResource BooleanToVisibilityConverter}}">        <Grid.ColumnDefinitions>            <ColumnDefinition />            <ColumnDefinition Width="300"                              MinWidth="300"                              MaxWidth="600" />        </Grid.ColumnDefinitions>        <GridSplitter Width="5"                      ResizeBehavior="CurrentAndNext" />        <WrapPanel Grid.Column="1"                   Background="Aqua" />    </Grid></Grid>

No need for code-behind, get converter from here.

Point are: 1) put splitter inside hide-able container 2) setup grid columns to have * and fixed width (splitter doesn't work well with auto columns).

Demo: