首页 > 其他分享 >MAUI新生-XAML语法基础:语法入门Element&Property&Event&Command

MAUI新生-XAML语法基础:语法入门Element&Property&Event&Command

时间:2022-11-12 10:03:18浏览次数:50  
标签:控件 XAML 元素 Element 语法 MAUI 页面 属性

一、XAML(MAUI的XAML)和HTML

  1. 两者相似,都是标签语言(也叫标记)组成的树形文档。每个标签元素,可视为一个对象,通过“键=值”形式的标签属性(Attribute),为对象的属性(Property)、事件等成员赋值。注,此处特别将Attribute和Proterty区别开来,两者虽都叫属性,但Attribute属于标签,Property属于对象,一部分Attribute与Proterty一一对应,但另一部分Attribute可能对应着对象的事件、命令等。
  2. 区别①,HTML的标签语言通过浏览器渲染为UI控件,而XAML先要通过编译器转为中间代码,并与后台C#代码合并,然后通过MAUI映射为Native对象,再由本机渲染为UI控件。ps:如果MAUI编译为安卓平台,Native对象就指安卓平台的原生对象,本机就指安桌平台。
  3. 区别②,XAML有后台的cs文件,除了使用XAML标签,还可以通过等效C#代码来创建对象,可以看到文档对象的本质。
  4. 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开发模式后,基本就很少在后台文件中写代码,后续详述。

 

标签:控件,XAML,元素,Element,语法,MAUI,页面,属性
From: https://www.cnblogs.com/functionMC/p/16881260.html

相关文章

  • VUE3+Element Plus的el-input获取焦点
    <template><el-inputv-model="msg"id="inputbox"type="text"style="width:500px"/><el-button@click="handleGetFocus">获取焦点</el-button></tem......
  • Python语法糖之赋值表达式
    目录概述语法(海象运算符)为什么需要这个?避免重复写代码赋值表达式写法例子:连续输入命令行避免重复计算赋值表达式写法在推导式中应用例子:字典倒查本博客主要参考为北京大学......
  • Python语法糖之match-case
    目录概述基本语法和语义example1example2进阶用法如果在case写变量名只是为了不写if语句么?本博客主要参考为北京大学陈斌老师的下一站Python概述match-case是python3.1......
  • C温故补缺(六):C反汇编常用的AT&Tx86语法
    C语言反汇编用到的AT&Tx86汇编语法参考:CSDN1,CSDN2默认gcc-S汇编出的,以及反汇编出的,都是AT&Tx86代码,可以用-masm=intel指定为intelx86汇编格式gcc-Stest.c-m......
  • vue element 表单自定义效验 及 单独效验某个值
    主要功能 (表单自定义效验 && 单独效验某个值)表单自定义效验exportdefault{data(){//定义效验constvalidatePersonCharge=(rul......
  • element-ui 导入 相关
    <template><divclass="main-wrapper"><!--头部搜索等--><divclass="box-head"><el-formref="searchform":model="searchform":inline="true">......
  • 关于Element UI 弹窗 el-dialog__body 样式不起作用问题
     问题描述:修改ElementUI弹出对话框padding样式失效,直接.el-dialog__body内写样式根本不起作用,试了下网上的解决方案,最后还是用下面这种方法搞定了。弹窗:custom-c......
  • Photoshop Elements 2020 for Mac(图形处理工具)v18.0激活版
    Photoshop Elements2020简称ps elements2020,Photoshop Elements是一款非常实用的图形处理工具。pselements2020mac中文版可以帮助您自动生成照片和视频作品的功能,采......
  • 【Java】多线程 语法 使用
    在java中使用多线程有三种方式。1.继承Thread类;2.实现Runnable接口;3.匿名内部类;第一种一般不用,因为java只允许单继承,万一这个业务类有父类就无法继承了。第二种如下:publicc......
  • element ui的表格内容hover展示两行的写法
     使用之前去掉show-overflow-tooltip无法设置hover状态时的样式,改用el-tooltip<el-table-columnlabel="核心使用场景"min-width='300'><templatescope="s......