C Sharpの基礎 - Blazorデスクトップのソースを表示

== 概要 ==
<br><br>

== クロスプラットフォーム .NET UIフレームワークの対応状況 ==
Blazorは多くのプラットフォームで動作し、全てのプラットフォーム間で多くのソースコードを共有することが可能である。<br>
<br>
<center>
{| class="wikitable" | style="background-color:#fefefe; table-layout: fixed; width: 100%; table-layout: fixed; width: 75%; margin: 0 auto;"
|-
! style="background-color:#66CCFF; width: 11%;" | フレームワーク 
! style="background-color:#66CCFF; width: 11%;" | 初公開 
! style="background-color:#66CCFF; width: 11%;" | UI技術 
! style="background-color:#66CCFF; width: 11%;" | Windows 
! style="background-color:#66CCFF; width: 11%;" | MacOS 
! style="background-color:#66CCFF; width: 11%;" | Linux 
! style="background-color:#66CCFF; width: 11%;" | Android 
! style="background-color:#66CCFF; width: 11%;" | iOS
! style="background-color:#66CCFF; width: 12%;" | Web Assembly<br>(WASM)
|-
| style="text-align: center;" | .NET MAUI || style="text-align: center;" | May 2022 || style="text-align: center;" | XAML || style="text-align: center;" | Yes || style="text-align: center;" | Yes || style="text-align: center;" | No || style="text-align: center;" | Yes || style="text-align: center;" | Yes || style="text-align: center;" | No
|-
| style="text-align: center;" | Blazor || style="text-align: center;" | Sep 2019 || style="text-align: center;" | HTML + CSS || style="text-align: center;" | Yes || style="text-align: center;" | Yes || style="text-align: center;" | Yes || style="text-align: center;" | Yes || style="text-align: center;" | Yes || style="text-align: center;" | Yes
|-
| style="text-align: center;" | Avalonia || style="text-align: center;" | Feb 2015 || style="text-align: center;" | XAML || style="text-align: center;" | Yes || style="text-align: center;" | Yes || style="text-align: center;" | Yes || style="text-align: center;" | Yes || style="text-align: center;" | Yes || style="text-align: center;" | Experimental
|-
| style="text-align: center;" | Uno Platform || style="text-align: center;" | Sep 2018 || style="text-align: center;" | XAML || style="text-align: center;" | Yes || style="text-align: center;" | Yes || style="text-align: center;" | Yes || style="text-align: center;" | Yes || style="text-align: center;" | Yes || style="text-align: center;" | Yes
|-
| style="text-align: center;" | Xamarin.Forms || style="text-align: center;" | May 2014 || style="text-align: center;" | XAML || style="text-align: center;" | Yes || style="text-align: center;" | No || style="text-align: center;" | No || style="text-align: center;" | Yes || style="text-align: center;" | Yes || style="text-align: center;" | No
|}
</center>
<br>
XamarinはMAUIに取って代わられており、MAUIはWebをサポートしていないため、Avalonia UI、Uno Platform、Blazorが選択肢に挙がる。<br>
<br>
以前のBlazorは、WinForms / WPFのWebView2を使用したWASMとWindowsのみであった。<br>
現在では、Maui Blazor Hybridがある。<br>
<br><br>

== Blazorプロジェクトの構造と分割パターン ==
* 共有ライブラリ
* コアクラス
*: コアクラスを保持する<code><Project Sdk="Microsoft.NET.Sdk"></code>型の<code>OpenHabitTracker</code>
* Razoorファイル
*: Razoorファイルを保持する<code><Project Sdk="Microsoft.NET.Sdk.Razor"></code>型の<code>OpenHabitTracker.Blazor</code>
<br>
以下に示すように分割することにより、ロジックはUIから分離されて、Razorファイルには数行のC#コードが含まれるようになる。<br>
C#のソースコードを.razor.csファイル (コードビハインドファイル) に記述するとエディタの動作が改善される。<br>
<br>
また、C#のソースコードを別のライブラリに記述することもできる。<br>
<br>
Razorコンポーネント / Razorページのみを共有ライブラリに配置して、<br>
App.razor、_Imports.razor、MainLayout.razor、JsInterop.cs、jsInterop.js、app.cssは共有ライブラリに移動しない。<br>
<br>
.csとindex.htmlを除く全てのファイルを共有ライブラリに移動することができる。<br>
プラットフォーム固有の動作がある場合は、C#インターフェースで解決することができる。<br>
<br>
全ての.cssと.jsファイルは共有ライブラリに格納することができ、<br>
index.htmlの_content/OpenHabitTracker.Blazor/...のように、プラットフォーム固有のプロジェクトにインクルードすることができる。<br>
<br><br>

