拆分器移动后Wpf Grid调整大小不起作用答案

【问题标题】：Wpf Grid resizing not working after splitter moved拆分器移动后Wpf Grid调整大小不起作用
【发布时间】：2017-02-16 11:34:34
【问题描述】：

我有以下 wpf 代码。

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

    <Grid Grid.Row="0">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="5"/>
            <ColumnDefinition Width="Auto"/>
        </Grid.ColumnDefinitions>

        <Grid Grid.Column="0">
            <Grid.Style>
                <Style TargetType="Grid">
                    <Style.Triggers>
                        <DataTrigger Binding="{Binding ElementName=toggleButtonShowGeneratedCode, Path=IsChecked}" Value="false">
                            <Setter Property="Width" Value="Auto"/>
                        </DataTrigger>
                    </Style.Triggers>
                </Style>
            </Grid.Style>

            <Button Content="Button 1" VerticalAlignment="Stretch" HorizontalAlignment="Stretch"/>
        </Grid>

        <GridSplitter Grid.Column="1" VerticalAlignment="Stretch" Width="5" ResizeDirection="Columns" ResizeBehavior="PreviousAndNext"/>

        <Grid Grid.Column="2">
            <Grid.Style>
                <Style TargetType="Grid">
                    <Style.Triggers>
                        <DataTrigger Binding="{Binding ElementName=toggleButtonShowGeneratedCode, Path=IsChecked}" Value="false">
                            <Setter Property="Visibility" Value="Collapsed"/>
                        </DataTrigger>
                    </Style.Triggers>
                </Style>
            </Grid.Style>

            <Button Content="Button 2" VerticalAlignment="Stretch" HorizontalAlignment="Stretch"/>
        </Grid>
    </Grid>

    <ToggleButton Grid.Row="1" Name="toggleButtonShowGeneratedCode" Width="50" Content="Toggle"/>
</Grid>

切换按钮应该折叠和展开按钮 2。当按钮 2 折叠时，按钮 1 应该占据它的空间。

这在启动时有效，但是在移动分离器后它停止工作。

【问题讨论】：

标签： wpf

【解决方案1】：

当 GridSplitter 被移动时，它会强制改变上一列和下一列的宽度。它们不再是声明的* 和Auto，而是变为* 和N，其中N 是某个数字。因此，Column#2 在其内容折叠时不会折叠。

建议的解决方案：使用一些代码隐藏将第 2 列的宽度恢复为 Auto（适用于视图-视图交互）

<Grid Grid.Row="0" Name="ResizableGrid">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="5"/>
        <ColumnDefinition Width="Auto"/>
    </Grid.ColumnDefinitions>
  <!--...-->
  <ToggleButton Grid.Row="1" Name="toggleButtonShowGeneratedCode" 
                Width="50" Content="Toggle" 
                Unchecked="toggleButtonShowGeneratedCode_Unchecked"/>

private void toggleButtonShowGeneratedCode_Unchecked(object sender, RoutedEventArgs e)
{
    ResizableGrid.ColumnDefinitions[2].Width = new GridLength(1, GridUnitType.Auto);
}

请注意，我为 Grid 添加了 Name 以便从代码中访问它

【讨论】：