Windows フォームの Blazor アプリを構築する

  • [アーティクル]

注意

これは、この記事の最新バージョンではありません。 現在のリリースについては、この記事の .NET 8 バージョンを参照してください。

重要

この情報はリリース前の製品に関する事項であり、正式版がリリースされるまでに大幅に変更される可能性があります。 Microsoft はここに示されている情報について、明示か黙示かを問わず、一切保証しません。

現在のリリースについては、この記事の .NET 8 バージョンを参照してください。

このチュートリアルでは、Windows フォームの Blazor アプリを構築して実行する方法を示します。 学習内容は次のとおりです。

  • Windows フォーム Blazor アプリ プロジェクトを作成する
  • Windows でアプリで実行する

前提条件

Visual Studio のワークロード

.NET デスクトップ開発ワークロードがインストールされていない場合は、Visual Studio のインストーラーを使って、そのワークロードをインストールします。 詳しくは、「Visual Studio のワークロード、コンポーネント、および言語パックを変更する」をご覧ください。

Visual Studio インストーラーの .NET デスクトップ開発ワークロードの選択項目。

Windows フォーム Blazor プロジェクトを作成する

Visual Studio を起動します。 [スタート ウィンドウ] で、[新しいプロジェクトの作成] を選びます。

Visual Studio で新しいソリューションを作成します。

[新しいプロジェクトの作成] ダイアログで、[プロジェクトの種類] ドロップダウンを [デスクトップ] でフィルター処理します。 [Windows フォーム アプリ] 用の C# プロジェクト テンプレートを選び、[次へ] ボタンを選びます。

Visual Studio で新しいプロジェクトを作成します。

[新しいプロジェクトの構成] ダイアログで、次のようにします。

  • [プロジェクト名] を WinFormsBlazor に設定します。
  • プロジェクトに適した場所を選びます。
  • [次へ] ボタンを選択します。

プロジェクトを構成します。

[追加情報] ダイアログの [フレームワーク] ドロップダウン リストで、フレームワークのバージョンを選びます。 [作成] ボタンを選びます。

[追加情報] ダイアログ。

NuGet パッケージ マネージャーを使って、Microsoft.AspNetCore.Components.WebView.WindowsForms NuGet パッケージをインストールします。

Visual Studio で Nuget パッケージ マネージャーを使用して Microsoft.AspNetCore.Components.WebView.WindowsForms NuGet パッケージをインストールします。

ソリューション エクスプローラーで、プロジェクト名 WinFormsBlazor を右クリックし、[プロジェクト ファイルの編集] を選んでプロジェクト ファイル (WinFormsBlazor.csproj) を開きます。

プロジェクト ファイルの先頭で、SDK を Microsoft.NET.Sdk.Razor に変更します。

<Project Sdk="Microsoft.NET.Sdk.Razor">

プロジェクト ファイル (WinFormsBlazor.csproj) への変更を保存します。

Microsoft.AspNetCore.Components.Web への @using ディレクティブを使用して、_Imports.razor ファイルをプロジェクトのルートに追加します。

_Imports.razor:

@using Microsoft.AspNetCore.Components.Web

_Imports.razor ファイルを保存します。

wwwroot フォルダーをプロジェクトに追加します。

次のマークアップを含む index.html ファイルを wwwroot フォルダーに追加します。

wwwroot/index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>WinFormsBlazor</title>
    <base href="/" />
    <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
    <link href="css/app.css" rel="stylesheet" />
    <link href="WinFormsBlazor.styles.css" rel="stylesheet" />
</head>

<body>

    <div id="app">Loading...</div>

    <div id="blazor-error-ui" data-nosnippet>
        An unhandled error has occurred.
        <a href="" class="reload">Reload</a>
        <a class="dismiss">🗙</a>
    </div>

    <script src="_framework/blazor.webview.js"></script>

</body>

</html>

wwwroot フォルダー内に、スタイルシートを保持するための css フォルダーを作成します。

次のような内容の app.css スタイルシートを wwwroot/css フォルダーに追加します。

wwwroot/css/app.css:

html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

h1:focus {
    outline: none;
}

