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.