XAML实例教程系列 - 对象和属性

2012-05-22 14:18 by jv9, 1778 阅读, 6 评论, 收藏编辑

前一篇已经介绍XAML概念:“XAML语言是Extensible Application Markup Language的简称,英文发音是“zammel”,中文称为“可扩展应用程序标记语言”,该语言是基于Extensive Markup Language(XML)可扩展标记语言,主要用于Silverlight,WPF,Windows Phone以及Windows 8应用开发,并且用于描述.Net层次型结构对象。” 换句话说,XAML不仅可被用于多种平台应用UI设计,而且可以使用层次型结构描述一个对象,这样使UI开发更加规范,设计工具的统一,使得开发人员和设计人员之间无缝结合,项目开发流程更佳规范和顺畅。 

XAML是一种敏感型,声明性语言,对于字符大小写有严格的约束,在项目中,以".xaml"作为文件扩展名。XAML页面和ASP.NET的ASPX页面类似,都具有一个后台代码文件控制页面逻辑处理,这一机制将用户界面设计和后台代码设计分割,这意味着项目美工人员可以使用Expression Blend进行XAML用户界面设计,同时后台代码开发人员可在Visual Studio中共享该XAML文件,并同时设计其后台代码。

XAML学习方法和经验

根据微软Open Specification Promise(OPS) program文档介绍,XAML文档是一个XML文档,在一定程度上XAML继承了大量的XML概念,而最重要的两个概念分别是Element(元素)的定义和Property(属性)的使用。 所以,如果你熟悉XML,其实已经具备XAML语法基础, 如果你具有XML开发经验,学习XAML将会事半功倍。 理解和掌握XAML语言最简单的方法是使用具有XAML视图工具和XAML代码相互比较学习,这样会更形象化理解XAML的使用。例如使用Visual Studio或Expression Blend等。使用设计工具,可以同时显示XAML代码和设计视图效果,并且设计视图效果能够根据XAML代码更新即时更新。
值得注意的是,微软为开发人员和设计人员提供了方便快捷的设计方式,使用简单的拖拽即可完成一个控件或者页面的声明,但是作为一名专业开发人员,需要对XAML代码理解和掌握,否则一旦遇到复杂项目,将会出现XAML开发瓶颈。

在开始介绍XAML基础前,首先创建一个实例项目,通过实例项目代码帮助学习XAML语言。在Visual Studio 11中创建一个Windows 8 Metro Style空白页面项目,项目名“XamlGuide",


 
默认BlankPage.xaml代码:
 

 

XAML基础 - Object (对象)

在XAML代码中,一个Element(元素)通常是一个Object(对象),在代码中映射对应.Net类。简单理解,在XAML中声明一个Element元素,也就是对相应公共语言运行类库进行一次实例化操作。

XAML代码声明一个元素对象,必须由一个开始标签“<元素对象>”和一个结束标签“</元素对象>”构成,基本语法如下: 
 
<元素对象></元素对象>
 

例如,在XAML中声明一个文本框,代码如下:

<TextBox></TextBox>
上述代码中开始标签“<TextBox >”是实例化对象名称。结束标签“</TextBox >”,是对应开始标签中的元素对象名称。
 
在windows 8和silverlight的XAML语法中,支持略缩式元素结束标签,其语法格式如下:
<TextBox />
该语法格式省略</TextBox>结束标签,使用“/”符号作为元素结束符。
 
值得注意的是,XAML中Elements(元素)和Attributes(特性)名称是字符大小写敏感型,也就是大写和小写字符命名具有不同的含义。在上述代码中,如果使用<textbox>,XAML语法解析器将返回错误信息,无法对textbox元素进行实例化。

XAML基础 - Property (属性)

在面向对象程序开发中,我们所提及的属性,即是指对象的属性。而开发过程中,对象属性也是最重要,最常用的概念。 在XAML代码中,允许开发人员声明“元素对象”,不同的“元素对象”对应着多个对象属性。例如,一个TextBox文本框,有背景属性,宽度属性,高度属性等。为了适应实际项目的需求,XAML提供三种方法设置属性,分别是:

1.通过Attribute特性设置对象属性;
2.通过Property属性元素设置对象属性;
3.通过隐式数据集设置对象属性;
 
下面将分别介绍这三种属性设置方法的基础语法和使用方法。

Attributes特性的概念

 

 
在XAML代码中,允许在开始标签的对象名后使用Attributes(特性)定义一个或者多个对象元素的属性,实现属性赋值操作,其语法结构如下
<元素对象 属性名=“属性值” 属性名=“属性值” …></元素对象> 
 
例如,在TextBox文本框中添加默认文本内容,将文本内容赋值到Text属性即可,
 
