MAUI新生-XAML语法基础:语法入门Element&Property&Event&Command
一、XAML(MAUI的XAML)和HTML
- 两者相似,都是标签语言(也叫标记)组成的树形文档。每个标签元素,可视为一个对象,通过“键=值”形式的标签属性(Attribute),为对象的属性(Property)、事件等成员赋值。注,此处特别将Attribute和Proterty区别开来,两者虽都叫属性,但Attribute属于标签,Property属于对象,一部分Attribute与Proterty一一对应,但另一部分Attribute可能对应着对象的事件、命令等。
- 区别①,HTML的标签语言通过浏览器渲染为UI控件,而XAML先要通过编译器转为中间代码,并与后台C#代码合并,然后通过MAUI映射为Native对象,再由本机渲染为UI控件。ps:如果MAUI编译为安卓平台,Native对象就指安卓平台的原生对象,本机就指安桌平台。
- 区别②,XAML有后台的cs文件,除了使用XAML标签,还可以通过等效C#代码来创建对象,可以看到文档对象的本质。
- PS:元素是语言层面的概念,控件是UI层面的概念,大多数时候,可以认为是在指代同一个东西。以下案例中出现的元素/控件分别为:Button-按钮,Lable-单行或多行文本,StackLayout-水平或垂直排列布局,Grid-行列布局,ContentPage-内容页面
二、XAML的元素和属性

三、属性的赋值方式

1、字符串赋值:值类型属性可以直接通过字符串赋值。部分复杂类型,也能通过内置转换器,将字符串自动转换为对象类型
2、元素属性:属性为复杂的对象类型时,可以通过元素属性的方式赋值(也叫属性元素),即以元素的形式来表达属性
3、扩展标记:通过扩展标记(大括号),属性的值可以引用其它源的值或对象。其中数据绑定Binding是扩展标记之一。
四、内容属性和子元素

1、ContentPage属于页面类控件,其内容属性为Content,只能有一个子元素,所以一般页面类控件的子元素使用布局类控件。
2、StackLayout属于布局类控件,其内容属性为Children,是一个集合类型,可以放置多个子元素。
五、附加属性

1、上例中属性Grid.Row和Grid.Column,在Label元素上使用,但它们属于Grid。
2、在等效的c#代码中,设置子元素所在行列,表现为调用Grid的两个静态方法,参数为子元素和行列
3、附加属性属于可绑定属性,将在后续章节中深入学习其实现原理。
六、根元素和多页面

1、MAUI是传统的多页面应用,区别于目前流行的单页面应用(如React、Vue等),页面的组织、导航、状态管理等,都更加直白简单。
2、每个页面,都必须要有一个根元素,代表当前页面的类型,目前有ContentPage、FlyoutPage、NavigationPage、TabbedPage等几种页面类型。
3、每个页面,在C#层面,本质是由开发者定义的类,由xaml定义的部分类和后台代码定义的部分类组成。根元素指定了这个类的父类类型,x:Class指定了这个类的名称。
4、属性xmlns和xmlns:x,引用命名空间,相当于using。属性值像一个网址,但和网址没有关系,可以认为是多个命名空间的集合。每个页面可以有一个默认的xmlns,这个命名空间下的类型可以直接引用,如上例中的xmlns属性,引用了maui的所有控件类型,所以可以直接使用控件,而不需要前缀。而xmlns:x,引用了xaml命名空间,使用了别命x,使用时需要加前缀x:使用,如x:Class。
5、上例中的两个命名空间默认引入,其中xmlns:x称之为x命名空间,这个命名空间比较特殊,与XAML编译器相关,规定了编译器在将XAML标签语言编译为C#中间语言时的一些特定行为。比如上例中的x:Class,就指示编译器在编译这个类时,编译为类名为MainPage的部分类。(MauiApp6.MainPage为类的全路径名称)。
七、事件和命令

