如何让Viewbox包裹的WebView2在WPF和WinUI3(UWP)中缩放行为一致

问题根因 #

WPF 平台的 WebView2 本质是 Win32 HWND 控件嵌入 WPF 可视化树，属于空域（Airspace）渲染场景，WPF 的布局变换（比如 Viewbox 的缩放变换）默认不会作用于 HWND 类控件。而 WinUI3 的 WebView2 基于合成渲染管线实现，原生支持可视化树内的变换效果，因此两端表现存在差异。

可行解决方案 #

方案1：同步 Viewbox 缩放比例到 WebView2 的 ZoomFactor 属性 #

这是兼顾交互和显示效果的首选方案，通过监听 Viewbox 的缩放变换，实时计算缩放比例赋值给 WebView2 即可。
后台代码示例：

using System;
using System.Windows;
using System.Windows.Media;

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
        MyWebView.NavigationCompleted += MyWebView_NavigationCompleted;
    }

    private void MyWebView_NavigationCompleted(object sender, Microsoft.Web.WebView2.Core.CoreWebView2NavigationCompletedEventArgs e)
    {
        // 监听布局渲染帧事件
        CompositionTarget.Rendering += CompositionTarget_Rendering;
    }

    private void CompositionTarget_Rendering(object sender, EventArgs e)
    {
        // 获取Viewbox应用到内部容器的缩放矩阵
        var transform = InnerGrid.TransformToVisual(ViewboxContainer) as MatrixTransform;
        if (transform == null || MyWebView.CoreWebView2 == null) return;
        
        double scaleX = transform.Matrix.M11;
        // 避免缩放比例为0触发异常
        if (scaleX > 0)
        {
            MyWebView.ZoomFactor = scaleX;
        }
    }
}

对应 XAML 需要给相关控件添加命名：

<Grid Background="Red">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="Auto" />
    </Grid.ColumnDefinitions>

    <Viewbox x:Name="ViewboxContainer" Height="67" Grid.Row="1" Grid.ColumnSpan="2">
        <Grid x:Name="InnerGrid" Height="120" Width="660">
            <controls:WebView2 x:Name="MyWebView"  
                               Source="https://lva.lenovo.com.cn/ad/ad.html" 
                               HorizontalAlignment="Stretch" 
                               VerticalAlignment="Stretch" />
        </Grid>
    </Viewbox>
</Grid>

方案2：无交互场景使用离屏渲染 #

如果不需要用户和 WebView2 内容交互，可以开启 WebView2 的离屏渲染模式，将内容绘制到 WPF 的 WriteableBitmap 中，再绑定到 Image 控件显示，即可正常响应 Viewbox 的所有变换效果。

方案3：注入JS控制页面缩放 #

如果对应的Web页面属于可管控范围，也可以在WPF端监听到尺寸变化时，调用JS方法修改页面根元素的缩放属性，实现内容适配：

// 缩放变化时执行JS脚本调整页面缩放
await MyWebView.ExecuteScriptAsync($"document.documentElement.style.transform = 'scale({scaleX})';document.documentElement.style.transformOrigin = 'left top';");

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