如何在ViewModel中保存GridSplitter位置并适配窗口调整

核心思路 #

通过在ViewModel中保存列宽比例而非固定像素值，结合转换器实现比例与GridLength的双向转换，同时在转换过程中添加边界限制，确保GridSplitter不会拖出窗口，且窗口大小变化时自动保留列宽比例。

1. ViewModel实现（保存比例值） #

using System.ComponentModel;
using System.Runtime.CompilerServices;

public class GridLayoutViewModel : INotifyPropertyChanged
{
    private double _firstColumnRatio;
    // 初始比例对应第一列100px（假设Grid初始宽度800px，800-5=795，100/795≈0.1258）
    public double FirstColumnRatio
    {
        get => _firstColumnRatio;
        set
        {
            if (Math.Abs(_firstColumnRatio - value) < 0.001) return;
            // 限制比例范围：第一列最小占5%，最大占90%（避免某列过窄/消失）
            var clampedValue = Math.Clamp(value, 0.05, 0.9);
            _firstColumnRatio = clampedValue;
            OnPropertyChanged();
        }
    }

    public event PropertyChangedEventHandler PropertyChanged;
    protected void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

2. 比例与GridLength双向转换器 #

using System;
using System.Globalization;
using System.Windows;
using System.Windows.Data;

public class RatioToGridLengthConverter : IValueConverter
{
    // GridSplitter的固定宽度
    public double SplitterWidth { get; set; } = 5;
    // 第三列的最小宽度（防止被压缩消失）
    public double MinThirdColumnWidth { get; set; } = 50;
    // 第一列的最小宽度
    public double MinFirstColumnWidth { get; set; } = 50;

    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        if (value is double ratio && parameter is double gridActualWidth)
        {
            // 计算可用总宽度（扣除Splitter宽度）
            var availableWidth = gridActualWidth - SplitterWidth;
            if (availableWidth <= MinThirdColumnWidth + MinFirstColumnWidth)
            {
                return new GridLength(MinFirstColumnWidth);
            }

            // 根据比例计算第一列宽度，并限制边界
            var columnWidth = availableWidth * ratio;
            var maxColumnWidth = availableWidth - MinThirdColumnWidth;
            columnWidth = Math.Clamp(columnWidth, MinFirstColumnWidth, maxColumnWidth);
            
            return new GridLength(columnWidth);
        }
        return new GridLength(100);
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        if (value is GridLength length && parameter is double gridActualWidth)
        {
            var availableWidth = gridActualWidth - SplitterWidth;
            if (availableWidth <= 0) return 0.1258;
            
            // 将实际宽度转换为比例，并限制范围
            return Math.Clamp(length.Value / availableWidth, 0.05, 0.9);
        }
        return 0.1258;
    }
}

3. XAML绑定与布局调整 #

首先声明转换器资源：

<Window.Resources>
    <local:RatioToGridLengthConverter x:Key="RatioConverter" 
                                      SplitterWidth="5" 
                                      MinThirdColumnWidth="50"
                                      MinFirstColumnWidth="50"/>
</Window.Resources>

修改Grid布局，实现双向绑定：

<Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch" 
      Background="Purple" x:Name="MainGrid"
      DataContext="{StaticResource GridLayoutViewModel}">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="{Binding FirstColumnRatio, 
            Converter={StaticResource RatioConverter}, 
            ConverterParameter={Binding ActualWidth, ElementName=MainGrid}, 
            Mode=TwoWay}"/>
        <ColumnDefinition Width="5"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <Border Grid.Column="0" Background="Red"/>
    <Border Background="Green" Grid.Column="2" />
    <GridSplitter Width="5" Background="Black" Grid.Column="1" 
                  VerticalAlignment="Stretch" ResizeBehavior="PreviousAndNext"
                  DragCompleted="GridSplitter_DragCompleted"/>
</Grid>

4. 拖动完成与初始化处理 #

在窗口后台代码中添加事件处理：

private void GridSplitter_DragCompleted(object sender, System.Windows.Controls.Primitives.DragCompletedEventArgs e)
{
    var viewModel = DataContext as GridLayoutViewModel;
    if (viewModel == null) return;

    var availableWidth = MainGrid.ActualWidth - 5;
    if (availableWidth <= 0) return;

    // 拖动结束后同步最新比例到ViewModel
    viewModel.FirstColumnRatio = MainGrid.ColumnDefinitions[0].ActualWidth / availableWidth;
}

private void Window_Loaded(object sender, RoutedEventArgs e)
{
    var viewModel = DataContext as GridLayoutViewModel;
    if (viewModel == null) return;

    var availableWidth = MainGrid.ActualWidth - 5;
    if (availableWidth > 0)
    {
        // 初始化时将初始列宽转换为比例保存
        viewModel.FirstColumnRatio = MainGrid.ColumnDefinitions[0].ActualWidth / availableWidth;
    }
}

效果说明 #

• 比例保存：ViewModel中存储的是列宽占比，而非固定像素，切换DataTemplate后重新绑定即可恢复布局。
• 边界限制：转换器中通过Math.Clamp限制列宽范围，确保GridSplitter无法拖出窗口，也不会让某一列被压缩消失。
• 自适应窗口：窗口大小变化时，转换器会根据比例重新计算列宽，自动保持布局比例。

内容的提问来源于stack exchange，提问作者Павел Закриев