== フレームワークの選択 ==
==== Windowsのみ ====
* WinForms
* WPF
<br>
==== Windows、Linux、MacOS ====
* Photino Blazor
*: コンパイルや起動が速い。
* Electron.NET
*: ElectronNET.APIで動作する。
*: ただし、長いコンパイル時間、サイズの大きなビルドファイル、起動が遅い等のデメリットがある。
* Chromely
*: ただし、長いコンパイル時間、起動が遅い等のデメリットがある。
*: また、2023年1月16日に開発停止している。
<br>
WASM、Windows、Linux、MacOS、iOS、Androidをサポートするには、少なくとも以下に示すものが必要となる。<br>
* Photino Blazor
* Blazor WASM
* Maui
<br><br>

== ユーザインターフェース ==
Bootstrapを使用することにより、簡単にCSSを記述することができる。<br>
テーマを実装する場合、BootswatchがBootstrap向けの26のテーマを提供している。<br>
<br>
<center>
{| class="wikitable" | style="background-color:#fefefe; table-layout: fixed; width: 100%; table-layout: fixed; width: 70%; margin: 0 auto;"
! style="background-color:#66CCFF; width: 20%;" | ライブラリ
! style="background-color:#66CCFF; width: 30%;" | 仕様
! style="background-color:#66CCFF; width: 20%;" | 公開日
! style="background-color:#66CCFF; width: 30%;" | 説明
|-
| [https://blazorise.com/ Blazorise]
| Bootstrap、Bulma、AntDesign、Materialに対応
| 2019/6
| Blazoriseは最も多くのコントロールがあり、C#の列挙型とクラスにCSSを抽象化している。<br>コミッタは、リクエストにも応えてくれやすい。
|-
| [https://mudblazor.com/ MudBlazor]
| Material Designのコンポーネントを提供
| 2020/4
| 
|-
| [https://antblazor.com/ AntDesign Blazor]
| Ant Designからインスピレーションを得たデザイン
| 2020/3
| 
|-
| [https://www.matblazor.com/ MatBlazor]
| Material Designのコンポーネントを提供
| 2019/2
| 
|-
| [https://blazorstrap.io/ BlazorStrap]
| Bootstrap 4 / 5をベースにした実装
| 2019/4
| 
|-
| [https://docs.blazorbootstrap.com/ Blazor Bootstrap]
| Bootstrap 5のコンポーネントを提供
| 2021/6
| 
|}
</center>
<br>
Blazorプロジェクトでは、使用頻度の高いアイコン群を以下に挙げる。<br>
* Font Awesomeアイコン
* Google Fonts
* 埋め込みフォントファイル
* Bootstrapアイコン
*: アイコンライブラリには、SVG、SVGスプライト、Webフォント等の2000種類以上のアイコンがある。
*: https://icons.getbootstrap.com/
*: インストールコマンド : <code>npm install bootstrap-icons</code>
<br>
全てのCSS、JS、フォントをプロジェクトに含めることにより、スループットは良くなる。<br>
全てのリソースが含まれているため、アプリケーションのサイズが約2[MB]大きくなる。<br>
<br><br>


{{#seo:
|title={{PAGENAME}} : Exploring Electronics and SUSE Linux | MochiuWiki
|keywords=MochiuWiki,Mochiu,Wiki,Mochiu Wiki,Electric Circuit,Electric,pcb,Mathematics,AVR,TI,STMicro,AVR,ATmega,MSP430,STM,Arduino,Xilinx,FPGA,Verilog,HDL,PinePhone,Pine Phone,Raspberry,Raspberry Pi,C,C++,C#,Qt,Qml,MFC,Shell,Bash,Zsh,Fish,SUSE,SLE,Suse Enterprise,Suse Linux,openSUSE,open SUSE,Leap,Linux,uCLnux,Podman,電気回路,電子回路,基板,プリント基板
|description={{PAGENAME}} - 電子回路とSUSE Linuxに関する情報 | This page is {{PAGENAME}} in our wiki about electronic circuits and SUSE Linux
|image=/resources/assets/MochiuLogo_Single_Blue.png
}}

__FORCETOC__
[[カテゴリ:C_Sharp]]