WPF中WebView2始终置顶问题及WebView2CompositionControl实现咨询

WebView2默认采用原生HWND渲染，属于WPF离屏控件，不受WPF布局系统的Panel.ZIndex约束，所以会一直置顶。从WebView2 SDK 1.0.2957.106版本开始，官方提供的WebView2CompositionControl基于WPF合成层渲染，能完全遵守WPF的层级规则，以下是具体实现步骤：

实现步骤 #

1. 确认NuGet包版本 #

确保项目已安装Microsoft.Web.WebView2 SDK（版本≥1.0.2957.106，你的1.0.3065.39版本满足要求），未安装的话直接在NuGet包管理器中搜索安装即可。

2. XAML中替换为WebView2CompositionControl #

将原有的WebView2控件替换为WebView2CompositionControl，同时添加命名空间映射，并通过Panel.ZIndex设置层级。

示例XAML代码：

<Window x:Class="WpfWebView2Pdf.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:wv2="clr-namespace:Microsoft.Web.WebView2.Wpf;assembly=Microsoft.Web.WebView2.Wpf"
        Title="WebView2 PDF 层级示例" Height="450" Width="800">
    <Grid>
        <!-- 展示PDF的WebView2合成控件，ZIndex设为1 -->
        <wv2:WebView2CompositionControl x:Name="webView2Comp" Panel.ZIndex="1" />

        <!-- 覆盖层，ZIndex设为99，会显示在WebView2上方 -->
        <Border Panel.ZIndex="99" Background="#80333333" Margin="50">
            <TextBlock Text="这是覆盖层" Foreground="White" FontSize="24" HorizontalAlignment="Center" VerticalAlignment="Center"/>
        </Border>
    </Grid>
</Window>

3. 后台初始化并加载PDF #

和普通WebView2的初始化逻辑一致，只需针对WebView2CompositionControl调用EnsureCoreWebView2Async完成初始化，再加载PDF文件。

示例C#代码：

using Microsoft.Web.WebView2.Core;
using Microsoft.Web.WebView2.Wpf;
using System.Windows;

namespace WpfWebView2Pdf
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            _ = InitializeWebView2();
        }

        private async System.Threading.Tasks.Task InitializeWebView2()
        {
            // 初始化CoreWebView2环境，可指定自定义环境目录，传null则用默认
            await webView2Comp.EnsureCoreWebView2Async(null);

            // 加载本地PDF文件，替换为你的实际文件路径
            string localPdfPath = @"D:\Sample.pdf";
            webView2Comp.CoreWebView2.Navigate(localPdfPath);

            // 也可以加载在线PDF：
            // webView2Comp.CoreWebView2.Navigate("https://mozilla.github.io/pdf.js/web/compressed.tracemonkey-pldi-09.pdf");
        }
    }
}

4. 注意事项 #

• 确保项目开启硬件加速：WebView2CompositionControl依赖WPF硬件加速，默认开启，若手动关闭过，需在App.xaml中设置RenderOptions.ProcessRenderMode="Default"。
• Runtime版本兼容性：用户端需安装对应版本的WebView2 Runtime，SDK 1.0.3065.39要求Runtime最低版本为120.0.2210.91。
• 性能影响：合成层渲染相比原生HWND会有轻微性能损耗，普通PDF展示场景下几乎无感知。

内容的提问来源于stack exchange，提问作者W.Kusnezow