CODEWITHSUNDEEP
c#.netwpfxamlgridsplitter
Struct
Struct

Reputation: 970

Hide and auto resize columns with GridSplitter

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?

Upvotes: 2

Views: 4555

Answers (4)

Muhammed Nigil
Muhammed Nigil

Reputation: 183

How to create a GridSplitter that occupies a column

To specify a GridSplitter that occupies a column in a Grid, set the Column attached property to one of the columns that you want to resize. If your Grid has more than one row, set the RowSpan attached property to the number of rows. Then set the HorizontalAlignment to Center, set the VerticalAlignment property to Stretch, and set the Width of the column that contains the GridSplitter to Auto.

The following example shows how to define a vertical GridSplitter that occupies a column and resizes the columns on either side of it. Credit : http://msdn.microsoft.com/en-us/library/ms745672(v=vs.110).aspx

<Grid.ColumnDefinitions>
  <ColumnDefinition/>
  <ColumnDefinition Width="Auto" />
  <ColumnDefinition/>
</Grid.ColumnDefinitions>

..

<GridSplitter Grid.Column="1"
              HorizontalAlignment="Center"
              VerticalAlignment="Stretch"
              Background="Black" 
              ShowsPreview="True"
              Width="5"
              />

Upvotes: 1

MRebai
MRebai

Reputation: 5474

Please try to verify that BooleanToVisibilityConverter needs to return Visibility.Collapsed, not Visibility.Hidden.

BooleanToVisibilityConverter.cs source code in C# .NET

You should only have 3 columns with Auto width for column 0. Put the GridSplitters in Columns 1 and 2.

Here is the code i tried :

<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">

            <StackPanel>
                <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>
            </StackPanel>

        </GroupBox>

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

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

                        <StackPanel Grid.Row="0">
                        </StackPanel>
                    </Grid>
                </GroupBox>

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

                        <StackPanel Grid.Row="0">
                        </StackPanel>
                    </Grid>
                </GroupBox>

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

                        <StackPanel Grid.Row="0">
                        </StackPanel>
                    </Grid>
                </GroupBox>
                //Put the GridSplitters in Columns 1 and 2, HorizontalAlignment="Left".
                <GridSplitter Grid.Column="1" HorizontalAlignment="Left" VerticalAlignment="Stretch" Width="5"/>
                <GridSplitter Grid.Column="2" HorizontalAlignment="Left" VerticalAlignment="Stretch" Width="5"/>
            </Grid>
        </GroupBox>

    </Grid>

</Window>

Before hide

Before

After Hide

After

Upvotes: 0

klugerama
klugerama

Reputation: 3352

Your BooleanToVisibilityConverter needs to return Visibility.Collapsed, not Visibility.Hidden. That would be the visual equivalent to setting the width to 0.

Edit

Find your definition of BooleanToVisibilityConverter somewhere in your code.

You should only have 3 columns. Put the GridSplitters in Columns 1 and 2, HorizontalAlignment="Left". For each GroupBox set Margin="5,0,0,0".

Upvotes: 0

Kajal Sinha
Kajal Sinha

Reputation: 1565

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

Upvotes: 2

Related Questions