<TextBox Text=“XAML实例教程系列”></TextBox>
 
由于元素对象属性名在开始标签内部,所以这种表达方式也被称为“内联属性”。
 
Property属性元素的概念
使用XAML的Attribute特性可以简单快捷的设置对象的属性,其属性值局限于简单的字符形式。在实际项目中,经常会遇到复合型控件或者自定义控件引用较为复杂的对象属性,以达到个性化的效果。对此Attribute特性无法支持,从而引入Property属性元素的概念。
 
在传统.Net开发语言中,调用一个对象属性,可以简单的使用以下格式实现:
 
元素对象.属性 = 属性值
 
例如,在C#代码中,调用一个按钮的内容属性,代码为:
Button.Content = “XAML实例教程系列”;
 
而在XAML代码中,其调用方法类似与.Net开发语言属性使用方法,其语法格式为:
 
<元素对象>
  <元素对象.属性>
     <属性设置器 属性值=“”>
  </元素对象.属性>
</元素对象>
 

其中,属性设置器可以设置为较为复杂的对象元素,例如布局控件元素,自定义控件元素等。

下面是用一个按钮控件演示Property属性的作用,设置按钮内容是使用Content属性,如果使用Attribute特性设置按钮内容,如下代码:
 

 
其运行结果为:

 
如果需要在按钮内容中添加一个图片,使其具有个性化效果,将无法使用Attribute特性进行设置,这时可以尝试使用Property属性设置方法,例如:

在上面的示例代码中,按钮的Content内容属性以<元素对象.属性>的形式出现在<Button></Button>中,属性值设置器被StackPanel布局控件替代,在StackPanel布局控件中,分别定义了Image控件和TextBlock控件,用来显示图片和按钮文本内容,其运行效果如下:


 
从示例中可以看出,使用元素对象的Property属性设置方法,比Attribute特性要灵活和强大。如果使用Property属性设置简单文本,也可以使用以下方法:

其运行效果和Attribute特性设置按钮内容相同。Property属性元素是用户界面设计中最常用的属性设置方法,在随后的章节中会经常出现。

隐式数据集设置对象属性
 
通过学习Property属性元素,可以了解到XAML的元素对象属性,不仅包含单一对象属性,同时还支持复杂属性,属性值可以为简单的字符数据类型,同时也可以是一个数据集。

为了简化XAML代码复杂性,提高代码易读性,XAML提供隐式数据集设置对象属性方法。例如,在XAML中为一个ComboBox组合框赋值,传统代码如下:

 

 
在以上代码中,使用了<ComboBox.Items>属性赋值ComboBoxItem内容,使用隐式数据集设置对象属性方法,可以修改以上代码为:
 

 

从对比以上代码可以看出<ComboBox.Items>被删除后,<ComboBox>仍旧可以对ComBoxItem进行赋值操作。其运行结果和使用Property属性元素属性赋值相同:


 

另一个隐式数据集属性赋值的例子,在XAML代码可以直接生成渐变背景效果,实现方法是使用画刷类的GradientStops属性控制,在下面的代码中,我们尝试生成一个蓝色背景渐变效果:

在以上代码中,对<LinearGradientBrush.GradientStops>属性赋值,使用<GradientStopCollection>数据集描述渐变效果。如果使用隐式数据集属性赋值方法,则可以修改以上代码为:


 

两段代码运行结果相同:

 
 
隐式数据集属性赋值方法在Windows 8和Silverlight自定义控件模板和样式中经常用到,是常用属性赋值方法之一。

今天暂时介绍到这里,欢迎留言讨论。

源代码下载

欢迎大家留言交流,或者加入QQ群交流学习:

22308706(一群) 超级群500人 
37891947(二群) 超级群500人 
100844510(三群) 高级群200人 
32679922(四群) 超级群500人 
23413513(五群) 高级群200人 
32679955(六群) 超级群500人 
88585140(八群) 超级群500人 
128043302(九群 企业应用开发推荐群) 高级群200人 
101364438(十群) 超级群500人 
68435160(十一群 企业应用开发推荐群)超级群500人

 
 
 
 

