你必须知道的 XAML

快乐技术沙龙发起人Cocos2d-x for XNA开发者OpenXLive程序员快乐之王

@秦春林

对象树XAML解析器行为模板样式MVVM设计时 /运行时附加属性

何为 XAMLXAML在 Silverlight中的作用XAML命名空间声明对象设置属性标记扩展类型转换器事件

XAML

XAML是一种描述 Silverlight界面组件的标记语言它通过一种语言结构来显示对象之间的分层关系在隐藏文件中响应事件和处理 XAML中的对象

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"> <TextBox Height="72" HorizontalAlignment="Left" Margin="8,19,0,0" Name="firstNumberTextBox" Text="0" VerticalAlignment="Top" Width="460" TextAlignment="Center" /> <Button Content="equals" Height="72" HorizontalAlignment="Left" Margin="158,275,0,0" Name="equalsButton" VerticalAlignment="Top" Width="160" Click="equalsButton_Click" /></Grid>

XAML在Silverlight中的作用

XAML用于声明 Silverlight UI及该 UI中元素的主要格式用于声明样式和模板的格式这些样式和模板应用于 Silverlight控件和 UI的逻辑基础XAML定义可视外观，而关联的代码隐藏文件定义逻辑用于支持可视化设计器和设计图面

XAML命名空间XAML用于声明对象，因此对于其使用到的类型，需要引用命名空间，这样解析器才能正确构造这个对象

xmlns:data="clrnamespace:System.Windows.Controls;assembly=System.Windows.Controls.D

ata"默认命名空间中的对象声明不需要前缀

默认命名空间包含多个程序集<Button/>

不在默认命名空间的对象需要使用前缀<data:DataGrid/>

前缀为 d的命名空间用于支持设计时

Windows Phone

设置属性使用属性语法<objectName propertyName="propertyValue" .../>

使用属性元素语法<object.property>

使用内容元素语法Border的 Child属性TextBlock的 Text属性Button的 Content属性

使用集合语法调用 Add方法

Windows Phone

标记扩展 花括号（ {和 }}）表示标记扩展语法此用法指示 XAML处理不要像通常那样将属性值视为文本字符串或者视为可直接转换的字符串放入值相反，分析器通常调用支持该标记扩展的代码

XAML分析器理解的标记扩展绑定StaticResourceTemplateBindingRelativeSource

Windows Phone

类型转换器实现 IValueConverter允许在通过绑定引擎传递数据时修改数据

Windows Phone

事件

private void equalsButton_Click(object sender, RoutedEventArgs e){ float v1 = float.Parse(firstNumberTextBox.Text); float v2 = float.Parse(secondNumberTextBox.Text);

float result = v1 + v2;

resultTextBlock.Text = result.ToString();}

Windows Phone

从启动页面开始this.RootVisual=new MainPage()Windows Phone中在WMAppManifest.xml中指定

InitializeComponent工具自动生成加载 XAML文件，初始化 XAML对象树给声明名称的变量指定对象引用

13

XAML对象树

XAML中每一个元素都是对象

15XAML以声明的方式描述 UI同样可以使用 C#描述 UI

XAML vs C#

XAML怎样被转化为界面？

XAML解析器

顺序解析调用默认构造函数各种各样的解析器

WFSilverlight设计时（ Expression Blend）运行时

Expression Blend就是一个 XAML解析器

顺序执行 从上往下一个一个构造对象Grid等容器的 Z轴层次各种资源必须在使用前先定义因为 XAML中每个元素都被实例化为对象，所以可以绑定到元素（对象）

公共无参构造函数

每个类型必须有一个公共无参构造函数任何类型（非 UI元素）均可以出现在 XAML中自定义类型构造函数不应该执行网络请求，文件访问等操作它应该只被用于初始化数据Blend中的 DataSample

<phone:PhoneApplicationPage.Resources> <local:Album x:Key="myAlbum"/> </phone:PhoneApplicationPage.Resources> public class Album

{ public string Name { get; set; }

public string Description { get; set; } }

集合类型 XAML解析器可以通过下列操作之一来标识集合类型：1. 实现 Ilist

2.实现 Idictionary 3.从 Array派生在加载每个项的时候通过调用隐士集合的 Add方法将其添加到集合

隐式集合元素会在逻辑树中创建一个成员，即使它在标记中不显示为元素也是如此。通常，所拥有类型的构造函数针对作为其属性之一的集合执行实例化，这会将该集合添加到树中。

XAML解析器不支持泛型集合，但是可以将 List(Of T)类用作基类（ IList）

<control:FunctionLayer x:Name="func3" Center="1220,475" BeginTime="0:0:0.45"> <control:FunctionLayer.Functions> <control:FunctionCollection> <control:ImagesFunctionInfo Url="/Images/300C/icons/3-1.png" OffsetY="-90" esPath="Images/300c/images_3"/> <control:VideoFunctionInfo Url="Videos/300C/300cVideo1.wmv" OffsetX="-60" OffsetY="10" /> <control:TianFunctionInfo Url="/Images/300C/icons/3-3.png" OffsetX="60" OffsetY="13" IconFuncSize="120,80"/> <control:ImageFunctionInfo Url="/Images/300C/big.jpg" OffsetY="90" IsIcon="False" IconFuncSize="120,110"/> </control:FunctionCollection> </control:FunctionLayer.Functions> </control:FunctionLayer>

public class FunctionCollection : List<FunctionInfo> {

}

public class ImageFunctionInfo : FunctionInfo {

} public class VideoFunctionInfo : FunctionInfo {

}

运行时设计时

UI元素是一些具有布局属性的类型（ Margin， Canvas.Left…）知道怎么构造和初始化对象之后，系统根据对象的布局属性绘制到显卡

