WinUI3应用中WebView2嵌入Power BI页面边距及应用栏异常问题咨询

一、消除视口左右空白区域 #

• 调整WebView2布局属性
  在XAML中配置WebView2时，确保以下属性设置，让它完全填充父容器：

  <WebView2 x:Name="PbiWebView"
            HorizontalAlignment="Stretch"
            VerticalAlignment="Stretch"
            Margin="0"
            Padding="0"/>
  

  同时检查WebView2的父容器（如Grid），移除所有默认的Margin或Padding设置。

• 配置Power BI嵌入参数
  嵌入Power BI时，在配置中指定自定义布局，强制内容自适应容器宽度：

  let embedConfig = {
      type: "report",
      id: "<你的报表ID>",
      embedUrl: "<你的嵌入URL>",
      tokenType: models.TokenType.Embed,
      accessToken: "<你的访问令牌>",
      settings: {
          layoutType: models.LayoutType.Custom,
          customLayout: {
              displayOption: models.DisplayOption.FitToPage
          },
          padding: {
              top: 0,
              bottom: 0,
              left: 0,
              right: 0
          }
      }
  };
  

• 优化iframe样式
  嵌入Power BI的iframe需设置全屏无边界样式：

  <iframe id="pbi-embed" 
          width="100%" 
          height="100%" 
          style="margin:0; padding:0; border:none;"
          src="<嵌入地址>"></iframe>
  

二、修复顶部应用栏高度翻倍问题 #

• 检查WinUI 3应用栏配置
  确认XAML中没有重复定义AppBar或CommandBar，同时设置固定高度避免冗余：

  <CommandBar Height="48" Margin="0">
      <!-- 你的命令按钮 -->
  </CommandBar>
  

  避免父容器给应用栏添加额外的Padding或Margin。

• 隐藏Power BI自带导航栏
  在Power BI嵌入配置中，关闭自带的导航和标题栏，避免与WinUI应用栏叠加：

  settings: {
      navContentPaneEnabled: false,
      showTitle: false,
      // 其他已有的设置
  }
  

• 调整WebView2页面顶部边距
  在WebView2加载完成后，通过JS移除页面顶部默认边距：

  PbiWebView.CoreWebView2.NavigationCompleted += (sender, args) =>
  {
      if (args.IsSuccess)
      {
          PbiWebView.CoreWebView2.ExecuteScriptAsync("document.body.style.marginTop = '0';");
      }
  };
  

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