XAML实例教程系列 - 对象和属性(二)的更多相关文章

  1. XAML实例教程系列 - 依赖属性和附加属性(四)

    XAML实例教程系列 - 依赖属性和附加属性 2012-06-07 13:11 by jv9, 1479 阅读, 5 评论, 收藏, 编辑 微软发布Visual Studio 2012 RC和Wind ...

  2. XAML实例教程系列 - 类型转换器(Type Converter)七

    XAML实例教程系列 - 类型转换器(Type Converter) 分类: Windows 8 Silverlight2012-06-25 13:40 961人阅读 评论(0) 收藏 举报 butt ...

  3. XAML实例教程系列 - 资源(Resources)

    Kevin Fan分享开发经验,记录开发点滴 XAML实例教程系列 - 资源(Resources) 2012-08-10 12:47 by jv9, 1386 阅读, 1 评论, 收藏, 编辑 在Wi ...

  4. XAML实例教程系列 - XAML传递参数到值转换类实例 八

    Kevin Fan分享开发经验,记录开发点滴 XAML实例教程系列 - XAML传递参数到值转换类实例 2012-06-28 05:25 by jv9, 508 阅读, 0 评论, 收藏, 编辑 继上 ...

  5. XAML实例教程系列 - 事件(Event) 五

    Kevin Fan分享开发经验,记录开发点滴 XAML实例教程系列 - 事件(Event) 2012-06-19 01:36 by jv9, 1727 阅读, 7 评论, 收藏, 编辑 Events, ...

  6. XAML实例教程系列 - 命名空间(NameSpace) 三

    XAML实例教程系列 - 命名空间(NameSpace) 2012-05-28 14:14 by jv9, 2205 阅读, 10 评论, 收藏, 编辑 上一篇曾提及XAML中,每个对象元素的声明是对 ...

  7. XAML实例教程系列 - 开篇(一)

    XAML实例教程系列 - 开篇 2012-05-14 11:47 by jv9, 5588 阅读, 8 评论, 收藏, 编辑 去年,曾答应银光中国论坛的朋友推出一个关于XAML语言实例教程系列,帮助学 ...

  8. XAML实例教程系列 - 标记扩展(Markup Extensions) 六

    XAML实例教程系列 - 标记扩展(Markup Extensions) 分类: Windows 8 Silverlight2012-06-21 13:00 1139人阅读 评论(0) 收藏 举报 扩 ...

  9. Silverlight,Windows 8应用开发实例教程系列汇总

    Kevin Fan分享开发经验,记录开发点滴 Silverlight,Windows 8应用开发实例教程系列汇总 2012-06-18 01:05 by jv9, 2145 阅读, 3 评论, 收藏, ...

随机推荐

  1. MAC 打开Chrome打开开发者工具的快捷键

    mac下safari和chrome打开开发者工具的快捷键相同,都是 option(alt)+command+i 这个是我的默认配置,没有更改过的.

  2. vuecli开发项目,文件打包后,appjs/vendorjs文件过大

    项目上线后,浏览器第一次加载会特别特别慢,network中看到vendorjs文件1.9M,不慢才怪. echarts按需引入后,也有1.1M左右,由于对vue脚手架理解不深,自己扒了大量的文档,又测 ...

  3. buf.writeUIntBE()函数详解

    buf.writeUIntBE(value, offset, byteLength[, noAssert]) buf.writeUIntLE(value, offset, byteLength[, n ...

  4. python学习,使用requests库来模拟登录github,post请求。

    这次我们要模拟登录的页面是 https://github.com/login 首先我们先尝试着登陆一遍分析一下请求, 打开开发者工具下的network选项, 可以很清楚的看到这个会话session,而 ...

  5. codechef营养题 第三弹

    第三弾が始まる! codechef problems 第三弹 一.Motorbike Racing 题面 It's time for the annual exciting Motorbike Rac ...

  6. Css学习总结(3)——CSS布局解决方案 - 水平、垂直居中、多列布局、全屏布局

    居中布局 水平居中 子元素于父元素水平居中且其(子元素与父元素)宽度均可变. inline-block + text-align <div class="parent"> ...

  7. Linux学习总结(18)——Linux使用init命令关机、重启、切换模式

    reboot可能是每个用过Linux的人都知道的命令,但有一个命令"init"才是命令中的精英. 最近有个同事学习安装了CentOS,明明安装的是带桌面的系统,但是启动后进入了命令 ...

  8. HDU 1540 区间合并线段树

    题目大意: 就是给定一堆位置,进行删除还原,最后找到 t 位置上的最大连续位置 #include <cstdio> #include <cstring> #include &l ...

  9. [HDU3586]Information Disturbing(DP + 二分)

    传送门 题意:给定一个带权无向树,要切断所有叶子节点和1号节点(总根)的联系,每次切断边的费用不能超过上限limit,问在保证总费用<=m下的最小的limit 二分答案,再 DP,看看最终结果是 ...

  10. Codeforces Round #228 (Div. 2)

    做codeforces以来题目最水的一次 A题: Fox and Number Game 题意:就是用一堆数字来回减,直到减到最小值为止,再把所有最小值加,求这个值 sol: 简单数论题目,直接求所有 ...