使用GridSplitter隐藏和自动调整列大小

Question

我有一个包含1个标题行和1个内容行的项目。内容行分为3列（组框）。这三列是使用GridSplitter实现的。

源代码：

---

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

---

我单击HideColumn1Button，第1列被隐藏，但其他两列的宽度与之前相同。但我想，第0列和第2列会自动调整为整个宽度。

你们中有谁知道，怎么做？

Answer 1

如果您希望使用复选框绑定它，那么您可以尝试以下代码，只需构建一个库并使用扩展列定义。礼貌（immortalus）

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

或者，在button_click或checkbox_checked上你可以编写代码（我将网格命名为testgrid），记得也要添加反向代码：

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

更加扩展的版本是编写自己的故事板，但以上两个应该有所帮助。

此致 Kajal

Answer 2

您的BooleanToVisibilityConverter需要返回Visibility.Collapsed，而不是Visibility.Hidden。这将是将宽度设置为0的视觉效果。

修改

在代码中的某处找到BooleanToVisibilityConverter的定义。

您应该只有3列。将GridSplitter放在第1列和第2列中，Horizo​​ntalAlignment =＆＃34; Left＆＃34;。对于每个GroupBox集合Margin="5,0,0,0"。

Answer 3

如何创建占据列的GridSplitter

若要指定占用Grid中列的GridSplitter，请将Column attached属性设置为要调整大小的列之一。如果您的网格有多行，请将RowSpan附加属性设置为行数。然后将Horizo​​ntalAlignment设置为Center，将VerticalAlignment属性设置为Stretch，并将包含GridSplitter的列的宽度设置为Auto。

以下示例显示如何定义占用列的垂直GridSplitter并调整其两侧的列的大小。 信用：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"
              />

Answer 4

请尝试验证BooleanToVisibilityConverter是否需要返回Visibility.Collapsed，而不是Visibility.Hidden。

BooleanToVisibilityConverter.cs source code in C# .NET

对于第0列，您应该只有3列Auto宽度的列。将GridSplitters放在第1列和第2列中。

这是我试过的代码：

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

  

隐藏之前

  

隐藏后