前回の【無駄話】What's up?で、「取り敢えず【Visual Studioで遊ぶ】シリーズは続けて」、「昔自作C#開発環境(.NET Framework 4.8 + C# + WinForms + MSCompAss)では使うことができなかったWebView2()辺りが候補」と書いたので、矢張りWebView2を取り上げてみようかと思います。

【無駄話】C#用ウェブコントロールを探していたら...WebView2

  【WebView2】矢張り難しいな...

 

Windows 10以降(7以降と書かれた記事もありますが、ご本家の解説では10以降となっています)

  • Win32 C/C++
  • .NET Framework 4.6.2 以降
  • .NET Core 3.1 以降
  • .NET 5 以降
  • WinUI 2.0
  • WinUI 3.0

で使用できます。端的な利用例が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>

 

後はコンストラクター、割り込みイベント用メソッドにプログラムコードを書いて終了です。それはまた次回。