WinForms中托管的两个WPF UserControl如何保持尺寸比例？

嘿，这个场景我熟，手动计算尺寸确实麻烦还容易出问题，给你两个更靠谱的方案，完全不用自己写尺寸计算逻辑：

方案一：用WinForm原生TableLayoutPanel布局 #

这是最贴合WinForm生态的做法，利用内置布局控件自动维护比例：

• 先把原来的两个ElementHost从Form上移除，拖一个TableLayoutPanel到Form中，将它的Dock属性设为Fill。
• 调整TableLayoutPanel的列设置：把ColumnCount改成2，然后选中两列，分别设置Width属性为百分比模式（SizeType.Percent），比如你想要1:2的比例，就把第一列设为33.33%，第二列设为66.67%。
• 把两个ElementHost分别拖进TableLayoutPanel的两个单元格里，每个ElementHost的Dock都设为Fill，再将对应的WPF UserControl赋值给它们的Child属性。
• 搞定！现在窗口缩放时，TableLayoutPanel会自动按比例分配两列的宽度，ElementHost跟着单元格一起缩放，里面的WPF控件也会自动适应尺寸。

方案二：用WPF Grid作为中间容器（更推荐） #

既然已经在混用WPF控件，不如直接用WPF的强大布局能力来解决，只需要一个ElementHost：

• 移除原来的两个ElementHost，只保留一个，把它的Dock设为Fill。
• 创建一个WPF的Grid容器（可以在代码里动态创建，也可以提前在WPF项目里做一个容器UserControl）：

  var layoutGrid = new Grid();
  // 设置两列的比例，比如1:3
  layoutGrid.ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(1, GridUnitType.Star) });
  layoutGrid.ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(3, GridUnitType.Star) });
  
  // 把两个UserControl加到对应列
  Grid.SetColumn(userControl1, 0);
  Grid.SetColumn(userControl2, 1);
  layoutGrid.Children.Add(userControl1);
  layoutGrid.Children.Add(userControl2);
  

• 最后把这个Grid赋值给ElementHost的Child属性。
• 这个方案的好处是完全利用WPF的Star布局特性，比例调整更灵活，而且WPF控件的缩放逻辑本身就比WinForm更顺滑，后期如果要调整比例，只需要改Star的数值就行。

额外小技巧 #

如果想在设计时可视化调整布局，可以在WPF项目里新建一个ContainerUserControl，在它的XAML里直接定义带比例列的Grid，然后把两个UserControl拖进去调整好，最后让WinForm的ElementHost承载这个ContainerUserControl，这样设计和运行时的效果完全一致。

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