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

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

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

前提条件

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">
        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;
    }

次の 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 デザイナーが開いていない場合は、MainWindowMainWindow.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 コードを表示します。

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

using Microsoft.Extensions.DependencyInjection;

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

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

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
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();

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

アプリを実行する

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

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

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

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

次のステップ

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

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

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