MAUI新生1.8-XAML语法基础：Markup语法及CommunityTookit简介

一、什么是Markup语法

XAML可以使用等效的C#后台代码，即可以用C#写UI。但是，C#代码还稍显繁琐，所以在C#代码基础上，由CommutityToolkit提供了Markup扩展包，可以使用更加流畅的C#语法来写UI。通过如下案例来对比一下三者差异：

<!--XAML-->
<ContentPage
    ......>

    <VerticalStackLayout>
        <Label x:Name="label" Text="HelloWorld" TextColor="AliceBlue"/>
        <Button Text="点击修改为中文问好" Clicked="Button_Clicked"/>
    </VerticalStackLayout>

</ContentPage>

//后台代码增加事件响应方法
private void Button_Clicked(object sender, EventArgs e)
{
    label.Text = "你好，世界";
}

//等效的C#代码
public partial class MainPage : ContentPage
{
    public MainPage()
    {
        var lable = new Label { Text = "HelloWorld", TextColor = Colors.AliceBlue };
        var button = new Button { Text = "点击修改为中文问好" };
        button.Clicked += (s, e) => { lable.Text = "你好世界"; };
        Content = new VerticalStackLayout { 
        
            Children = {lable,button}
        };  
    }
}

//等效的Markup语法
//不需要定义partial类，MainPage直接改名为MainPage.cs
public class MainPage : ContentPage
{
    public MainPage()
    {
        var label = new Label().Text("HelloWorld").TextColor(Colors.Red);
        Content = new VerticalStackLayout
        {
            Children =
            {
                label,
                new Button()
                    .Text("点击修改为中文问好")
                    .Invoke(button=>button.Clicked+=(s,e)=>{label.Text = "你好世界"; })
            }
        };
    }
}

//目前Markup语法还不完善，有诸多限制，另外很多属性还无法使用点语法，如BackgroundColor等
//上例的理想写法应该如下，但目前不支持：
public class MainPage : ContentPage
{
    public MainPage()
    {
        Content = new VerticalStackLayout
        {
            Children =
            {
                new Label()
                    .Name("label")
                    .Text("HelloWorld")
                    .TextColor(Colors.Red),

                new Button()
                    .Text("点击修改为中文问好")
                    .Clicked((s,e)=>{label.Text = "你好世界";})
            }
        };
    }
}

PS：使用Markup，要先安装Nuget包CommunityToolkit.Markup，然后在MauiProgram.cs中安装中间件【builder.UseMauiCommunityToolkit();】

 

 

 

三、Markup语法的优点和限制

1、优点

• 可以使用更加流畅的C#语法来写UI，特别是对XAML没感觉的同学，会很喜欢
• 大多数情况下，C#语法的表达，比XAML更简洁
• C#支持更好的重构，如重命名，而XAML这方面有限制，改一个类名时，还需要在XAML文件中进行修改
• C#加载UI，在XAML编译默认开启情况下，性能还会好一丢丢，但如果XAML Compiler不开启，将好很多
• 比较像Flutter或ArkUI了，这算优点吗？

 

2、限制

• Markup目前还是微软社区工具包CommunityToolkit的组成部分，算是半官方，未完成转正
• Markup还处于发展阶段，还存在储多限制和缺漏，无法完全替代XAML，还需时日静待花开
• Markup是否能够支持现代前端框架的几个重要特征：如声明式状态管理、更方便的逻辑判断和循环控制（if/for）等，还不好说

 

3、结论：目前MAUI框架，XAML还是最好选择，虽然繁琐一点，但功能完备、成熟、灵活，且树形文档结构比Markup更好读（个人观点）

 

 

三、CommunityToolkit究竟是啥：CommunityToolkit是.NET技术栈的社区工具包，对MAUI来说，这个工具包里面有三个库特别重要：

• CommunityToolkit.Maui：提供了Views/控件、Extensions/扩展、Converters/转换器、Behaviors/行为、Animations/动画、Alerts/弹窗等扩展支持
• CommunityToolkit.Mvvm：提供MVVM开发模式的支持，这个库在CommunityToolkit>dotnet名下，因为MVVM多个dotnet框架都可以使用
• CommunityToolkit.Markup：提供Markup语法支持