C Sharpの基礎 - Blazorデスクトップ

提供：MochiuWiki : SUSE, EC, PCB
2024年12月29日 (日) 04:07時点におけるWiki (トーク | 投稿記録)による版 (→‎ユーザインターフェース)
ナビゲーションに移動 検索に移動

概要



クロスプラットフォーム .NET UIフレームワークの対応状況

Blazorは多くのプラットフォームで動作し、全てのプラットフォーム間で多くのソースコードを共有することが可能である。

フレームワーク 初公開 UI技術 Windows MacOS Linux Android iOS Web Assembly
(WASM)
.NET MAUI May 2022 XAML Yes Yes No Yes Yes No
Blazor Sep 2019 HTML + CSS Yes Yes Yes Yes Yes Yes
Avalonia Feb 2015 XAML Yes Yes Yes Yes Yes Experimental
Uno Platform Sep 2018 XAML Yes Yes Yes Yes Yes Yes
Xamarin.Forms May 2014 XAML Yes No No Yes Yes No


XamarinはMAUIに取って代わられており、MAUIはWebをサポートしていないため、Avalonia UI、Uno Platform、Blazorが選択肢に挙がる。

以前のBlazorは、WinForms / WPFのWebView2を使用したWASMとWindowsのみであった。
現在では、Maui Blazor Hybridがある。


Blazorプロジェクトの構造と分割パターン

  • 共有ライブラリ
  • コアクラス
    コアクラスを保持する<Project Sdk="Microsoft.NET.Sdk">型のOpenHabitTracker
  • Razoorファイル
    Razoorファイルを保持する<Project Sdk="Microsoft.NET.Sdk.Razor">型のOpenHabitTracker.Blazor


以下に示すように分割することにより、ロジックはUIから分離されて、Razorファイルには数行のC#コードが含まれるようになる。
C#のソースコードを.razor.csファイル (コードビハインドファイル) に記述するとエディタの動作が改善される。

また、C#のソースコードを別のライブラリに記述することもできる。

Razorコンポーネント / Razorページのみを共有ライブラリに配置して、
App.razor、_Imports.razor、MainLayout.razor、JsInterop.cs、jsInterop.js、app.cssは共有ライブラリに移動しない。

.csとindex.htmlを除く全てのファイルを共有ライブラリに移動することができる。
プラットフォーム固有の動作がある場合は、C#インターフェースで解決することができる。

全ての.cssと.jsファイルは共有ライブラリに格納することができ、
index.htmlの_content/OpenHabitTracker.Blazor/...のように、プラットフォーム固有のプロジェクトにインクルードすることができる。


フレームワークの選択

Windowsのみ

  • WinForms
  • WPF


Windows、Linux、MacOS

  • Photino Blazor
    コンパイルや起動が速い。
  • Electron.NET
    ElectronNET.APIで動作する。
    ただし、長いコンパイル時間、サイズの大きなビルドファイル、起動が遅い等のデメリットがある。
  • Chromely
    ただし、長いコンパイル時間、起動が遅い等のデメリットがある。
    また、2023年1月16日に開発停止している。


WASM、Windows、Linux、MacOS、iOS、Androidをサポートするには、少なくとも以下に示すものが必要となる。

  • Photino Blazor
  • Blazor WASM
  • Maui



ユーザインターフェース

Bootstrapを使用することにより、簡単にCSSを記述することができる。
テーマを実装する場合、BootswatchがBootstrap向けの26のテーマを提供している。

ライブラリ 仕様 公開日 説明
Blazorise Bootstrap、Bulma、AntDesign、Materialに対応 2019/6 Blazoriseは最も多くのコントロールがあり、C#の列挙型とクラスにCSSを抽象化している。
コミッタは、リクエストにも応えてくれやすい。
MudBlazor Material Designのコンポーネントを提供 2020/4
AntDesign Blazor Ant Designからインスピレーションを得たデザイン 2020/3
MatBlazor Material Designのコンポーネントを提供 2019/2
BlazorStrap Bootstrap 4 / 5をベースにした実装 2019/4
Blazor Bootstrap Bootstrap 5のコンポーネントを提供 2021/6


Blazorプロジェクトでは、使用頻度の高いアイコン群を以下に挙げる。

  • Font Awesomeアイコン
  • Google Fonts
  • 埋め込みフォントファイル
  • Bootstrapアイコン
    アイコンライブラリには、SVG、SVGスプライト、Webフォント等の2000種類以上のアイコンがある。
    https://icons.getbootstrap.com/
    インストールコマンド : npm install bootstrap-icons


全てのCSS、JS、フォントをプロジェクトに含めることにより、スループットは良くなる。
全てのリソースが含まれているため、アプリケーションのサイズが約2[MB]大きくなる。


「http://mochiuwiki.e2.valueserver.jp/index.php?title=C_Sharpの基礎_-_Blazorデスクトップ&oldid=12887」から取得