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. set 方法总结整理

    #!/usr/bin/env python __author__ = "lrtao2010" #Python 3.7.0 集合常用方法 #集合是无序的,元素不能重复,元素只能是数字 ...

  2. POJ:2109-Power of Cryptography(关于double的误差)

    Power of Cryptography Time Limit: 1000MS Memory Limit: 30000K Description Current work in cryptograp ...

  3. Linux学习-函式库管理

    动态与静态函式库 首先我们要知道的是,函式库的类型有哪些?依据函式库被使用的类型而分为两大类,分别是静态 (Static) 与动态 (Dynamic) 函式库两类. 静态函式库的特色: 扩展名:(扩展 ...

  4. Selenium WebDriver- actionchians模拟鼠标悬停操作

    #encoding=utf-8 import unittest import time from selenium import webdriver from selenium.webdriver i ...

  5. Leetcode 466.统计重复个数

    统计重复个数 定义由 n 个连接的字符串 s 组成字符串 S,即 S = [s,n].例如,["abc", 3]="abcabcabc". 另一方面,如果我们可 ...

  6. AtCoder Regular Contest 089

    这场一边吃饭一边打,确实还是很菜的 C - Traveling Time limit : 2sec / Memory limit : 256MB Score : 300 points Problem ...

  7. Jeddict:怎样在window系统下,成功打包Angular

    在Jeddict的应用过程中,发现了一个问题.如果前端视图选择Angular(具体版本,需要根据插件版本确定.此处理解为非Angular JS),那么在自动构建的过程中,会发现,每当在安装NodeJS ...

  8. maven无法下载依赖jar包—几种仓库的区别

    一.问题背景 最近这两天,感觉自己智商急剧退化,到了自己都捉急的地步,呃,有必要记录下来,以后智商被人甩几条街的时候,看看这篇文字,找找灵感也是好的! 这个项目呢,是用IDEA开发的,我一切都弄好了, ...

  9. 一句话配置mongodb

    一.安装mongodbmongodb-win32-x86_64-2008plus-ssl-3.2.9-signed.msi 二.以管理员身份,启动cmd命令mongod.exe --logpath & ...

  10. ACM程序设计选修课——Problem D: (ds:树)合并果子(最优二叉树赫夫曼算法)

    Problem D: (ds:树)合并果子 Time Limit: 5 Sec  Memory Limit: 64 MB Submit: 80  Solved: 4 [Submit][Status][ ...