为了可视化设计应用程序设计器将这个绘制的过程在设计时执行一次设计时只执行 XAML文件的构造函数（不执行时间）所以需要放到 XAML中的类型构造函数不能有有延迟的操作（如 IO编译的时候执行构造函数修改 XAML的时候动态执行构造函数

public partial class WindowsPhoneControl1 : UserControl { public WindowsPhoneControl1() { InitializeComponent();

MessageBox.Show("在设计器中也能看到我吧 "); } }

高效使用设计时

尽可能的使设计器中能看到最终效果尽可能避免在运行时调整 UI使 XAML解析器不要出现加载异常使用依赖属性的属性更改事件动态更新设计时 UI尽量在 Blend中设计动画坚决杜绝在设计时看不到任何东西

各种各样的XAML解析器

XAML用来描述 UI解析器的职责 1. 构造对象 2. 根据系统布局规则绘制元素Expression Blend实际上就是一个解析器运行时也包含一个解析器Expression Blend 5和 Visual Studio 11共享一个解析器WF解析器自定义解析器

解析器的内置行为

构造对象和给对象属性赋值只能初始化对象数据

对象添加事件使 XAML不仅仅是布局解析器还能根据特定的接口及类型做更强大的事情： 1. 事件（根据事件类型） 2. IAttachedObject （ Behavior， Action， Trigger） 3. VisualStateManager 4. 执行动画预览 5. Blend的模板设计支持 6. 标记扩展

根据后面要讲的附加属性等概念，可以为解析器添加更多有趣的处理方式从而使设计时的工具或者运行时功能更强大

IAttachedObject的启示供可以附加到另一个对象的对象使用的接口IAttachedObject接口被以下附加属性识别： 1. Behaviors 2. Triggers

实现这个接口的对象能够得到父元素的引用可以为父元素添加各种事件从而使得 XAML不仅仅提供视觉定义，还能提供各种视觉行为（通过添加不同的事件响应）

public interfaceIAttachedObject { DependencyObject AssociatedObject { get; } void Attach(DependencyObject dependencyObject); void Detach();}

给XAML元素添加事件是XAML 真正强大的地方它使得可以通过自定义行为来扩展

强大的附加属性

Blend 很多强大的功能都是通过附加属性来实现的 1. 行为 2. 动作 3. 触发器 4. 状态管理

附加属性通过不是直接修改元素，而是附加的方式，使得系统或者开发者可以针对某些类型添加额外的功能

你完全可以发明一个比状态管理更酷的东西Blend 第四个版本新增的大部分功能都是这样实现的

视觉及视觉行为

布局是视觉设置和修改属性是视觉构造对象是视觉视觉是静态的

通过添加响应事件，或者当某个条件满足时做某件事情叫视觉行为控件在不同状态下的视觉点击按钮之后触发一个动画让元素的属性值通过关键帧来变化

视觉行为影响着应用程序的使用体验Blend对于视觉行为的强大支持，使得它是真正强大的工具

所以Blend 真正玩得好的一定是开发者

GoToStateBehavior 添加一个事件，将控件切换到某个状态FluidMoveBehavior 当界面的尺寸发生变化时，使元素过度到新位置过程中呈现一段动画FluidLayout 使用一个模拟，使非线性的值变换看起来像线性变换 Visibility.Visible <-> Visibility.Collapsed Grid.Row

LayoutStates 为集合元素的子元素在进入和退出界面的呈现一段动画TransitionEffect 使位图在变换过程中呈现一个位图特效

FluidMoveTagSetBehavior 让 UI元素可以追踪数据上下文的过渡

Style解析器对 Style属性特殊处理解析器能识别 Setter，将对象属性设置为新的值实现了强大的控件样式的自定义Blend支持进入不同的样式进行修改

DataTemplateVisualState执行 Storyboard

MVVM核心原理Silverlight开发最头疼的问题熟练运用 MVVM的前提是深刻理解 XAML

MVVM的核心是： 1.Binding 2.附加属性

依赖属性是的 Silverlight支持 Binding等功能，而 Binding使得一个属性发生变更时，不仅仅是修改这个属性值，更会修改与之相关联的界面这样实现了从数据到界面

附加属性的概念使得我们可以对界面的元素添加各种事件， MVVM分离 View和 ViewModel的思想就是通过附加属性来使得相应 View的逻辑在另一个类中从而实现分离这样实现了对界面事件的响应

MVVM模块关系

MVVM设计时支持真实的 ViewModel的数据往往来源于网络或 IO为 ViewModel定义一个接口为设计时提供一套内存中的数据类似 Blend中 Data的思路

MVVM逻辑行为 &视觉行为ViewModel 天然应该处理程序的逻辑但是 ViewModel 也需要很 UI 打交道，如选中 ListBox的某项，在 ViewModel中做一定的业务处理，然后页面导航视觉行为不应该出现在 ViewModel中， ViewModel不应该包含控件的引用（不利于单元测试）

视觉行为从 ViewModel中分离可以通过三种方式： 1. DataTrigger 2. View 订阅 ViewModel的事件 3. 类似 Command，封装一个中间层，在这个中间层来处理 UI变换

MVVM设计原则MVVM不是将 CodeBehind中的代码移至 ViewModel中那样一点意思都没有

View中不是不包含任何代码View中包含跟视觉行为以及和 UI相关的代码

MVVM的目的是分离逻辑不是分离代码

ViewModel中不能包含与 UI相关的代码通过附加属性， ViewModel事件， DataTrigger等实现

现在你觉得 XAML怎么样？

快乐技术沙龙 一周年纪念

05/12/2012北京嗨皮吧Happy-bar.com

你必须心动

谢谢