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. Python3 pymsyql 连接读取数据

    import pymysql conn = pymysql.connect(host='localhost', port=3306, user='root', passwd='root', db='t ...

  2. 通过源码编译安装VIM

    开发中使用的是Ubuntu 12.04 LTS,通过sudo apt-get install vim安装的版本较低,不支持YCM,所以,用源码编译并安装最新的Vim. 卸载旧版本的Vim: sudo ...

  3. [译]The Python Tutorial#5. Data Structures

    [译]The Python Tutorial#Data Structures 5.1 Data Structures 本章节详细介绍之前介绍过的一些内容,并且也会介绍一些新的内容. 5.1 More ...

  4. matplotlib学习记录 五

    # 绘制电影票房竖条形图 from matplotlib import pyplot as plt a = ["战狼2","速度与激情8","功夫瑜伽 ...

  5. python学习-- 默认urls中 Path converter

    默认Path converter Django2.0自带的PathConveter包括: str:匹配除了路径分隔符(/)之外的非空字符串,如果没有转换器,默认使用str作为转换器. int:匹配0及 ...

  6. [python学习篇][廖雪峰][1]高级特性 ---迭代

    由于字符串也是可迭代对象,因此,也可以作用于for循环: >>> for ch in 'ABC': ... print ch ... A B C 所以,当我们使用for循环时,只要作 ...

  7. 紫书第三章训练1 D - Crossword Answers

    A crossword puzzle consists of a rectangular grid of black and white squares and two lists of defini ...

  8. request.getHeader("referer")

    在开发web程序的时候,有时我们需要得到用户是从什么页面连过来的,这就用到了referer. 它是http协议,所以任何能开发web程序的语言都可以实现,比如jsp中是: request.getHea ...

  9. CCF第四题无向图打印路径 欧拉问题

    #include<iostream> #include<vector> #include<algorithm> #include<stack> #def ...

  10. linux下Apache+Svn环境搭建(五)

    在搭建之前先准备好如下包,建议去apache官网去下载:http://httpd.apache.org/ apr-1.4.6.tar.gzapr-util-1.4.1.tar.gzhttpd-2.2. ...