a, .btn-link {
    color: #0071c1;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

wwwroot/css フォルダー内に、bootstrap フォルダーを作成します。 bootstrap フォルダー内に、bootstrap.min.css のコピーを配置します。 bootstrap.min.css の最新バージョンは、Bootstrap Web サイトから入手できます。 ナビゲーション バーのリンクに従って、[ドキュメント]>[ダウンロード] にアクセスします。 サイトのすべてのコンテンツは URL でバージョン管理されているため、ここで直接リンクを指定することはできません。

次の Counter コンポーネントをプロジェクトのルートに追加します。これは、Blazor プロジェクト テンプレートで見つかる既定の Counter コンポーネントです。

Counter.razor:

<h1>Counter</h1>

<p>Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

Counter コンポーネント (Counter.razor) を保存します。

ソリューション エクスプローラーで Form1.cs ファイルをダブルクリックして、デザイナーを開きます。

ソリューション エクスプローラーの Form1.cs ファイル。

Visual Studio ウィンドウの左端にある [ツールボックス] ボタンを選ぶか、[表示]>[ツールボックス] メニュー コマンドを選んで、[ツールボックス] を開きます。

Microsoft.AspNetCore.Components.WebView.WindowsForms の下にある BlazorWebView コントロールを見つけます。 [ツールボックス] から Form1 デザイナーに BlazorWebView をドラッグします。 誤って WebView2 コントロールをフォームにドラッグしないように注意してください。

[ツールボックス] の BlazorWebView。

Visual Studio のフォーム デザイナーに BlazorWebView コントロールが WebView2 として表示され、コントロールに自動的に blazorWebView1 という名前が付けられます。

Form1 デザイナーの BlazorWebView。

Form1 で、BlazorWebView (WebView2) を 1 回クリックして選択します。

BlazorWebView の [プロパティ] で、コントロールに blazorWebView1 という名前が指定されていることを確認します。 名前が blazorWebView1 でない場合は、[ツールボックス] から間違ったコントロールがドラッグされています。 Form1 で WebView2 コントロールを削除し、BlazorWebView コントロールをフォームにドラッグしてください。

BlazorWebView は Visual Studio によって自動的に

コントロールのプロパティで、BlazorWebView の Dock の値を Fill に変更します。

Dock が Fill に設定されている BlazorWebView のプロパティ。

Form1 デザイナーで、Form1 を右クリックして [コードの表示] を選びます。

Microsoft.AspNetCore.Components.WebView.WindowsForms と Microsoft.Extensions.DependencyInjection の名前空間を、Form1.cs ファイルの先頭に追加します。

using Microsoft.AspNetCore.Components.WebView.WindowsForms;
using Microsoft.Extensions.DependencyInjection;

Form1 コンストラクター内の、InitializeComponent メソッドの呼び出しの後に、次のコードを追加します。

var services = new ServiceCollection();
services.AddWindowsFormsBlazorWebView();
blazorWebView1.HostPage = "wwwroot\\index.html";
blazorWebView1.Services = services.BuildServiceProvider();
blazorWebView1.RootComponents.Add<Counter>("#app");

Note

InitializeComponent メソッドは、アプリのビルド時に自動的に生成され、呼び出しクラスのコンパイル オブジェクトに追加されます。

Form1.csファイルスコープ名前空間がある、最終的な、完全な の C# コード:

using Microsoft.AspNetCore.Components.WebView.WindowsForms;
using Microsoft.Extensions.DependencyInjection;

namespace WinFormsBlazor;

public partial class Form1 : Form
{
    public Form1()
    {
        InitializeComponent();

        var services = new ServiceCollection();
        services.AddWindowsFormsBlazorWebView();
        blazorWebView1.HostPage = "wwwroot\\index.html";
        blazorWebView1.Services = services.BuildServiceProvider();
        blazorWebView1.RootComponents.Add<Counter>("#app");
    }
}

アプリを実行する

Visual Studio のツール バーの [開始] ボタンを選びます。

Visual Studio ツールバーの [開始] ボタン。

Windows で実行されているアプリ:

Windows で実行されているアプリ。

次のステップ

このチュートリアルでは、以下の内容を学習しました。

  • Windows フォーム Blazor アプリ プロジェクトを作成する
  • Windows でアプリで実行する

Blazor Hybrid アプリについてさらに学習してください。

ASP.NET Core Blazor Hybrid