WinUI 2.8 で WebView2 がリリースされたと聞いて（メモ）

WebView2 を使うには Edge の開発者向けツールが必要みたいだけど、Windows 更新していれば入れる必要はないみたい。（自分は入れなくてもできた）

Windows App SDK の「空のアプリのテンプレート（パッケージ）」を使って作成する。
んで、とりあえず XAML を記述していく。Windows App SDK でプロジェクトを作成してしまえば、WinUI は自動的に導入されるので、特に特別な設定は必要ない。

MainWindow.xaml

<Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="Auto"/>
        </Grid.ColumnDefinitions>

        <WebView2 x:Name="WebView" Grid.Row="1" Grid.ColumnSpan="2"
                  Source="https://fw.mcwithcode.com" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
</Grid>

とりあえず、マイクラ花火のページを表示させてみた。

たくのろじぃ | Takumi Okawa

次はナビゲーションコントロールを追加してみる。

MainWindow.xaml

<TextBox Name="addressBar" Grid.Column="0"/>
<Button x:Name="SearchButton" Grid.Column="1" Click="SearchButton_Click" 
        Style="{StaticResource AccentButtonStyle}">検索</Button>

ボタン処理用のメソッドを追記

MainWindow.cs

private async void SearchButton_Click(object sender, RoutedEventArgs e)
{
    try
    {
        Uri targetUri = new Uri(addressBar.Text);
        WebView.Source = targetUri;
    }
    catch (Exception ex)
    {
        ContentDialog dialog = new ContentDialog()
        {
            Title = "Error",
            Content = ex.Message,
            CloseButtonText = "閉じる",
            XamlRoot = this.Content.XamlRoot
        };
        await dialog.ShowAsync();
    }
}

URL を叩くとページが表示される

存在しないURLや空の文字列を入れると弾かれる。（この辺の処理は良しなに）

たくのろじぃ | Takumi Okawa

ちなみに http プロトコルでもアクセスは可能。チュートリアルだと例外が発生するみたいだけど、再現できなかった。

たくのろじぃ | Takumi Okawa

あと、JavaScript のコードを埋め込むこともできるみたい。すごｗ
先に記述していた ContentDialog を ExecuteScriptAsync メソッドに書き換えて、その中に JS 構文を書けば実行できる。

catch (Exception ex)
{
    await WebView.ExecuteScriptAsync($"alert({ex.Message})");
}

このスクラップは2022/07/19にクローズされました