需求：可自动将一侧区域缩至0的自定义WPF GridSplitter

我们可以通过继承原生GridSplitter封装双击切换功能，让控件自带逻辑，无需在父容器后台编写重复代码，使用方式和原生拆分器几乎一致。

1. 自定义控件实现 #

创建名为AutoToggleGridSplitter的类，继承自GridSplitter，内部处理双击事件与宽高切换逻辑：

using System.Windows;
using System.Windows.Controls;
using System.Windows.Input;

public class AutoToggleGridSplitter : GridSplitter
{
    private GridLength _originalFirstLength;
    private GridLength _originalSecondLength;
    private bool _isFirstCollapsed;

    public AutoToggleGridSplitter()
    {
        MouseDoubleClick += OnMouseDoubleClick;
    }

    private void OnMouseDoubleClick(object sender, MouseButtonEventArgs e)
    {
        var parentGrid = Parent as Grid;
        if (parentGrid == null) return;

        if (ResizeDirection == GridResizeDirection.Columns)
        {
            ToggleColumns(parentGrid);
        }
        else if (ResizeDirection == GridResizeDirection.Rows)
        {
            ToggleRows(parentGrid);
        }
    }

    private void ToggleColumns(Grid grid)
    {
        int splitterColumn = Grid.GetColumn(this);
        if (splitterColumn <= 0 || splitterColumn >= grid.ColumnDefinitions.Count - 1) return;

        var firstColumn = grid.ColumnDefinitions[splitterColumn - 1];
        var secondColumn = grid.ColumnDefinitions[splitterColumn + 1];

        if (!_isFirstCollapsed)
        {
            _originalFirstLength = firstColumn.Width;
            _originalSecondLength = secondColumn.Width;
            firstColumn.Width = new GridLength(0);
            secondColumn.Width = new GridLength(1, GridUnitType.Star);
            _isFirstCollapsed = true;
        }
        else
        {
            firstColumn.Width = _originalFirstLength;
            secondColumn.Width = _originalSecondLength;
            _isFirstCollapsed = false;
        }
    }

    private void ToggleRows(Grid grid)
    {
        int splitterRow = Grid.GetRow(this);
        if (splitterRow <= 0 || splitterRow >= grid.RowDefinitions.Count - 1) return;

        var firstRow = grid.RowDefinitions[splitterRow - 1];
        var secondRow = grid.RowDefinitions[splitterRow + 1];

        if (!_isFirstCollapsed)
        {
            _originalFirstLength = firstRow.Height;
            _originalSecondLength = secondRow.Height;
            firstRow.Height = new GridLength(0);
            secondRow.Height = new GridLength(1, GridUnitType.Star);
            _isFirstCollapsed = true;
        }
        else
        {
            firstRow.Height = _originalFirstLength;
            secondRow.Height = _originalSecondLength;
            _isFirstCollapsed = false;
        }
    }
}

2. XAML中使用自定义拆分器 #

使用方式与原生GridSplitter完全一致，仅需替换为自定义控件，无需额外后台代码：

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

    <!-- 双击即可切换列宽的自定义拆分器 -->
    <local:AutoToggleGridSplitter Grid.Column="1"
                                  Width="5"
                                  Background="Gray"
                                  ResizeDirection="Columns"/>

    <!-- 测试内容 -->
    <Border Grid.Column="0" Background="LightBlue">
        <TextBlock Text="区域A" HorizontalAlignment="Center" VerticalAlignment="Center"/>
    </Border>
    <Border Grid.Column="2" Background="LightGreen">
        <TextBlock Text="区域B" HorizontalAlignment="Center" VerticalAlignment="Center"/>
    </Border>
</Grid>

功能说明 #

• 双击拆分器时，自动将拆分器左侧（或上方）区域收起至0，右侧（或下方）区域占满剩余空间；
• 再次双击恢复至之前的宽高比例；
• 完整保留原生GridSplitter的拖动调整功能；
• 支持列拆分与行拆分两种场景。

内容的提问来源于stack exchange，提问作者Boppity Bop