Xamarin XAML语言教程使用Visual Studio创建XAML

Xamarin.Forms允许开发人员通过XAML语法对程序的所有用户界面元素进行详细的定制,如文本、按钮、图像和列表框等。同时,开发者还可以借助它对整个界面进行合理化的布局。通过XAML来构建UI界面具有简洁、可视化等优点,非常适合MVVM的应用程序架构。本章将讲解关于XAML语言基础内容,其中包括XAML语言简介、创建XAML文件、XAML文件构成、元素构成等内容。

XAML语言简介

XAML是Extensible Application Markup Language的英文缩写,相应的中文名称为“可扩展应用程序标记语言”。它是微软公司为构建应用程序用户界面而创建的一种新的描述性语言。它基于Extensive Markup Language(XML)可扩展标记语言。XAML提供了一种便于扩展和定位的语法来定义和程序逻辑分离的用户界面,而这种实现方式和ASP.NET中的“代码后置”模型非常类似。XAML是一种解释性的语言,尽管它也可以被编译。它的优点是简化编程式上的用户创建过程,应用时要添加代码和配置等等。

创建XAML文件

在Xamarin.Forms中,XAML代码保存在XAML文件中。开发者在编写XAML代码时,首先需要创建对应的XAML文件。本节将讲解使用两种开发工具创建XAML文件,第一种是使用Visual Studio创建XAML;第二种是使用Xamarin Studio创建XAML。

使用Visual Studio创建XAML

使用Visual Studio创建XAML文件有两种方式。第一种是创建项目后再创建XAML文件,第二种是创建项目时创建XAML文件。下面对这两种方式详细介绍。

1.创建项目后再创建XAML文件

以下我们将以创建项目Hello为例,为开发者讲解创建PCL类型的项目后,再创建XAML文件的具体操作步骤:

(1)打开Visual Studio,如图1.1所示。

(2)单击“新建项目…”按钮,弹出“新建项目”界面,如图1.2所示。

 

图1.1  启动VS

(3)选择Cross-Plaform下的Blank App (Xamarin.Forms Portable) 模板,将名称、位置进行修改,这里我们将名称改为了Hello,将位置改为了D:\Code\XAML。

 

图1.2  “新建项目”界面

(4)单击“确定”按钮,此时就创建好了一个名称Hello的项目。

(5)右击Hello (可移植的) 项目,弹出快捷菜单,如图1.3所示。

 

图1.3  菜单

(6)在弹出的快捷菜单中选择“添加(D)”|“新建项(W)…”命令,弹出“添加新项 – Hello”界面,如图1.4所示。

 

图1.4  “添加新项 – Hello”界面

(7)选择Cross-Platform下的Forms Xaml Page项,并将名称改为XAMLPage.xaml。

注意:如果开发者不修改图1.4中的名称,默认为Page1.xaml。

(8)单击“添加(A)”按钮,此时一个XAML文件就创建好了,此文件的名称为XAMLPage,如图1.5所示。

 

图1.5  XAMLPage.xaml文件

注意:在此Xamarin版本中,还不支持基于Share类型项目创建XAML文件。

2.创建项目时创建XAML文件

在Visual Studio中,创建项目时创建XAML文件是一种最常用的方式,并且是最为简单的的方式。以下我们将以Hello为例,为开发者讲解创建项目时创建XAML文件的具体操作步骤:

(1)在计算机上找到Visual Studio,将其打开示。

(2)选择“新建项目…”按钮,弹出“新建项目”界面,如图1.6所示。

(3)选择Cross-Plaform下的Blank Xaml App (Xamarin.Forms Portable) 模板,将名称、位置进行修改,这里我们将名称改为了Hello,将位置改为了D:\Code\XAML。

 

图1.6  “新建项目”界面

(4)单击“确定”按钮,此时就创建好了一个名称Hello的项目。我们可以看到,在创建的项目中存在一个XAML文件,此文件的名称MainPage.xaml,如图1.7所示。

 

图1.7  MainPage.xaml文件

注意:如果开发者想要在此项目中再创建一个XAML文件,需要按照1.2.1小节中的步骤5到步骤7的方式操作。

