.NET UI フレームワーク用の簡潔な次世代 C# マークアップ
C# Markup 2 は、優れたUno プラットフォームを含む複数の UI フレームワークをサポートします。
Uno を知らない場合は、ぜひチェックしてみてください。 Uno は、最高かつ最も成熟した .NET UI フレームワークの 1 つであり、実際の本番アプリをエンドツーエンドで高速に作成する必要がある場合に役立つ幅広い機能を提供します。
dotnet new install Uno.Templates
dotnet new install Modern.CSharp.Templates
md UnoCSharpMarkup2
cd UnoCSharpMarkup2
dotnet new unoapp -preset recommended
dotnet new mcs-uno-markup2 --presentation mvux --allow-scripts yes
Uno プラットフォームは XAML をサポートしていますが、最近では Uno C# マークアップを使用して C# UI も採用しています。 C# マークアップ 2 では、第 1 世代の C# マークアップ バリアントが提供するものをさらに上回る別のオプションが追加されています。
選択肢があるのは良いことです。誰もが得をします。開発者は自分が最も好むエクスペリエンスを得ることができ、UI フレームワークの採用が増えます。チェックして好きなものを選んでください!
第一印象として、簡単に並べて比較してみましょう。
C# Markup 2 を使用して、Flutter のような UI 開発エクスペリエンスをお楽しみください。
new
、 HorizontalAlignment = HorizontalAlignment.Center
、 () =>
またはnameof()
を無限に繰り返す必要がなく、指定する必要もありません。はい、 Text
プロパティにバインドしたいすべてのTextBlock
バインディングに対して...MyPage.cs
編集中にマークアップ API のみを表示します。 MyPage.cs
。 MyPage.logic.cs
の編集中に UI フレームワークとその他の API を参照してください。XAML / HTML / JavaScript / CSS は必要ありません。邪魔になるエンジンやレイヤーはありません。
NuGet
チャット (必要に応じて、最初に DotNetEvolution に参加してください)
質問したり助けたりするのに最適な場所です。
C# マークアップ 1 をお探しですか?ここで見つけてください
2024 年 5 月 7 日
Uno プラットフォーム 5.2 用の新しい C# マークアップ 2.4 (.NET 単一プロジェクトを含む)
本日のリリースは、Uno の .NET Single Project とuno.sdk
を含む Uno 5.2 に完全に更新されました。
プラス:
dotnet new unoapp
テンプレートのサポートを追加しました2023 年 12 月 21 日
Uno プラットフォーム 5 用の新しい C# マークアップ 2 テンプレート
いくつかの新しい C# Markup 2 メソッドに加えて、本日のリリースでは、Uno Platform 5 用の新しい C# Markup 2 テンプレート (更新されたmcs-uno-markup2
テンプレートと新しいmcs-uno-view
テンプレート) のサポートが追加されました。
dotnet new unoapp
テンプレートまたは Visual Studio 用の Uno ソリューション ウィザードを使用して作成されたかどうかにかかわらず、既存および新しい Uno ソリューションの両方で、改善されたスムーズな起動をお楽しみください。mcs-uno-view
テンプレートは、 mcs-uno-markup2
に含まれる便利なNew-View.ps1
スクリプトによって使用されます。2023 年 11 月 18 日
2.3 リリースは GA です - .NET 8、Uno 5 と 5 つの Uno ライブラリのサポートが追加されました。
このリリースは、素晴らしいUno 5リリースと .NET 8 GA に完全に更新されています。 Visual Studio の Uno Solution Wizard を使用すると、いつでも 1 つのコマンドで C# Markup 2 プロジェクトを追加できます。すべての Uno ウィザードのカスタマイズがサポートされています。C# マークアップ 2 と MVUX または MVVM、XAML または Uno C# マークアップの組み合わせ、Uno ナビゲーション拡張機能の使用、およびターゲット .NET 8 または .NET 7。すべての Uno ターゲット プラットフォームがサポートされています。
新しい dotnet の新しい C# Markup 2 プロジェクト テンプレートを使用すると、すぐに作業を開始できます。最適な開発者エクスペリエンスを実現するために慎重に最適化されています。整然としたソリューション エクスプローラー ビュー、マークアップとロジック ファイルの自動ファイル グループ化、整然としたマークアップ ソース、集中的なインテリセンス、明確な開始点コード内のマークアップ拡張機能に加えて、高速ホット リロード - IDE がホット リロードできるが (まだ) UI を自動的に更新できないプラットフォームの場合、自動およびデバッグ モードでのホット リロード ボタン オーバーレイを使用します。
一般的な C# Markup 2 の改善に加え、5 つの追加 Uno ライブラリ用の C# Markup 2 API をお楽しみください。
ThemeResource
は C# インテリセンスで検索可能で、厳密に型指定されています「はじめに」は完全に最新の状態です。このリポジトリとこの Readme の例は、新機能を紹介するために近々更新される予定です。
NJoy の簡潔なC# マークアップ!
2023 年 11 月 1 日
2.3 プレビュー リリースでは 5 つの Uno ライブラリが追加されました。
一般的な C# Markup 2 の改善に加え、5 つの追加 Uno ライブラリ用の C# Markup 2 API をお楽しみください。
ThemeResource
は C# インテリセンスで検索可能で、厳密に型指定されていますこれは今すぐ試すことができます。上記の NuGet を参照してください。新機能のドキュメントと新しい入門ガイドは、次のリリースに近日中に提供される予定です。
2023 年 6 月 27 日
2.2 .NET MAUIサポートのリリースと開始
2023 年 3 月 25 日
投票結果が出ました!そして優勝者は…
C# Markup 2 の次に何を構築するかに関する 2023 年 3 月のアンケート結果が出ました。
驚くべき追加は、返信で Avalonia UI 用の C# Markup 2 を求める要望でした。大きな反響を得て僅差の2位に浮上した。
「その他」オプションの Blazor や AvaloniaUI などのアンケートの結果は次のとおりです。
そして勝者はC# Markup 2 for MAUIです!
このリポジトリを見てスターを付けてリリースをキャッチしてください。 #CSharpForMarkup のツイートで進捗状況を確認することもできます。ご返答ありがとうございます!
2023 年 2 月 28 日
メジャー リリース - WinUI 3 用の C# Markup 2 バージョン 2.0!
WinUI 3 用の C# Markup 2 バージョン 2.0 が登場しました。 .NET 7、C# 11、最新の Windows App SDK および Uno プラットフォームに完全に更新されました。サポートされている 6 つのターゲット プラットフォーム、C# ホット リロードのサポート、ドットネットの新しいプロジェクト テンプレートなど、多くの改善が加えられています。
アプリシタがお届けします
このリリースを可能にしてくださった Applicita に心より感謝いたします。企業がこのように OSS をサポートしているのを見るのは刺激的です (Applicita は他にもいくつかの便利なライブラリをオープンソース化しています)
このリリースの新機能の詳細については、こちらをご覧ください。
2023 年 2 月 16 日
WinUI 3 および Uno プラットフォーム用の C# Markup 2 の新しいリリースは 2023 年 2 月に予定されています
.NET 7、C# 11、最新の Windows アプリ SDK および Uno プラットフォームに更新されました。 C# ホット リロードのサポートや dotnet の新しいプロジェクト テンプレートなど、多くの改善が加えられています。この空間に注目してください!
2022 年 4 月 14 日
新しい 0.8 リリース:
ControlTemplate
サポートとStyle
改善が追加されました。
改善点の完全なリストについては、こちらとこちらを参照してください。
2022 年 2 月 15 日
新しい 0.6 リリース: WPF と多くの改善点が追加されました。
改善点の完全なリストについては、ここを参照してください
2021年11月30日
C# Markup 2 が UNOCONF 2021 で発表されました!
この最初のプレビューは、C# 10 および .NET 6 を使用した WinUI 3 および Uno プラットフォーム (ブラウザー Web アセンブリを含む) をターゲットとしています。高速な内部開発ループのための .NET ホット リロードをサポートしています。
UNOCONF 2021 での C# Markup 2 の発表をご覧ください。
Build()
、 Assign()
、およびInvoke()
と統合されるかに注目してください。まず、開発環境の準備ができているかどうかを確認します。
既存の Uno Platform 5.2 ソリューションを選択するか、Uno Platform テンプレート ウィザードまたは dotnet new unoapp テンプレートを使用して新しいソリューションを作成します。任意のオプションを自由に選択してください。 C# Markup 2 は、すべてのターゲット プラットフォームで、.NET 8 または .NET 7、MVUX または MVVM、XAML または Uno C# Markup を備えた Uno 5.2 を完全にサポートします。
dotnet new
用の最新の Modern.CSharp.Templates をインストールして、Windows アプリ SDK、Uno プラットフォームなどのテンプレートを入手します
dotnet new install Modern.CSharp.Templates
テンプレートパラメータに関するヘルプを表示するには:
dotnet new mcs-uno-markup2 -h
C# Markup 2 プロジェクトを Uno プラットフォーム ソリューションに追加します。例:
cd C:ReposUnoApp1
dotnet new mcs-uno-markup2 --appRootNamespace InnoWvate.UnoApp1 --presentation mvux --allow-scripts Yes
これにより、次のことが行われます。
新しいプロジェクトUnoApp1.Presentation
ソリューションに追加し、実際の例を示します。
New-View.ps1
スクリプトReadme.md
プレゼンテーション プロジェクトは、C# マークアップ UI のベスト プラクティスに従って、保守性を考慮して事前に構造化されています。
NuGet パッケージ参照をプレゼンテーション プロジェクトに追加する
UnoApp1
プロジェクトのプレゼンテーション プロジェクトへの参照を追加します。
ソリューション フォルダー名 (上記の例ではUnoApp1
) と異なる場合は、 dotnet new
の--name
パラメーターを使用して、既存のUno プロジェクトの名前を指定できることに注意してください。指定した名前は、新しいプロジェクトでも.Presentation
サフィックスとともに使用されます。
Uno ソリューションを開くかリロードし、プレゼンテーション プロジェクトのReadme.md
の手順に従って開始します。
C# Markup 2 の使用方法については、以下の機能の説明をお読みください。
より完全な例については、このリポジトリのサンプル アプリを参照してください。
C# Markup 2 には、既存の UI フレームワーク用の完全な宣言的で滑らかな API が含まれています。これには、添付プロパティを含む事実上すべてのレイアウト、ビュー、プロパティが表示され、各マークアップ ヘルパー/パラメーターを基になる UI オブジェクト/プロパティのインライン ドキュメントにリンクする完全なインライン ドキュメントが含まれます。
C# Markup 2 が提供する豊富な UI フレームワークには、 500 以上の UI オブジェクト タイプを含めることができます。たとえば、レイアウト、ビュー、スタイルだけでなく、ブラシ、リッチ テキスト要素、描画プリミティブ、変換、アニメーション、視覚的状態なども含まれます。さらに、C# マークアップは、レイアウト、バインディング、コンバーター、テンプレートなどのための強力で簡潔な便利な API を提供します。
レイアウト、ビュー、プロパティ、およびプロパティ値は次のようになります。
すべてのプロパティは、ビュー タイプまたはその基本タイプで定義されたプロパティ、および添付プロパティなど、拡張メソッドを使用して設定できます。
ビュー タイプに直接定義されたプロパティは、名前付きパラメータを使用して設定することもできます。
これは主に、プリミティブ型を取るプロパティに役立ちます。
enum 値を受け取るプロパティには拡張メソッドがあるため、enum 名を繰り返す必要はありません
( TextAlignment: TextAlignment.Center
と同様):
添付プロパティ名には、定義タイプとアンダースコアが接頭辞として付けられます。
1 回の呼び出しで、同じ定義タイプに対して複数の添付プロパティ値を設定できます。
これに加えて、最も一般的に使用されるパラメータのみを備えた一部のビュー タイプ用の便利なオーバーロードがあります。
暗黙的なコンバーターは、一般的なプロパティ値タイプのto
サブ名前空間で提供されます。
これらは:
string
値を受け入れるすべてのコンバーターstring
以外の型も受け入れる追加の手動コンバーター。例えば: Button() .CornerRadius (2.5)
またはButton() .CornerRadius ((2.5, 0, 2.5, 0))
to.Point
を使用した例:
Button ( ) . Background ( RadialGradientBrush ( Center : ( 50 , 50 ) , GradientOrigin : ( 100 , 50 ) ) )
to.TimeSpan
とto.Duration
を使用した例:
ColorAnimation ( BeginTime : " 0:0:5 " , Duration : 2.5 )
多くの場合、インライン ドキュメントはto.
type はサポートされる値と形式を説明します。特に文字列の場合、これにより推測を避けることができます。
スタイルは次のように割り当てることができます。
そして次のように定義します。
WPF では、スタイル セッター値をバインドできます (WinUI 3 はこれをサポートしていません)。
DataTemplate
はFunc
として渡されます。
ControlTemplate
次のように作成できます。
.BindTemplate()
メソッドを使用すると、テンプレートのプロパティをテンプレート化された親にバインドできます。targetType
パラメータはオプションですb
ここは null 値のstatic UI_Button
フィールドです。この例では、 Button
のバインド式を編集するときにインテリセンスを取得する 1 つの方法を示すだけです。詳細については、「結合力」を参照してください。 ControlTemplate
暗黙的または明示的なStyle
で使用する方法は次のとおりです。
グリッドの行と列に数値の代わりに列挙型を使用できます。これにより読みやすさが向上し、行や列の追加、削除、並べ替えの際に手動で番号を付け直す手間が省けます。
短縮形ヘルパーは、マークアップ ヘルパーの一般的な組み合わせの代替として含まれています。
すべてのレイアウトは、 children
のnull
値を無視します。これにより、ページ (再) 構築時の式の値に応じて条件付きビューを持つことが可能になります。
Spread
ヘルパーを使用すると、 children
リストの特定の位置に可変数の子を挿入できます (Flutter が提供するものと同様)。
C# 10 の CallerArgumentExpression 属性のおかげで、文字列やnameof()
を使用してバインド パスを指定する必要がなく、優れたパフォーマンスが得られます。代わりに、C# 式を使用すると、完全なインテリセンス、コンパイラ チェック、名前変更サポートなど、C# 式がもたらす利点をすべて享受できます。
上の画像のインテリセンスの説明から、 pathExpression
パラメーターはいくつかの便利なバインディング構文をサポートしていることに注意してください。これにより、次のことが可能になります。
viewmodel.path
|| (viewmodel expression).path
。ここで、 path
には を含めることができます.
例えば:.Bind (vm.SelectedTweet)
は「SelectedTweet」にバインドします.Bind ((vm.SelectedTweet).Title)
「タイトル」にバインドします.Bind ((vm.SelectedTweet).Author.Name)
「Author.Name」にバインドします?
null 値の型インスタンスを使用すると、オブジェクト インスタンスを必要とせずに C# の利点を享受できます。例:.Bind (vm?.SelectedTweet?.Title)
「タイトル」にバインドします?
使用することに注意してください。式の値は気にしなくても、式は実行時に評価されるため、必要になる場合があります。 CallerArgumentExpression 属性は、式の値に加えて式文字列を提供します。.Bind ("SelectedTweet")
"SelectedTweet" にバインドしますpathExpression
内の周囲の"
、 @
または空白文字は無視されます
Bind
UI フレームワークがバインド用に提供するほぼすべての機能をサポートします。さらに、次のことを可能にするBind
オーバーロードが多数あります。
典型的なマークアップ ページは次のように始まります。
FlutterPage.cs
:
using CSharpMarkup . < UI framework name > ;
using static CSharpMarkup . < UI framework name > . Helpers ;
namespace Examples ;
partial class FlutterPage
{
public void Build ( ) => Content =
partial class
の使用に注意してください。これにより、UI マークアップをUI ロジックから分離できます。
FlutterPage.logic.cs
:
using < UI framework namespace > . Controls ;
namespace Examples ;
public sealed partial class FlutterPage : Page , IBuild
{
readonly FlutterViewModel vm ;
public FlutterPage ( )
{
InitializeComponent ( ) ; // Only needed for WinUI
DataContext = vm = < obtain viewmodel instance > ;
Build ( ) ;
重要:
のようなC# マークアップ ファイルの場合:
CSharpMarkup.*
名前空間の使用は含めますが、Microsoft.UI.Xaml の使用などのUI オブジェクトモデルの使用は含めませんusing Microsoft.UI.Xaml;
(設計上、CSharpMarkup 名前空間の型名は UI オブジェクトモデルの型名と同一であるため、両方を含めると曖昧さが生じます)
UI オブジェクト モデルの使用を UI ロジック ファイルに限定してください。必要に応じて、C# マークアップ ファイルで UI オブジェクト モデルを安全に使用できます。その場合、エイリアスを使用してグローバル名前空間を定義することをお勧めします。たとえば、 global using UI = Microsoft.UI;
などです。
詳細については、 dotnet new mcs-uno-markup2
で作成されたプロジェクトのGlobalUsings.cs
内のコメントを参照してください。
のようなUI ロジック ファイル:
CSharpMarkup
オブジェクトを使用しないでください
マークアップ オブジェクト インスタンスをマークアップ式の外で使用するのは安全ではありません (パフォーマンス機能のため、各マークアップ オブジェクト タイプには単一の静的インスタンスがあり、ビューごとに追加のオブジェクトが割り当てられるのを防ぎます)。このため、 Assign
とInvoke
(以下を参照) は、マークアップ オブジェクト自体ではなく、マークアップ オブジェクトに含まれる UI オブジェクトをロジックに渡します。
Assign
とInvoke
使用すると、UI マークアップを UI ロジックと統合できます。
SearchPage.cs
:
SearchPage.logic.cs
:
SearchPage.cs
:
SearchPage.logic.cs
:
注記:
SearchPage.cs
では、StackPanel
とTextBox
マークアップオブジェクト タイプですが、
SearchPage.logic.cs
では、対応するUI フレームワークオブジェクト タイプです。
マークアップを適切に色付けするための C# マークアップ IDE 拡張機能は (まだ...) ありませんが、Visual Studio オプションの次の回避策を使用すると、C# マークアップの読みやすさを向上させることができます。
Fonts and Colors
で、 User Types - Classes
の色をUser Members - Methods
( Custom...
ボタンを使用) にコピーします。ビューとプロパティのマークアップの色は同じではなくなります。