WPF勉強(13) Edge版WebViewコントロールを使ってみる

• Windows10 April 2018 Update
• .Net Frameork 4.6.2
• WPF
• VisualStudio2017

Windows Community Toolkit 3.0 で Edge版のWebViewコントロールが使用できるようになりましたので、早速使ってみます。

WebView controls for Windows Forms and WPF applications

動作環境

• Windows 10 April 2018 Update 以上
• .Net Framework 4.6.2 以上

準備

Nuget で Microsoft.Toolkit.Wpf.UI.Controls.WebView を導入

実装

	<Window x:Class="WCTTest.MainWindow"
	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"
	xmlns:local="clr-namespace:WCTTest"
	xmlns:toolkit="clr-namespace:Microsoft.Toolkit.Wpf.UI.Controls;assembly=Microsoft.Toolkit.Wpf.UI.Controls.WebView"
	mc:Ignorable="d"
	Title="MainWindow" Height="450" Width="800">
	<Grid>
	<toolkit:WebView x:Name="WebView1" Source="https://www.google.com/"/>
	</Grid>
	</Window>

view raw WebView.MainWindow.xaml hosted with ❤ by GitHub

• 名前空間の定義を追加(7行目)
• WebViewコントロールを配置(11行目)

簡単ですね。

おまけ：表示中のhtmlテキストを取得する

string htmlText = await WebView1.InvokeScriptAsync("eval", "document.documentElement.outerHTML;");

view raw WebView.GetHtmlText.cs hosted with ❤ by GitHub

DOMContentLoadedイベントで読み込み完了を検知できるのでその後の適当なタイミングで。

---

(2019-02-04) Nugetパッケージを最新のものに変更