🔥

WPFをベースにしたサイドビュー付きのBlazor Hybridアプリの構築方法

2024/01/07に公開

Blazor

WPF

tech

はじめに

WPF(Windows Presentation Foundation)をベースにしたBlazor Hybridアプリの構築方法はマイクロソフトの下記のサイトにて紹介されております。しかし、Visual StudioのBlazor Webassemblyで生成されるテンプレートにあるようなサイドビューが付いておりませんので、ここでご紹介いたします。

そもそも、なぜWPFベースで行うのか？

<一言でいえば、外部アプリケーションを制御したいから>

Blazor HybridはMAUIをベースにした方法が一般的ですが、外部のアプリケーション（例えば、3D CADソフトなど）の専用APIやSDKを使用した開発を行いたい場合に、WPFやWinFormsでないと対応できない場合が存在します。そのため、Blazorの機能を使用して外部アプリケーションを制御するソフトウェアの開発において、WPFをベースとした選択肢が求められると思います。
実は私自身、プログラミングより機械設計の方が専門であり、3D CADを扱うためのアドオンを開発するのにWPFベースのBlazor Hybridを活用しております。

構築方法の手順

構築は下記を条件とします。

開発環境　Visual Studio 2022 Community Edition
フレームワーク .NET8

以降の手順で説明するプロジェクトは下記のGitHubに公開しておりますので、ぜひご活用ください。

1. プロジェクトの作成

まず、Visual Studio 2022で"WPFアプリケーション"を選択します。

ここでは"BlazorTestApp"とします。

フレームワークは".NET8"を選択します。

2. Blazor WebView2のインストール

NuGetパッケージの管理から、"Microsoft.AspNetCore.Components.WebView.Wpf"をインストールします。

2. csprojファイルの編集

ソリューションエクスプローラで、"ソリューション"直下のプロジェクトファイルをダブルクリックします。
プロジェクトファイルのXMLの"Project"タグ内を<Project Sdk="Microsoft.NET.Sdk.Razor">と書き換えます。

3. MainWindow.xamlの編集

メインウィンドウにBlazorの機能を実装するためのコンポーネントを配置します。"MainWindow.xaml"内を下記のように編集します。

4. Blazorを実装するための基本razorファイルを追加

プロジェクトの直下に"_import.razor"と"AppMain.razor"を配置します。Blazor Webassembly等では根幹となるrazorファイルは"App.razor"ですが、WPFではすでに"App.xaml"が存在しているため"AppMain"とファイル名を変えております。

_import.razor

AppMain.razor

5. HTMLファイルとCSSファイルを追加

プロジェクト直下に"wwwroot"フォルダを作成します。
そのフォルダに"css"フォルダと"js"フォルダを追加します。

"css"フォルダにapp.cssファイルを追加しますが、これはBlazor Webassemblyのテンプレートで生成されるものを流用して編集して使用しております。
今回は私のGitHubにあるものを使用します。

"js"フォルダにapp.jsファイルを追加しておりますが、これは任意といたします。
今回の例ではHTMLエディタの機能を実装しているため、summernoteというOSSを動かすためのコードを記述しております。今回はapp.jsファイルは下記を使用いたします。

このセクションでは最後に"wwwroot"にindex.htmlを作成します。
ここでの注意点ですが、htmlファイル下層のスクリプトで必ず"<script src="_framework/blazor.webview.js"></script>"としてください。Blazor Webassemblyでは使用するjsファイル名が異なるため、それから流用すると正常に動作しません。

index.html