调整主窗口大小时同步调整TabControl内Canvas的尺寸问题

现有代码的问题 #

1. 变量名错误：canvasCustomer_SizeChanged事件里错误引用了canvasCoche（应为canvasCustomer），同时width/ancho、height/alto变量混用且未正确定义，导致缩放逻辑完全失效。
2. 未绑定变换到Canvas：创建了TransformGroup但未赋值给canvasCustomer.RenderTransform，缩放和位移操作根本不会作用到Canvas上。
3. 缩放比例逻辑不合理：固定除以20的比例无依据，应基于Canvas内容的原始尺寸计算等比例缩放值。

方案一：修正SizeChanged事件实现 #

步骤1：XAML无需结构改动，确保Canvas名称正确

<TabItem Name="tabItemCustomer" Header="Customer">
    <Canvas Name="canvasCustomer" Background="LightYellow"
            SizeChanged="canvasCustomer_SizeChanged"/>
</TabItem>

步骤2：修正C#代码

namespace customer_purchases
{
    public partial class MainWindow : Window
    {
        private ScaleTransform _scaleTransform;
        private TransformGroup _transformGroup;
        // 替换为你Canvas内容的实际原始尺寸
        private readonly double _originalContentWidth = 200;
        private readonly double _originalContentHeight = 200;

        public MainWindow()
        {
            InitializeComponent();
            _scaleTransform = new ScaleTransform();
            _transformGroup = new TransformGroup();
            _transformGroup.Children.Add(_scaleTransform);
            // 将变换绑定到Canvas，让缩放生效
            canvasCustomer.RenderTransform = _transformGroup;
        }

        private void canvasCustomer_SizeChanged(object sender, SizeChangedEventArgs e)
        {
            var canvas = sender as Canvas;
            if (canvas == null || _originalContentWidth == 0 || _originalContentHeight == 0)
                return;

            // 计算等比例缩放因子，取宽高比例的较小值，避免内容超出Canvas
            double scaleX = canvas.ActualWidth / _originalContentWidth;
            double scaleY = canvas.ActualHeight / _originalContentHeight;
            double scale = Math.Min(scaleX, scaleY);

            // 应用缩放，同时设置缩放中心让内容居中（可根据需求调整）
            _scaleTransform.ScaleX = scale;
            _scaleTransform.ScaleY = scale;
            _scaleTransform.CenterX = _originalContentWidth / 2;
            _scaleTransform.CenterY = _originalContentHeight / 2;
        }
    }
}

方案二：使用ViewBox实现自动缩放 #

之前用ViewBox无效，大概率是没给Canvas设置固定原始尺寸，ViewBox需要知道内容基准大小才能正确缩放。

修改后的XAML：

<TabItem Name="tabItemCustomer" Header="Customer">
    <Viewbox Stretch="Uniform" StretchDirection="Both">
        <!-- 给Canvas设置固定原始尺寸，对应你内容的实际大小 -->
        <Canvas Name="canvasCustomer" Background="LightYellow"
                Width="200" Height="200">
            <!-- 你的矩形等元素放在这里，使用原始尺寸绘制 -->
        </Canvas>
    </Viewbox>
</TabItem>

• Stretch="Uniform"：保持内容宽高比，避免变形
• StretchDirection="Both"：支持内容放大和缩小
• 必须给Canvas设置固定Width和Height，ViewBox会基于此尺寸缩放整个Canvas及内部元素

注意事项 #

• 如果Canvas内元素是动态添加的，要确保元素的位置、尺寸基于Canvas的原始尺寸定义，才能保证缩放时适配正确。
• 方案一适合需要自定义缩放逻辑（比如限制缩放范围、添加位移）的场景；方案二更简洁，适合仅需等比例自动缩放的场景。

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