Hide and auto resize columns with GridSplitter

Question

I've a project with 1 header row and 1 content row. The content row is divided into 3 columns (groupboxes). These 3 columns are realized with GridSplitter.

Source Code:

<Window 
        x:Class="Test.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:ViewMenu="clr-namespace:Cons.ViewMenu"
        Title="Test Gridsplitter"
        Height="700"
        Width="1000">

    <Window.Resources>
        <BooleanToVisibilityConverter x:Key="BoolToVisConverter" />
    </Window.Resources>

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="50" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <!-- Row 0 -->
        <GroupBox Name="Menu" Grid.Row="0">

            <ViewMenu:LockedToolBar>
                <ToggleButton x:Name="HideColumn0Button" IsChecked="True" Width="80" Height="40">Hide C0</ToggleButton>

                <ToggleButton x:Name="HideColumn1Button" IsChecked="True" Width="80" Height="40">Hide C1</ToggleButton>

                <ToggleButton x:Name="HideColumn2Button" IsChecked="True" Width="80" Height="40">Hide C2</ToggleButton>
            </ViewMenu:LockedToolBar>

        </GroupBox>

        <!-- Row 1 -->
        <GroupBox Name="Body" Grid.Row="1">
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" MinWidth="80" />
                    <ColumnDefinition Width="auto"/>
                    <ColumnDefinition Width="*" MinWidth="80" />
                    <ColumnDefinition Width="auto"/>
                    <ColumnDefinition Width="*" MinWidth="80" />
                </Grid.ColumnDefinitions>

                <!-- Column 0 -->
                <GroupBox Header="Column 0" 
                          Name="ds"
                          Grid.Row="0" 
                          Grid.Column="0" 
                          Visibility="{Binding Path=IsChecked, ElementName=HideColumn0Button, Converter={StaticResource BoolToVisConverter}}">
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="40" />
                            <RowDefinition Height="*" />
                        </Grid.RowDefinitions>

                        <ViewMenu:LockedToolBar Grid.Row="0">
                        </ViewMenu:LockedToolBar>
                    </Grid>
                </GroupBox>

                <!-- Column 1 -->
                <GroupBox Header="Column 1" 
                          Grid.Row="0" 
                          Grid.Column="2"
                          Visibility="{Binding Path=IsChecked, ElementName=HideColumn1Button, Converter={StaticResource BoolToVisConverter}}">
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="40" />
                            <RowDefinition Height="*" />
                        </Grid.RowDefinitions>

                        <ViewMenu:LockedToolBar Grid.Row="0">
                        </ViewMenu:LockedToolBar>
                    </Grid>
                </GroupBox>

                <!-- Column 2 -->
                <GroupBox Header="Column 2" 
                          Grid.Row="0" 
                          Grid.Column="4"
                          Visibility="{Binding Path=IsChecked, ElementName=HideColumn2Button, Converter={StaticResource BoolToVisConverter}}">
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="40" />
                            <RowDefinition Height="*" />
                        </Grid.RowDefinitions>

                        <ViewMenu:LockedToolBar Grid.Row="0">
                        </ViewMenu:LockedToolBar>
                    </Grid>
                </GroupBox>

                <GridSplitter Grid.Column="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Width="5"/>
                <GridSplitter Grid.Column="3" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Width="5"/>
            </Grid>
        </GroupBox>

    </Grid>

</Window>

I click on HideColumn1Button, column 1 is hidden, but the other two columns have the same width as before. But I want, that column 0 and 2 are auto resized to the complete width.

Does anyone of you know, how to do that?

you may need to adjust the column definition of the grid, may you share your full code so we can have look. — pushpraj
Perhaps all what is involved in your question. for minimum the Grid — pushpraj

Kajal Sinha Kajal Sinha · Accepted Answer · 2014-07-02T10:34:52

If you wish to bind it using a checkbox then you can try the following code, just build a library out of it and make use of extended column definition. Courtesy(immortalus)

http://www.codeproject.com/Articles/437237/WPF-Grid-Column-and-Row-Hiding

Alternatively, on the button_click or checkbox_checked you can write code(I have named the grid as testgrid), remember to add the reverse code as well:

        testgrid.ColumnDefinitions[0].Width = new GridLength(0);
        testgrid.ColumnDefinitions[0].MinWidth = 0;

An even more extended version is to write your own Storyboard, but the above two should help.

Regards Kajal

Hide and auto resize columns with GridSplitter

4 Answers