1、事件和命令,均提供了用户与UI的交互功能。
2、事件为传统的事件响应机制,响应事件的方法,写在当前页面的后台代码文件中。如当前面页为MainPage.xmal,后台文件为MainPage.xaml.cs。
3、命令属于MVVM模式,我们使用MVVM开发模式后,基本就很少在后台文件中写代码,后续详述。
MAUI新生-XAML语法基础:语法入门Element&Property&Event&Command的更多相关文章
- Lua脚本之语法基础快速入门
要 1.基本数据类型 2.Lua中的常用语句结构以及函数 3.Lua中的常用语句结构介绍 4.Lua中的库函数 目录[-] 一.基本数据类型 二.Lua中的常用语句结构以及函数 1.Lua中的常用语句 ...
- jQuery安装和基础语法
1.安装 从 jquery.com 下载 jQuery 库 <script src="jquery-1.10.2.min.js"></script> 从 C ...
- js进阶 10-2 JQuery基础语法是什么
js进阶 10-2 JQuery基础语法是什么 一.总结 一句话总结: 1.jquery语法超级简单:基础语法是:$(selector).action() 2.jquery选择的时候是带了引号的,肯定 ...
- Python入门篇-基础语法
Python入门篇-基础语法 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.编程基础 1>.程序 一组能让计算机识别和执行的指令. 程序 >.算法+ 数据结构= 程 ...
- Objective-C基础语法快速入门
Objective-C基础语法快速入门 2010-11-04 16:32 折酷吧 zheku8 字号:T | T 假如我们对面向对象的思维已经C语言都很熟悉的话,对于我们学习Objective-C将会 ...
- Swift语法基础入门三(函数, 闭包)
Swift语法基础入门三(函数, 闭包) 函数: 函数是用来完成特定任务的独立的代码块.你给一个函数起一个合适的名字,用来标识函数做什么,并且当函数需要执行的时候,这个名字会被用于“调用”函数 格式: ...
- Swift语法基础入门四(构造函数, 懒加载)
Swift语法基础入门四(构造函数, 懒加载) 存储属性 具备存储功能, 和OC中普通属性一样 // Swfit要求我们在创建对象时必须给所有的属性初始化 // 如果没办法保证在构造方法中初始化属性, ...
- Swift语法基础入门二(数组, 字典, 字符串)
Swift语法基础入门二(数组, 字典, 字符串) 数组(有序数据的集) *格式 : [] / Int / Array() let 不可变数组 var 可变数组 注意: 不需要改变集合的时候创建不可变 ...
- Java基础语法入门01
Java基础语法入门01 学习java你要先进行去了解JDK,JRE,JVM JDK Java开发工具包 JRE Java语言开发的运行环境 JVM Java虚拟机,用于Java语言的跨平台所用. 当 ...
随机推荐
- 获取Windows正在运行的窗口进程
主要是获取Alt+Tab中展示的窗口 原理主要是获取窗口的样式来判断是否会在Alt+Tab中显示 具体代码如下 /// <summary> /// Alt+Tab 应用 /// </ ...
- 第六十七篇:Vue的计算属性
好家伙, 1.什么是计算属性? 首先它是一种属性,其次他有计算这个特殊的性质, 它是一个依赖于其他属性的属性,当依赖的属性发生变化的时候就会触发我们计算属性的逻辑 它会对这个属性进行计算, 所以说它是 ...
- 第四十三篇:Git知识(基本理论)
好家伙,最近准备考试,有点忙 首先从版本控制开始 1.版本控制(版本迭代,新的版本) 如果一个项目由多个人去开发,那么总会需要去管理版本 你更一点,我更一点,一冲突,这个项目就炸了 所以需要版本控制. ...
- KingbaseES V8R6集群维护之--修改数据库服务端口案例
案例说明: 对于KingbaseES数据库单实例环境,只需要修改kingbase.conf文件的'port'参数即可,但是对于KingbaseES V8R6集群中涉及到多个配置文件的修改,并且在应 ...
- PostgreSQL 大对象导出报错问题分析
1.前言 在处理用户问题过程遇到一个问题.用户通过pg_dump导出 bytea 对象时,当行的大小超过 1G时,会报错: [v8r6c5b41@dbhost01 ~]$ sys_dump -t t1 ...
- Centos7新增静态路由
文章转载自:https://blog.51cto.com/loong576/2417561 环境说明: 一.临时方式 1. 查看路由和ip [root@centos7 ~]# route -n Ker ...
- 第四章:Django表单 - 3:Django表单字段汇总
Field.clean(value)[source] 虽然表单字段的Field类主要使用在Form类中,但也可以直接实例化它们来使用,以便更好地了解它们是如何工作的.每个Field的实例都有一个cle ...
- Elasticsearch:Node 介绍 - 7.9 之后版本
文章转载自:https://elasticstack.blog.csdn.net/article/details/110947372 在 Elastic Stack 7.9 之后的发布中,我们可以直接 ...
- 3_Nginx
一. Nginx介绍 1.1 引言 为什么要学Nginx 问题1: 客户端到底要将请求发送给哪台服务器 问题2: 如果所有客户端的请求都发送给了服务器1 问题2: 客户端发送的请求可能是申请动态资源的 ...
- PHP全栈开发(四): HTML 学习(2. div 布局)
无序列表,有序列表,自定义列表 无序列表是ul表示,每个元素用li表示 有序列表是ol表示,每个元素用li表示 <ul> <li>首页</li><li> ...