Xamarin XAML语言教程使用Visual Studio创建XAML的更多相关文章

  1. Xamarin XAML语言教程使用Xamarin Studio创建XAML(二)

    Xamarin XAML语言教程使用Xamarin Studio创建XAML(二) 使用Xamarin Studio创建XAML Xamarin Studio和Visual Studio创建XAML文 ...

  2. Xamarin XAML语言教程将XAML设计的UI显示到界面

    Xamarin XAML语言教程将XAML设计的UI显示到界面 如果通过XAML将UI设计好以后,就可以将XAML中的内容显示给用户了,也就是显示到界面上.由于创建XAML文件方式的不同,所以将XAM ...

  3. Xamarin XAML语言教程基础语法篇大学霸

    Xamarin XAML语言教程基础语法篇大学霸 前  言 Xamarin是一个跨平台开发框架.它可以用来开发iOS.Android.Windows Phone和Mac的应用程序.使用Xamarin框 ...

  4. Xamarin XAML语言教程Visual Studio中实现XAML预览

    Xamarin XAML语言教程Visual Studio中实现XAML预览 每次通过编译运行的方式查看XAML文件效果,需要花费大量的时间.如果开发者使用XAML对UI进行布局和设计,可以通过预览的 ...

  5. Xamarin XAML语言教程基本视图ContentView

    Xamarin XAML语言教程基本视图ContentView 基本视图ContentView 视图是用来呈现具体内容,根据呈现内容不同,使用的视图也不同.其中,最常用的视图为ContentView视 ...

  6. Xamarin XAML语言教程基本页面ContentPage占用面积(二)

    Xamarin XAML语言教程基本页面ContentPage占用面积(二) Xamarin XAML语言教程基本页面ContentPage占用面积(二)内容页面的添加 为了方便用户添加Content ...

  7. Xamarin XAML语言教程XAML文件结构与解析XAML

    Xamarin XAML语言教程XAML文件结构与解析XAML XAML文件结构 在上文中,我们创建XAML文件后,会看到类似图1.16所示的结构 图1.16  结构 其中,.xaml文件和.xaml ...

  8. Xamarin XAML语言教程构建ControlTemplate控件模板

    Xamarin XAML语言教程构建ControlTemplate控件模板 控件模板ControlTemplate ControlTemplate是从Xamarin.Forms 2.1.0开始被引入的 ...

  9. Xamarin XAML语言教程ContentView视图作为自定义视图的父类

    Xamarin XAML语言教程ContentView视图作为自定义视图的父类 自定义视图的父类:ContentView视图可以作为自定义视图的父类. [示例14-2]以下将自定义一个颜色视图.具体的 ...

随机推荐

  1. SQL语句小练习

    一.创建如下表结构(t_book) Id         主键   自增一 bookName   可变长 20 Price   小数 Author    可变长20 bookTypeId    图书类 ...

  2. 用decimal模块增加python的浮点数精度

    浮点数python默认是17位精度,也就是小数点后16位(16位以后的全部四舍五入了),虽然有16位,但是这个精度越往后越不准. 如果有特殊需求,需要更多的精度,可以用decimal模块,通过更改其里 ...

  3. python之序列化

    什么叫序列化? 序列化是指把内存里的数据类型转变成字符串,以使其能存储到硬盘或通过网络传输到远程,因为硬盘或网络传输时只能接受bytes. 把字符转换成内存数据类型,叫反序列化. 为什么要序列化? 你 ...

  4. light oj 1104 Birthday Paradox (概率题)

    Sometimes some mathematical results are hard to believe. One of the common problems is the birthday ...

  5. [POJ 1001] Exponentiation C++解题报告 JAVA解题报告

        Exponentiation Time Limit: 500MS   Memory Limit: 10000K Total Submissions: 126980   Accepted: 30 ...

  6. 通用的前端js代码

    1.判断是否移动设备的浏览器,是否允许触摸事件.(响应式网页) if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i. ...

  7. 如何安装mongodb.msi

    到MongoDB官网下载MongoDB软件:mongodb-win32-x86_64-2008plus-ssl-3.0.2-signed.msi, 放在想要安装的地方: 如:d:\MongoDB\ 2 ...

  8. matlab 初级画图

    matlab 初级画图 1.plot() plot(x,y)   plots each vector pairs (x,y) 画图函数画出每个点   每组变量 plot (y)   plots eac ...

  9. RHEL 7.3修改网卡命名规则为ethX

    RHEL 7网卡默认命名规则:以太网卡(Ethernet)为enX,无线网卡(WLAN)为wlX,修改网卡命名规则为ethX如下: 1.修改/etc/sysconfig/grub文件,添加net.if ...

  10. JSON的使用_检查JSON工具

    json简单说就是javascript中的对象和数组. 1.对象:对象在js中表示为"{}"扩起来的内容,数据结构为 {key:value,key:value,...}的键值对的结 ...