適用於 .NET UI 框架的簡潔下一代 C# 標記
C# Markup 2 支援多種 UI 框架,包括優秀的Uno Platform。
如果你不了解 Uno,我建議你去看看; Uno 是最好、最成熟的 .NET UI 框架之一,它提供了令人印象深刻的廣泛功能,當您需要端到端、快速地創建現實世界的生產應用程式時,這些功能將為您提供支持。
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,但最近也採用了 C# UI 和 Uno C# 標記。 C# 標記 2 新增了另一個選項,該選項超出了第 1 代 C# 標記變體提供的功能。
有選擇是件好事 - 每個人都贏了:開發人員獲得了他們最喜歡的體驗,並且 UI 框架獲得了更多的採用。檢查一下並選擇您喜歡的!
作為第一印象,這裡有一個快速的並排比較:
使用 C# Markup 2 享受類似 Flutter 的 UI 開發體驗:
new
、 HorizontalAlignment = HorizontalAlignment.Center
、 () =>
或nameof()
,不再指定對於每個TextBlock
綁定,是的,您想要綁定到Text
屬性...MyPage.cs
乾淨分離:不再需要在智慧感知清單中在大量不相關的選項中搜尋您感興趣的少數內容。查看標記API MyPage.cs
,在編輯MyPage.logic.cs
時查看 UI 框架和其他 API。不需要 XAML/HTML/JavaScript/CSS。沒有引擎或圖層會妨礙您。
努格特
聊聊(如果需要,請先加入DotNetEvolution)
提出問題或提供協助的最佳場所!
正在尋找 C# 標記 1?在這裡找到它
2024 年 5 月 7 日
適用於 Uno Platform 5.2 的新 C# 標記 2.4,包括 .NET 單一項目
今天的版本已全面更新至 Uno 5.2,包括 Uno 的 .NET 單一專案和uno.sdk
!
加:
dotnet new unoapp
模板的支持2023 年 12 月 21 日
適用於 Uno Platform 5 的新 C# 標記 2 模板
除了一些新的 C# Markup 2 方法之外,今天的版本還增加了對 Uno Platform 5 的新 C# Markup 2 模板的支援:更新的mcs-uno-markup2
模板和新的mcs-uno-view
模板。
dotnet new unoapp
模板創建還是使用 Visual Studio 的 Uno 解決方案嚮導創建mcs-uno-view
模板由方便的New-View.ps1
腳本使用,該腳本包含在mcs-uno-markup2
中2023 年 11 月 18 日
2.3 版本為 GA - 增加了對 .NET 8、Uno 5 和 5 個 Uno 函式庫的支援!
此版本已完全更新至出色的Uno 5版本和 .NET 8 GA。您可以使用Visual Studio 的 Uno 解決方案精靈並隨時透過一個命令在其中新增 C# Markup 2 專案。支援所有 Uno 精靈自訂:將 C# 標記 2 與 MVUX 或 MVVM、XAML 或 Uno C# 標記結合、使用 Uno 導覽擴充以及目標 .NET 8 或 .NET 7。
全新的dotnet 新C# Markup 2 專案範本可讓您立即上手- 精心優化以獲得最佳開發人員體驗:整潔的解決方案資源管理器視圖、標記和邏輯文件的自動文件分組、整潔的標記來源、集中的智慧感知、清晰的起點程式碼中的標記擴展,加上快速熱重載 - 既自動又在調試模式下覆蓋熱重載按鈕,適用於 IDE 可以熱重載但無法(尚)自動更新 UI 的平台。
享受常規 C# Markup 2 改進,以及 5 個附加 Uno 函式庫的 C# Markup 2 API:
ThemeResource
均可在 C# 智慧感知中搜索,強型別類型入門指南是完全最新的。此儲存庫和本自述文件中的範例將很快更新以展示新功能。
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 日
投票結果出爐囉!而獲勝者是...
2023 年 3 月關於 C# Markup 2 下一步建構內容的投票結果已出爐!
一個令人驚訝的補充是回覆中要求 C# Markup 2 for Avalonia UI;它得到了很大的反響,一躍成為非常接近的第二名。
以下是投票結果,包括“其他”選項 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# 熱重載支援和 dotnet 新專案範本。
由 Applicita 帶給您
特別感謝 Applicita 讓此版本成為可能;看到一家公司以這種方式支持 OSS 真是令人鼓舞(Applicita 還開源了其他幾個有用的庫)
有關此版本新增內容的更多信息,請點擊此處。
2023 年 2 月 16 日
適用於 WinUI 3 和 Uno 平台的新版本 C# Markup 2 將於 2023 年 2 月發布
更新至.NET 7、C# 11 和最新的 Windows App SDK 和 Uno 平台。具有許多改進 - 包括 C# 熱重載支援和 dotnet 新專案模板。注意這個空間!
2022 年 4 月 14 日
新的 0.8 版本:新增了
ControlTemplate
支援和Style
改進!
請參閱此處和此處以獲取完整的改進列表
2022 年 2 月 15 日
新的 0.6 版本:新增了 WPF 和許多改進!
請參閱此處以獲取完整的改進列表
2021 年 11 月 30 日
C# 標籤 2 在 UNOCONF 2021 上發佈!
第一個預覽版面向 WinUI 3 和 Uno 平台(包括瀏覽器 WebAssembly),使用 C# 10 和 .NET 6。
請參閱 UNOCONF 2021 上的 C# Markup 2 公告:
Build()
、 Assign()
和Invoke()
整合。首先檢查你的開發環境是否準備好:
選擇現有的 Uno Platform 5.2 解決方案,或使用 Uno 平台範本精靈或 dotnet new unoapp 範本建立新解決方案。隨意選擇任何選項; C# Markup 2 在所有目標平台上完全支援 Uno 5.2 以及 .NET 8 或 .NET 7、MVUX 或 MVVM、XAML 或 Uno C# 標記。
安裝最新的 Modern.CSharp.Templates for dotnet new
以獲得適用於 Windows App SDK、Uno 平台等的模板
dotnet new install Modern.CSharp.Templates
要查看有關模板參數的幫助:
dotnet new mcs-uno-markup2 -h
將 C# Markup 2 專案新增至 Uno Platform 解決方案,例如:
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
專案中加入Presentation專案的引用
請注意,您可以使用dotnet new
的--name
參數來指定現有Uno 專案的名稱(如果該名稱與解決方案資料夾名稱不同)(在上面的範例中為UnoApp1
)。指定的名稱也將與新專案的.Presentation
後綴一起使用。
開啟或重新載入 Uno 解決方案,然後依照示範專案的Readme.md
中的步驟開始操作。
若要了解如何使用 C# Markup 2,請閱讀下面的功能描述。
有關更完整的範例,請參閱此儲存庫中的範例應用程式。
C# Markup 2 包含適用於現有 UI 框架的完整聲明式、流暢的 API。它幾乎顯示了每個佈局、視圖和屬性,包括附加屬性,並包含完整的內聯文檔,將每個標記幫助器/參數連結到底層 UI 物件/屬性的內聯文檔。
C# Markup 2 提供的豐富 UI 框架可以包含多達500 多種 UI 物件類型。例如版面、視圖和樣式,還有畫筆、豐富的文字元素、繪圖基元、轉換、動畫、視覺狀態等等。此外,C# 標記還為佈局、綁定、轉換器、模板等提供了強大而簡潔的便利 API 。
佈局、視圖、屬性和屬性值如下所示:
所有屬性都可以使用擴充方法來設定:在視圖類型或其基本類型上定義的屬性,以及附加屬性。
直接在視圖類型上定義的屬性也可以使用命名參數來設定:
這主要對於採用原始類型的屬性有用。
採用枚舉值的屬性具有擴充方法,因此枚舉名稱不必重複
(如TextAlignment: TextAlignment.Center
):
附加屬性名稱以定義類型加底線為前綴:
您可以在一次呼叫中為相同定義類型設定多個附加屬性值:
除此之外,某些視圖類型還可以使用最常用的參數進行方便的重載:
to
命名空間中為常見屬性值類型提供了隱式轉換器:
這些都是:
string
值的轉換器,由 UI 框架使用 TypeConverter 屬性指定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.
類型描述了支援的值和格式;特別是對於字串,這可以避免猜測。
樣式可以這樣分配:
並定義如下:
在 WPF 中,您可以綁定樣式設定器值(WinUI 3 不支援此功能):
DataTemplate
以Func
傳入:
ControlTemplate
可以這樣建立:
.BindTemplate()
方法可讓您將範本屬性綁定到模板化父級targetType
參數是可選的b
這裡是一個空值static UI_Button
欄位。在此範例中,它僅用於演示在編輯Button
的綁定表達式時獲取智慧感知的一種方法;詳細資訊請參閱結合力。以下是如何在隱式或顯式Style
中使用ControlTemplate
:
您可以使用枚舉來代替網格行和列的數字。這提高了可讀性,並讓您在新增/刪除/重新排序時無需手動重新編號行和列
包含速記助手作為標記助手常見組合的替代方案:
所有佈局都會忽略其children
中的null
值;這使得可以根據頁面(重新)建構時表達式的值來獲得條件視圖。
Spread
助手允許在children
清單中的特定位置插入可變數量的子項目(類似於 Flutter 提供的功能)。
由於 C# 10 CallerArgumentExpression 屬性,您不必使用字串或nameof()
來指定具有良好效能的綁定路徑。相反,您可以使用 C# 表達式並享受它們帶來的所有優點:完整的智慧感知、編譯器檢查、重新命名支援:
從上圖的智慧感知描述請注意, pathExpression
參數支援多種便捷的綁定語法,它允許:
viewmodel.path
|| (viewmodel expression).path
,其中path
可以包含.
例如:.Bind (vm.SelectedTweet)
綁定到“SelectedTweet”.Bind ((vm.SelectedTweet).Title)
綁定到“Title”.Bind ((vm.SelectedTweet).Author.Name)
綁定到“Author.Name”?
使用空值類型實例來享受 C# 的優點,而不需要物件實例,例如:.Bind (vm?.SelectedTweet?.Title)
綁定到“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.*
命名空間使用,但不包含 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...
按鈕)。現在,視圖和屬性的標記顏色將不再相同。