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

[アーティクル]
11/12/2024

注意

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

警告

このバージョンの ASP.NET Core はサポート対象から除外されました。詳細については、 .NET および .NET Core サポートポリシーを参照してください。現在のリリースについては、この記事の .NET 9 バージョンを参照してください。

重要

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

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

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

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

前提条件

サポートされているプラットフォーム (Windows フォームのドキュメント)
.NET デスクトップ開発ワークロードを利用する Visual Studio 2022

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 でバージョン管理されているため、ここで直接リンクを指定することはできません。ナビゲーションバーのリンクに従って、[ドキュメント]>[ダウンロード] をたどって bootstrap.min.css にアクセスします。

次の 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 によって自動的に 'blazorWebView1' という名前になります。

コントロールのプロパティで、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 のツールバーの [開始] ボタンを選びます。

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

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

次のステップ

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

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

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

ASP.NET Core Blazor Hybrid

次の方法で共有