Windows Presentation Foundation (WPF) の Blazor アプリを構築する

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

注意

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

重要

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

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

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

WPF Blazor アプリプロジェクトを作成する
Razor コンポーネントをプロジェクトに追加する
Windows でアプリで実行する

前提条件

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

Visual Studio のワークロード

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

Visual Studio インストーラーのワークロードの選択項目。

WPF Blazor プロジェクトを作成する

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

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

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

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

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

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

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

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

WPF プロジェクトの [追加情報] ダイアログ。

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

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

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

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

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

プロジェクトファイルの既存の <PropertyGroup> で、次のマークアップを追加してアプリのルート名前空間を設定します。これは、このチュートリアルでは WpfBlazor です。

<RootNamespace>WpfBlazor</RootNamespace>

注意

プロジェクトのルート名前空間の設定に関する上記のガイダンスは、一時的な回避策です。詳細については、[Blazor][Wpf] ルート名前空間関連の issue (dotnet/maui #5861) に関するページを参照してください。

プロジェクトファイル (WpfBlazor.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>WpfBlazor</title>
    <base href="/" />
    <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
    <link href="css/app.css" rel="stylesheet" />
    <link href="WpfBlazor.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) を保存します。

MainWindow デザイナーが開いていない場合は、MainWindowで MainWindow.xaml ファイルをダブルクリックして開きます。 MainWindow デザイナーで、XAML コードを次のように置き換えます。

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

ソリューションエクスプローラーで MainWindow.xaml を右クリックし、[コードの表示] を選びます。

MainWindow コードを表示します。

名前空間 Microsoft.Extensions.DependencyInjection を MainWindow.xaml.cs ファイルの先頭に追加します。

using Microsoft.Extensions.DependencyInjection;

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

var serviceCollection = new ServiceCollection();
serviceCollection.AddWpfBlazorWebView();
Resources.Add("services", serviceCollection.BuildServiceProvider());

Note

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

MainWindow.xaml.csファイルスコープ名前空間とコメントが削除された、最終的な、完全なの C# コード:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
using Microsoft.Extensions.DependencyInjection;

namespace WpfBlazor;

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();

        var serviceCollection = new ServiceCollection();
        serviceCollection.AddWpfBlazorWebView();
        Resources.Add("services", serviceCollection.BuildServiceProvider());
    }
}

アプリを実行する

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

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

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

次のステップ

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

WPF Blazor アプリプロジェクトを作成する
Razor コンポーネントをプロジェクトに追加する
Windows でアプリで実行する

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

ASP.NET Core Blazor Hybrid

Share via