Resizable and collabsable gridColumn with gridSplitter

Question

I'd Like to have a Sidebar which can be hidden by pressing a ToggleButton and re-sized by the user via Mouse using a GridSplitter Control. In the end I'd like it to look like this:

(Please look at Picture 1 )

And:

(Please look at Picture 2 )

This is what i have so far:

<Grid>
<Grid.ColumnDefinitions>
    <ColumnDefinition Width="*" />
    <ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<GridSplitter Grid.Column="1" HorizontalAlignment="Left" Width="4"
 BorderThickness="1,0" Foreground="{x:Null}" Background="#01000000" BorderBrush="{DynamicResource ColorControlBorder}"/>
<Grid x:Name="grid" Grid.Column="1" Margin="4,0,0,0" Background="{DynamicResource IconErrorFilter}" RenderTransformOrigin="0.5,0.5">
    <Grid.RenderTransform>
        <TransformGroup>
            <ScaleTransform/>
            <SkewTransform/>
            <RotateTransform/>
            <TranslateTransform/>
        </TransformGroup>
    </Grid.RenderTransform>
    <Expander x:Name="expander2" Style="{DynamicResource AddExpanderStyle}" 
        ExpandDirection="Up" Background="#D8FFFFFF" BorderBrush="{DynamicResource ColorControlBorder}"
        DataContext="{Binding FilterTypesPMod}" d:LayoutOverrides="Height" VerticalAlignment="Bottom">
        <Expander.Resources>
            <CollectionViewSource x:Key="CollectionFilterTypes" Source="{Binding FilterTypes}">
                <CollectionViewSource.SortDescriptions>
                    <ComponentModel:SortDescription PropertyName="Order" Direction="Ascending" />
                </CollectionViewSource.SortDescriptions>
            </CollectionViewSource>
        </Expander.Resources>
        <Grid>
            <ItemsControl BorderThickness="0" Background="Transparent" BorderBrush="Transparent"
                ItemsSource="{Binding Source={StaticResource CollectionFilterTypes}}">
                <ItemsControl.ItemTemplate>
                    <DataTemplate>
                        <Bla... />
                    </DataTemplate>
                </ItemsControl.ItemTemplate>
            </ItemsControl>
        </Grid>
    </Expander>
</Grid>
<ToggleButton x:Name="toggleButton" Grid.Column="1" HorizontalAlignment="Left" Style="{DynamicResource CollapsingToggleButtonStyle}" Background="{DynamicResource ColorMainForeground}" RenderTransformOrigin="0.5,0.5">
    <ToggleButton.LayoutTransform>
        <TransformGroup>
            <ScaleTransform/>
            <SkewTransform/>
            <RotateTransform/>
            <TranslateTransform/>
        </TransformGroup>
    </ToggleButton.LayoutTransform>
</ToggleButton>

When I use it without the GridSplitter it is working fine (except the resizing): When I press the ToggleButton the content of the Grid 'grid' dissapears and the GridColumn(1) gets smaller leaving more space for GridColumn(0). But as soon as I put in the GridSplitter the automated resizing stops. Does anyone know how to solve this?

Answer 1

It sounds like you're having the same problem as in this question:

GridSplitter disables my RowDefinition style

As akjoshi has explained the GridSplitter changes the Height property of rows (Width property of columns). If you check the value source for the Height or Width property after the GridSplitter has been used to resize a row or column, you'll see it's been set to "local". "Local" values override any values set by styles, templates or triggers. Clearing the Height or Width property allows the Height or Width property to again be set using triggers and/or styles.

Answer 2

I tried to reproduce your scenario and looks like I understood whats happening in your case. Here's what your problem is -

If you just use ToggleButton then your column would expand/collapse correctly; if you use GridSplitter, then it would expand/collapse correctly too; but if you use GridSplitter and then try and use ToggleButton then the column won't shrink correctly.

Here is xaml I used to replicate the issue.

The reason is that once you use GridSplitter, it changes the width of the column to a fixed value, due to which <ColumnDefinition Width="Auto"/> doesn't hold true anymore; it is changed to a fixed value <ColumnDefinition Width="154"/>. Now even if content inside that column is collapsed the column width remains fixed(i.e. 154). This can easily be verified using SNOOP.

One solution to this is to change the width of your second column to Auto when ToggleButton is pressed (either through animation or code); It's not straight forward to set the width of a column through animation but some workarounds(creating GridLengthAnimation ) are available as explained in these SO questions -

Grid Column changing Width when animating

In WPF, has anybody animated a Grid?