Xmal基础及布局设计(第二章)

1、 Xmal基础及布局设计基础及布局设计 XmalXmal 在windows Phone开发中，他使用的是silverlight框架，他的应用界面都是由xaml构成，他就相当于Android中的xml文件。在微软的设计理念中，Code-Behind（UI与业务逻辑的分离）经典模式在这里的体现就是xaml与xaml.cs的文件的组合。 一、定义Xaml是一种声明性标记语言，他类似于HTML和xml的结合体。这也是silverlight独有的语法结构。Xaml大体上呢也遵循xml语法规则，例如标签的成对出现，每一个元素都包含有一个名称或者多个属性。在xaml中，每个属性都和silverlight类库

2、中定义的属性对应，每个元素都和silverlight中的类的名称所对应。比如说元素就对应System.Windows.Controls,Button.因为xaml是一种纯粹的标记语言，这就意味着某个元素要处理一个事件时，需要触发该元素的特定属性来处理。他就类似于采用的代码后置，将显示的UI和业务逻辑相分离。在开发xaml中，最好使用name属性来区分和定位一个元素，这样我们在业务逻辑中就可以通过这个属性名来访问该元素。二、声明一个xaml元素的四大原则1.xaml是严格区分大小写的，元素和属性的名称必须严格遵守；2.所有属性值，无论什么数据类型，都应该包含在双引号当中；3.所有的元素必须是封闭

3、的，也就是说一个元素必须有开始有结束。例如要么自我结束，要么成对出现4.最终的xaml必须是合格的xml文档。 三、xaml的作用1.xaml是用于声明silverlight UI以及UI中元素的主要格式，通常项目中至少有一个xaml文件表示应用程序中用于最初显示的UI界面。其他xaml文件可能是声明资源或者是其他地方用到的UI界面。2.Xaml是用于声明支持UI界面显示不同特效的样式和模板的格式，这些样式和模板用于silverlight 控件和UI的逻辑基础。3.Xaml的出现可以使用在不同的UI设计器上，可以使用不同的设计器结合使用，达到最完美的效果4.Xaml的出现简化了开发的流程，使做

4、业务逻辑的兄弟和做UI设计的朋友基本上是互不干涉。5.Xaml的出现可以保留更多的设计原型，方便这个可视化设计中出现的版本控制。Xaml的常规作用是用于声明对象，这些对象的属性和对象-属性的关系。声明的对象由类类型的库提供支持，相关的库可以是以下任意一个：1.silverlight核心库；2.分布式库，他们是在包中再发布的SDK的一部分，或者也有可能是应用程序库的缓存选项；3.第三方控件的自定义库；4.用户自己创建的类库；5.其他库。通过应用程序模型进行引用的库。四、xaml的语法1.xaml的命名空间命名空间：他的作用是确定如何解释引用编程实体的字符串标记，如果重复使用字符串标记，命名空间还

5、可以解决多义性。他的存在使得编程框架能够区分用户声明的标记和框架声明的框架声明的标记，并通过命名空间来消除可能出现的标记冲突。其实简单理解就是两点，第一点，声明引用。第二点区分标记所属的空间。2 声明对象一个xaml文件始终只有一个元素作为其根，该元素声明的一个对象将作为某些编程结构的概念跟。或者是应用程序的整个运行时定义的对象图。3 设置属性可以设置使用对象元素语法声明的对象的属性。 可以通过多种方法使用 XAML 设置属性： 使用属性语法。 使用属性元素语法。 使用内容元素语法。 使用集合语法（通常是隐式集合语法）。 五、标记扩展 标记扩展是一个在 Silverlight XAML 实现中

6、广泛使用的 XAML 语言概念。 在 XAML 属性语法中，花括号（ 和 ）表示标记扩展用法。 此用法指示 XAML 处理不要像通常那样将属性值视为文本字符串或者视为可直接转换为文本字符串的值。 相反，分析器通常应调用支持该特定标记扩展的代码，该标记扩展可帮助从标记中构造对象树。 六、事件 XAML 是用于对象及其属性的声明性语言，但它也可以包含用于将事件处理程序附加到标记中的对象的语法。 接着，可以通过特定的技术（如 Silverlight）扩展 XAML 事件语法约定，这会通过编程模型集成 XAML 声明的事件。 可以将相关事件的名称指定为处理该事件的对象的属性名称。 对于属性值，可以指定

7、在代码中定义的事件处理程序函数的名称。 XAML 处理器使用此名称在加载的对象树中创建一个委托表示形式，并将指定的处理程序添加到内部处理程序列表中。 大多数基于 Silverlight 的应用程序都是由标记和代码隐藏源生成的。 在一个项目中，XAML 被编写为 .xaml 文件，而使用 CLR 语言（如 Visual Basic 或 C#）编写代码隐藏文件。 当 XAML 文件是标记 - 编译作为 Silverlight 项目创建操作的一部分时，通过将一个命名空间和类指定为 XAML 页的根元素的 x:Class 属性来确定每个 XAML 页的 XAML 代码隐藏文件的位置。 布局设计布局设计

8、 布局管理是从一个整体的角度去把握手机应用的界面设计，一个良好的UI界面，会使用户得到非凡的体验。在一个手机应用程序的界面布局中，主要有Grid，Canvas，StackPanel，并且他的根节点必须是一个容器，然后在容器中才能摆放。那么在windows phone中常见的布局有哪些呢？ 常见布局：网络布局（Grid容器）：按照行列方式布局程序的UI，定义一个区域，再次区域内，用户可以使用相对于Canvas区域的坐标显示子元素；绝对布局（Canvas容器）：按照绝对坐标来布局程序的UI界面；堆放布局（StackPanel容器）：按照垂直或者水平的方式布局文件；枢轴视图布局（pivot控件）：通

9、过类似页面标签方式在一个页面展示多个视图；全景视图布局（panorama控件）:通过左右滑动的方式在一个页面显示多个视图。5.1 网络布局（Grid容器）网络布局是一个类似于网页中的table标签，它定义了一个表格，然后设置表格里边的行列，在HTML中时根据tr和td来表示列和行。而Grid通过Grid.Row，Grid.Column，Grid.RowSpan,Grid.ColumnSpan来决定列和行的大小位置.在silverlight的Grid进行布局的时候，需要先指定Grid的行和列，它是先指定后使用。Grid属性1.RowDefinitions和ColumnDefinitions这两个

10、属性是用来指定Grid控件的行数和列数，内部嵌套几个Definition，这就代表这个Grid有几行几列。2. Grid.Row 和Grid.Column当使用其他控件内置与Grid中时，需要使用Grid.Row和Grid.Column来指定它所在的行和列。3. Height = “Auto”和Width= “Auto”这个auto表示的是高度和宽度的自适应，这种情况下，他会根据内部的内容改变而改变，当然也可以设置成绝对的宽高。他的单位是px，像素。*称为“比例缩放”，它表示该行的高度应该占据所有其余可用的高度。4. VerticalAlignment和horizontalAlignment根据这个属性来设置行和列的位置，自动根据Grid容器的大小来自动调整行和列的大小使得整个行和列都铺满了Grid的所有空间。1.使用Grid布局，两行三列： StackPanel布局：stackPanel是一个堆栈面板，处在其中的元素会按照横向布局或者竖直布局，默认为竖直布局，可以通过修改Orientation的值来进行更改。1.Orientation属性设置Orientation属性可确定列表的方向。有