WinUI 3桌面应用窗口尺寸变化时如何高效缩放所有元素？

核心解决方案：使用Viewbox容器 #

Viewbox是WinUI 3内置的布局容器，专门用于实现内容的按比例缩放，同时自动维持内部元素的相对位置和尺寸关系，完全匹配你需要的老年用户友好的窗口缩放需求，无需手动绑定大量属性。

修改后的MainPage.xaml代码 #

替换你现有的MainPage内容为以下代码：

<Page
    x:Class="TestScale.Views.MainPage"
    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"
    mc:Ignorable="d">

    <!-- Viewbox自动按比例缩放内部所有内容 -->
    <Viewbox Stretch="Uniform" StretchDirection="Both">
        <!-- 定义基准尺寸的Grid，作为缩放的原始参考框架 -->
        <Grid Width="800" Height="600">
            <Border x:Name="Border" Width="300" Height="200" BorderThickness="2" BorderBrush="Red">
                <TextBlock Text="The quick brown fox." HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="16"/>
            </Border>
        </Grid>
    </Viewbox>
</Page>

关键参数说明 #

• Stretch="Uniform"：保持内部内容的原始宽高比，避免拉伸变形，完美适配窗口缩放的比例需求。
• StretchDirection="Both"：允许内容随窗口放大或缩小，既支持窗口扩大时放大内容，也支持窗口缩小时缩小内容。
• 内部Grid的Width和Height：设置一个基准尺寸（比如800x600），作为内容的原始大小，Viewbox会以此为基础按窗口尺寸比例缩放整个布局。

为什么比手动绑定比例更优 #

• 无需编写任何后台代码计算缩放比例，也不用绑定FontSize、BorderThickness、CornerRadius等属性，Viewbox会自动处理所有元素的缩放。
• 完全避免直接使用Scale变换导致的位置偏移问题：Scale是对元素进行视觉变换，布局位置仍基于原始尺寸计算；而Viewbox是重新调整布局逻辑，将缩放后的内容正确放置在窗口内，保持相对位置不变。

适配Template Studio的ShellPage #

由于你的项目是Template Studio生成的带菜单栏的结构，MainPage会嵌入到ShellPage的内容区域中，Viewbox会自动占满MainPage的可用空间，无需额外修改ShellPage的代码。

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