适用于 .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。支持所有 Uno 目标平台。
全新的 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。它支持 .NET 热重载,以实现快速内部开发循环。
请参阅 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...
按钮)。现在,视图和属性的标记颜色将不再相同。