WPFとBlazorのハイブリッドで簡単なチャットアプリを作る

WPFとBlazorのハイブリッドで簡単なチャットアプリを作る

夜に4、5時間かけてWPF + Blazorのハイブリッドモード開発を学びました。なかなか良かったです。

最終更新 2022/10/28 1:09
沙漠尽头的狼
読了目安 2 分
カテゴリ
WPF Blazor
タグ
.NET C# Blazor WPF

皆さん、こんにちは。沙漠尽头的狼です。

今日、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つのコンテナで同じようなオブジェクトの依存性注入を処理する必要があるかもしれません。例えば、IEventAggregatorPrism ではデフォルトで注入されていますが、Razor で使用する場合は IServiceCollection にも注入する必要があります。

その他の点については後で追加します。今日は試しにやってみただけなので…

さらに探索

関連読書

その他の記事
同じカテゴリ / 同じタグ 2025/01/26

WPF カスタムXMLファイルによる国際化

この記事では、WPFプログラムでカスタムXMLファイルを使用して国際化を実現する方法について詳しく説明します。必要なNuGetパッケージのインストール、言語リストの動的取得、言語の動的切り替え、コードおよびXAMLインターフェースでの翻訳文字列の使用などを含み、ソースコードのリンクも提供し、開発者がWPFアプリケーションの国際化を簡単に実装できるように支援します。

続きを読む