WPF窗口调整时基于高度保持宽高比——纯ViewModel实现问题

核心结论 #

可以在ViewModel中实现窗口宽高比锁定逻辑，但需要避免双向绑定的循环更新问题，同时正确处理窗口尺寸变化的事件传递。以下是针对你代码问题的分析和修复方案：

问题分析 #

你之前的代码存在几个关键问题：

1. 双向绑定循环：第一版中Width和Height均为双向绑定，修改高度触发宽度更新后，宽度的setter又会重复调用PreserveRatio，导致WPF抑制重复更新，最终宽高比不生效。
2. 事件时机错误：第二版中使用OnRenderSizeChanged是渲染阶段的事件，晚于窗口实际尺寸变化的时机，无法及时响应高度调整。
3. 浮点精度判断：直接用==比较double类型的宽高值，容易因精度误差导致更新逻辑失效。

修复后的完整实现 #

ViewModel代码 #

public class MainViewModel : INotifyPropertyChanged
{
    // 初始宽高比：基于你设置的850/650，可按需修改
    private readonly double _aspectRatio = 850.0 / 650.0;

    private double _windowHeight = 650;
    public double WindowHeight
    {
        get => _windowHeight;
        set
        {
            // 浮点精度判断，避免重复更新
            if (Math.Abs(_windowHeight - value) < double.Epsilon) return;
            
            _windowHeight = value;
            // 根据高度自动计算宽度
            WindowWidth = _windowHeight * _aspectRatio;
            
            OnPropertyChanged(nameof(WindowHeight));
            OnPropertyChanged(nameof(WindowWidth));
        }
    }

    private double _windowWidth = 850;
    public double WindowWidth
    {
        get => _windowWidth;
        // 宽度由高度驱动，设为私有setter避免外部修改
        private set
        {
            if (Math.Abs(_windowWidth - value) < double.Epsilon) return;
            
            _windowWidth = value;
            OnPropertyChanged(nameof(WindowWidth));
        }
    }

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

XAML代码 #

<Window x:Class="Test.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:Test"
        mc:Ignorable="d"
        WindowStartupLocation="CenterScreen"
        Title="MainWindow"
        x:Name="MainWindowView"
        <!-- 高度双向绑定，支持初始值设置和窗口调整反馈 -->
        Height="{Binding WindowHeight, Mode=TwoWay}"
        <!-- 宽度单向绑定，仅由ViewModel驱动 -->
        Width="{Binding WindowWidth, Mode=OneWay}"
        <!-- 监听窗口尺寸变化，实时同步高度到ViewModel -->
        SizeChanged="MainWindow_SizeChanged">
    <Window.DataContext>
        <local:MainViewModel />
    </Window.DataContext>
</Window>

窗口后台代码 #

private void MainWindow_SizeChanged(object sender, SizeChangedEventArgs e)
{
    var vm = DataContext as MainViewModel;
    if (vm == null) return;
    
    // 仅当高度发生变化时更新ViewModel，避免宽度调整触发循环
    if (Math.Abs(e.NewSize.Height - e.PreviousSize.Height) > double.Epsilon)
    {
        vm.WindowHeight = e.NewSize.Height;
    }
}

更优雅的无后台代码实现 #

如果希望完全避免后台代码，可以用ActualHeight的单向绑定替代SizeChanged事件，直接将窗口实际高度同步到ViewModel：

<Window ...
        Height="{Binding WindowHeight, Mode=TwoWay}"
        Width="{Binding WindowWidth, Mode=OneWay}"
        ActualHeight="{Binding WindowHeight, Mode=OneWayToSource}">

这样窗口实际高度变化时会自动更新ViewModel的WindowHeight，进而触发宽度计算，无需额外事件处理。

内容的提问来源于stack exchange，提问作者Samuel Marvin Aguilos