C#のWPFアプリでwebViewで表示された画面上に画像を表示したいのですが方法がわかりません

Question

C#のWPFアプリを使用して「webView」を使用してHPページを表示しています。
そのHPページ上に画像を表示したいのですが、常に「webView」が最前面に表示され
画像が背面に表示されます。
画像を最前面に表示する方法をご存知でしたらご教授ください。

画像と、「webView」に「Panel.ZIndex」を指定したのですが、変化はありませんでした。

Comments

[hihijiji]

WebView2じゃだめですか？

[kishidamisao]

<code>
表示には、WebView2を使用していますが、webViewの上に画像が表示されないので
どのようにすればと、困ってます。
＜wv2:WebView2 x:Name="webView" Panel.ZIndex="9999"＞

webView2.CoreWebView2.Navigate(URI);
</code>

[hihijiji]

別の描画エンジンで描画したものをオーバーレイ表示しているみたいですね。
通常の方法ではだめっぽいです。

[kishidamisao]

そのようですね。では、HTMLを用いて画像を重ねることにはできますね。
ついてに、HTML画像をクリックした時に、javascriptでイベントを拾えば、
WPF側でもイベントを拾えそうですね。
試してみます。
　結果は、お知らせします。

Answer 1

WebBrowser・WebView・WebVew2すべてそうだと思いますが、別のハンドルを持ったウィンドウ（IEやEgdeの描画部分のようなもの）が重なっているからです。

空域問題（Airspace problem）といって、上にコントロールを重ねたり透過にしたりができません。
WPF 相互運用 : "空域" およびウィンドウ領域の概要 | Microsoft Docs

ではどうするかですが、Popupや別のWindowをさらに上に重ねるのをよく見ますね（もちろんウィンドウが動いたら一緒に動かす必要があります）

「wpf webview airspace」あたりで検索してみてください。

---

WebView2でも要望は上がっています。
技術的には可能でも需要が少ないと優先度が上がりませんので、投票等しておくといいかもしれません。

When using Webview2 in WPF, unable to overlay WPF controls on the Webview · Issue #286 · MicrosoftEdge/WebView2Feedback

WebBrowser overlaps other controls in WPF? · Issue #356 · MicrosoftEdge/WebView2Feedback

＃286を見ると、もしかしたら何か動きがあるのかも？？

---

ついにWebView2CompositionControlが来ました^^
WebView2CompositionControl Class (Microsoft.Web.WebView2.Wpf) | Microsoft Learn

<Window
  x:Class="Q344069.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"
  Width="800"
  Height="450">
  <Grid>
    <Grid.ColumnDefinitions>
      <ColumnDefinition />
      <ColumnDefinition />
    </Grid.ColumnDefinitions>
    <GroupBox Header="WebView2">
      <wv2:WebView2 Source="https://teratail.com/questions/344069" />
    </GroupBox>

    <GroupBox Grid.Column="1" Header="WebView2CompositionControl">
      <wv2:WebView2CompositionControl Source="https://teratail.com/questions/344069" />
    </GroupBox>

    <Border
      Grid.ColumnSpan="2"
      HorizontalAlignment="Center"
      VerticalAlignment="Center"
      BorderBrush="Red"
      BorderThickness="4">
      <Image Source="https://teratail-v2.storage.googleapis.com/uploads/avatars/u13/132786/KnkDDC5A_thumbnail.jpg" Stretch="None" />
    </Border>
  </Grid>
</Window>

<Project Sdk="Microsoft.NET.Sdk">

  <PropertyGroup>
    <OutputType>WinExe</OutputType>
    <TargetFramework>net9.0-windows10.0.19041.0</TargetFramework>
    <Nullable>enable</Nullable>
    <ImplicitUsings>enable</ImplicitUsings>
    <UseWPF>true</UseWPF>
  </PropertyGroup>

  <ItemGroup>
    <PackageReference Include="Microsoft.Web.WebView2" Version="1.0.2895-prerelease" />
  </ItemGroup>

</Project>

Answer 2

C#のWPFアプリでwebView2上に画像等を重ねる場合は、新しいwebView2を作成して重ねる
と出来ました。
つまり、webView2上に、別のwebView2を重ねるということになります。

「webView2」と画像表示とは別のエンジンであることが、今回の肝になりました。
ありがとうございました。