皆さん、こんにちは。沙漠尽头的狼です。
今日、WPFとBlazorのハイブリッド開発を試してみました。なかなか良かったので、テストプログラムを簡単に共有します。WPFとBlazorのハイブリッド開発による簡易チャットプログラムです。
使用技術スタック:
WPF + Blazor プログラムの構築
WPF + Blazor ハイブリッド開発の Hello World を学ぶのに最適な場所は Microsoft のドキュメントです:
https://learn.microsoft.com/zh-cn/aspnet/core/blazor/hybrid/tutorials/wpf?view=aspnetcore-7.0
効果
UI には Masa Blazor を使用しました。個人的には良い感じだと思います。これを WPF で実現しようとするとかなり面倒です。以下はいくつかの効果のスクリーンショットです:
ユーザーリストウィンドウ
Masa Blazor のリストコンポーネントを使用しました。コードはほぼそのままコピーしたものです。参考リンク:Masa Blazor リスト:

チャットウィンドウ
これはシンプルです。左側はリストで、上のユーザーリストと似ていますが、上部の青色の MToolbar とユーザーの詳細説明が削除されています。右側はチャット履歴を表示する複数行テキストボックス、即時チャットメッセージを入力する単一行テキストボックス、送信ボタンです(簡単な説明でコードは省略、後ほどリポジトリリンクを記載します)。

子ウィンドウを開く
リストのクリックイベントで、IEventAggregator を使用して子ウィンドウを開くイベント OpenUserDialogEvent を送信します。イベント購読メソッドで子ウィンドウを開く操作を実行します:

メッセージ送信のデモ
送信ボタンをクリックすると、IEventAggregator を使用してメッセージ送信イベント SendMessageEvent を送信します。イベント購読メソッドでメッセージを受信し、それぞれの履歴チャット複数行テキストボックスに追加して表示します:

ソースコード
GitHub:https://github.com/dotnet9/WPFBlazorChat
効果は悪くないので、コードの説明は省きますが、興味があれば実際に動かしてみてください。現在、以下の点については後ほど時間があるときに最適化しようと考えています(もうすぐ午前2時なので):
カスタムウィンドウはまだWPF方式で実装しています
ウィンドウは透明、Borderのマウス押下イベントでウィンドウのドラッグ、右上の閉じるボタンでウィンドウを閉じるようにしています。後で余裕があればこれもRazorで実装してみようと思います。
Prism.DryIoc と IServiceCollection の2つのIoCコンテナでオブジェクトが重複登録される
ハイブリッド開発は簡単だと思っていましたが、実際にやってみると問題に直面します。モジュール化を実現する場合、2つのコンテナで同じようなオブジェクトの依存性注入を処理する必要があるかもしれません。例えば、
IEventAggregatorはPrismではデフォルトで注入されていますが、Razorで使用する場合はIServiceCollectionにも注入する必要があります。
その他の点については後で追加します。今日は試しにやってみただけなので…