BT

最新技術を追い求めるデベロッパのための情報コミュニティ

寄稿

Topics

地域を選ぶ

InfoQ ホームページ ニュース .NET 6では、WPFとWinFormsでBlazor WebViewコントロールが利用できるように

.NET 6では、WPFとWinFormsでBlazor WebViewコントロールが利用できるように

ブックマーク

原文(投稿日:2021/04/30)へのリンク

.NET 6 Preview 3のASP.NET Coreは、調査すべき多くの優れた機能を提供している。そのうちの1つは、BlazorWebViewコントロールを介した、WPFとWin Formsのデスクトップアプリケーション内でのBlazorコンポーネントの利用である。

ハイブリッドアプリは、.NET 6でサポートされており、際立っている。これは、BlazorWebViewを使って実現される。クロスプラットフォームのハイブリッドデスクトップアプリの構築をサポートするということは、そのプラットフォームとOSのネイティブデバイス機能を活用しながら、Webテクノロジーを使用してアプリのUI部分の一部を記述できることを意味する。

.NET 6 Preview 3では、BlazorWebViewコントロールがWPFとWindows Formsアプリに対して導入されている。開発者は、BlazorWebViewを使用して、.NET 6に基づく既存のWindowsデスクトップアプリ内にBlazor機能の一部を埋め込むことができる。このハイブリッドアプローチにより、開発チームは既存のWPFあるいはWindows Formsデスクトップアプリを組み合わせて最新化し、アップグレードできる。それには、デスクトップアプリのコア機能とAPIを維持しながら、BlazorWebView埋め込みを使ったWebベースのパーツを使用する。

BlazorWebViewコントロールの使用を開始するには、WebView2ランタイムをインストールする必要がある。

Blazor機能を既存のWindows Formsアプリに含める次のステップは、.NET6をターゲットとするようにWindows Formsアプリを更新することである。また、アプリのプロジェクトファイルで使用されているSDKをMicrosoft.NET.Sdk.Razorに更新することである。

Microsoft.AspNetCore.Components.WebView.WindowsFormsへのパッケージ参照を追加すると、WebViewコンポーネントへのアクセスが許可される。

HTMLファイルとCSSファイルをwwwrootに追加した後、wwwrootの[出力ディレクトリにコピー]プロパティを[新しい場合はコピー]に設定する必要がある。

既存のBlazorコンポーネントは、次のコードスニペットを使ってBlazorWebViewを使用してレンダリングできる。

var serviceCollection = new ServiceCollection();

serviceCollection.AddBlazorWebView();

var blazor = new BlazorWebView()
{
    Dock = DockStyle.Fill,
    HostPage = "wwwroot/index.html",
    Services = serviceCollection.BuildServiceProvider(),
};

blazor.RootComponents.Add<Counter>("#app");
Controls.Add(blazor);

WPFアプリにBlazorWebViewの使用法を追加することの違いは、Microsoft.AspNetCore.Components.WebView.Wpfのリファレンス(url:https://nuget.org/packages/Microsoft.AspNetCore.Components.WebView.Wpf)に記載されている。その違いは、そのXAMLコードビハインドで静的リソースとしてサービスプロバイダーを設定するXAMLコントロールでの使用方法である。

<Window x:Class="WpfApp1.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:WpfApp1"
        xmlns:blazor="clr-namespace:Microsoft.AspNetCore.Components.WebView.Wpf;assembly=Microsoft.AspNetCore.Components.WebView.Wpf"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <blazor:BlazorWebView HostPage="wwwroot/index.html" Services="{StaticResource services}">
            <blazor:BlazorWebView.RootComponents>
                <blazor:RootComponent Selector="#app" ComponentType="{x:Type local:Counter}" />
            </blazor:BlazorWebView.RootComponents>
        </blazor:BlazorWebView>
    </Grid>
</Window>
var serviceCollection = new ServiceCollection();
serviceCollection.AddBlazorWebView();

Resources.Add("services", serviceCollection.BuildServiceProvider());

Razorコンポーネントタイプがプロジェクトに表示されない問題は、コンポーネントに空の部分クラスを使用することで解決できる。

.NET 6 Preview3のASP.NETCoreアップデートに関する他の注目すべき更新とリリースは次の通りである。SignalR、Blazor Server、MessagePackスクリプトがより小さいサイズに。Redisプロファイリングセッションを有効にする方法。HTTP/3エンドポイントTLS構成。.NET Hot Reloadサポート。Razorコンパイラは個別のViewsアセンブリを生成しない。IISでのシャドウコピー。SignalR C ++クライアントのVcpkgポート。アイドル状態のTLS接続のメモリフットプリントの削減。SlabMemoryPoolからのスラブの削除。Blazor WebViewと他のリリースの詳細については、Daniel Rothが書いたアナウンスをご覧ください。

この記事に星をつける

おすすめ度
スタイル

BT