前回の【無駄話】What's up?で、「取り敢えず【Visual Studioで遊ぶ】シリーズは続けて」、「昔自作C#開発環境(.NET Framework 4.8 + C# + WinForms + MSCompAss)では使うことができなかったWebView2(注)辺りが候補」と書いたので、矢張りWebView2を取り上げてみようかと思います。
注:【無駄話】C#用ウェブコントロールを探していたら...WebView2
Windows 10以降(7以降と書かれた記事もありますが、ご本家の解説では10以降となっています)の
で使用できます。端的な利用例がMicrosoft Edgeブラウザーですが、
(1)「WebView2」はEdge のブラウザー機能を埋め込むためにご利用いただける機能 (コントロール) (出典)
(2)このコントロールを使うのに必要なランタイム(DLL)が「WebView2 Runtime」
(3)このを使う為にアプリケーションに WebView2 の機能を埋め込むプログラミングキットが 「WebView2 SDK」
というそうです。
その前提でWebView2コントロールを使ったサンプルプログラムの進め方を考えると、
(1)WebView2コントロールを配置するベースとなるDesktopウィンドウ→簡単だからC#
(2)WebView2の最低限の制御を行うコントロール(ボタンやURL入力コントロール)→苦手意識除去のためWPF(.NET 10)
(3)依存するWebView2ランタイム→Visual StudioでNuGetから取得
という形でサクサクっとやれそうです。
先ずはソリューションを"WebView2"、WPFアプリのプロジェクトを"WebView2-1"として
作成し、取り敢えず「ツール」→「NuGetパッケージマネージャー」→「ソリューションのNuGetパッケージの管理」で↑にある"Microsoft.Web.WebView2 (1.0.3719.77)"をインストールします。
次にウィンドウデザインですが、デフォルトでついてくるGridをそのまま利用し、左右分割の上、左をWebView2、右に(複数音コントロールを置けるように)StackPanelを配置し、中にExitボタン、URL入力用のComboBox、「戻る・進む」「中止・再読」「拡大・縮小」用の二つのボタンセットをCanvasに入れたものを用意しました。以下に赤字で書いた割り込みイベント用の関数(メソッド)は「プロパティ」ウィンドウで設定します。
【MainWindow.xaml】
<Window
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:WebView2_1"
xmlns:Wpf="clr-namespace:Microsoft.Web.WebView2.Wpf;assembly=Microsoft.Web.WebView2.Wpf" x:Class="WebView2_1.MainWindow"
mc:Ignorable="d"
Title="WebView2-1" Height="480" Width="640" Icon="WPF.ico">
<Grid> (解説:ウィンドウのContentとなるGridです。)
<Grid.ColumnDefinitions>
<ColumnDefinition Width="520*"/> (解説:*を付けるとサイズ変更で値が変わるみたいです。)
<ColumnDefinition Width="120"/>
</Grid.ColumnDefinitions>
<Wpf:WebView2 Name="wv2" Grid.ColumnSpan="1"/> (解説:今回の主役です。)
<StackPanel Grid.Column="2"> (解説:左側は幅固定のグリッドにStackPanelを置きます。)
<Button Content="Exit" Margin="10,10,10,10" Click="ExitButton_Click"/> (解説:終了ボタンです。)
<ComboBox Name ="URLs" Height="24" Margin="5,5,5,5" IsEditable="True" KeyDown="URLs_KeyDown" Width="109" MaxDropDownHeight="359" ScrollViewer.HorizontalScrollBarVisibility="Auto" SelectionChanged="OnURLs_SelectionChanged"/> (解説:URL入力用ComboBoxです。赤字は割り込みイベント用メソッド。)
<Canvas Height="24" Width="98" Margin="10,10,10,10"> (解説:以下Canvasにボタン二つを入れたセットx3です。)
<Button Name ="BackButton" Content="戻る" Width="30" Canvas.Left="10" Canvas.Top="2" Click="BackButton_Click"/> (解説:赤字は割り込みイベント用メソッド。)
<Button Name ="ForwardButton" Content="進む" Width="30" Canvas.Left="58" Canvas.Top="2" Click="ForwardButton_Click"/> (解説:赤字は割り込みイベント用メソッド。)
</Canvas>
<Canvas Height="24" Width="98" Margin="10,0,10,10">
<Button Name ="StopButton" Content="中止" Width="30" Canvas.Left="10" Canvas.Top="2" Click="StopButton_Click"/> (解説:赤字は割り込みイベント用メソッド。)
<Button Name ="RetryButton" Content="再読" Width="30" Canvas.Left="58" Canvas.Top="2" Click="RetryButton_Click"/> (解説:赤字は割り込みイベント用メソッド。)
</Canvas>
<Canvas Height="24" Width="98" Margin="10,0,10,10">
<Button Name ="ZoomInButton" Content="拡大" Width="30" Canvas.Left="10" Canvas.Top="2" Click="ZoomInButton_Click"/> (解説:赤字は割り込みイベント用メソッド。)
<Button Name ="ZoomOutButton" Content="縮小" Width="30" Canvas.Left="58" Canvas.Top="2" Click="ZoomOutButton_Click"/> (解説:赤字は割り込みイベント用メソッド。)
</Canvas>
</StackPanel>
</Grid>
</Window>
後はコンストラクター、割り込みイベント用メソッドにプログラムコードを書いて終了です。それはまた次回。


