window phone 7 开发学习笔记（二）—— XAML简介

XAML 是基于 XML 发展出的一种描述语言；XML 本身的结构性非常的强，而 XAML 是基于这种特性，发展出来专门用于描述 Silverlight/WPF 的接口语言，相关的特性笔者大略归类出下列几点给各位参考

• eXtensible Application Markup Language
• 区分大小写
• 基于 XML 发展出的宣告式语言
• 用来设计 (设定) 显示的接口外观
• 非常灵活、弹性且威力强大的设计方式
• 设计工具的支持
  Visual Studio / Design / Blend
• Xmlns ?

而在使用 XAML 时，常常会看到 xmlns 这样的关键词，这是什么意思呢？xmlns 使用上的感觉就像是引入命名空间；就像是 C# 中的 using xxxxx…或是 VB 中的 Imports xxxxx…；利用 xmlns 引入相关的命名空间后，在后续的 XAML 中就可以使用相关的控件或其命名空间中的类别；例如以 Application Bar 的使用 (在下节中会谈到使用的细节) 来说，必须要引入下面的命名空间

xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"

xmlns 前置词表示后面的动作是要引入命名空间，而:后面接着的 shell 则是别名，等于代表了=号之后的 CLR 类别；引入了命名空间后，才能利用以下的方式在 XAML 中使用 Application Bar

xmlns 前置词表示后面的动作是要引入命名空间，而:后面接着的 shell 则是别名，等于代表了=号之后的 CLR 类别；引入了命名空间后，才能利用以下的方式在 XAML 中使用 Application Bar

<phone:PhoneApplicationPage.ApplicationBar>    <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">        <shell:ApplicationBarIconButton IconUri="/Images/appbar_button1.png" Text="Button 1"/>        <shell:ApplicationBarIconButton IconUri="/Images/appbar_button2.png" Text="Button 2"/>        <shell:ApplicationBar.MenuItems>            <shell:ApplicationBarMenuItem Text="MenuItem 1"/>            <shell:ApplicationBarMenuItem Text="MenuItem 2"/>        </shell:ApplicationBar.MenuItems>    </shell:ApplicationBar></phone:PhoneApplicationPage.ApplicationBar>

了解了 XAML 的特性之后，我们来看一个简单的 Demo，看看在 Silverlight / XAML 中能够做到做到什么样子的效果；在这个 Demo 中，共有 3 个页面，第一个页面是 Button 的外观样式，笔者简单修改了一些 Button 的设定，便可以发现感觉就会大大的不同；而第二个页面是对于 Button 控件套用上转向效果，例如下面展示的样子

 

从这页面可以看出在 Silverlight 中，对于控件的设计是相当具有弹性的，在以往要将 button 的背景设定为渐层色得要花不少功夫才能达成；而现在，你只要简单的设定背景属性就行了 (较复杂的图形要利用 Blend 来设计控件的外观会比较方便)；甚至改变 Button 的外观，方向的位置都是很轻松就能完成的。

例如一个具有渐层背景色的按钮，在 XAML 中会大概像这样

<Button Content="Button" Margin="8,100,227,0" Height="84" VerticalAlignment="Top" Foreground="Black">    <Button.Background>        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">                <GradientStop Color="#FF0010FF"/>                <GradientStop Color="White" Offset="0.664"/>                <GradientStop Color="#FF6D73D2" Offset="1"/>        </LinearGradientBrush>     </Button.Background></Button>

从这个例子中，可以清楚的看出结构性带来的好处，首先最外层是 Button 控件的卷标描述，而中间包住的部分便是设定 Background 的属性了。

而第三个页面示范了可以对于按钮上附加一些动画的效果，对于应用程序的操作与互动上能够更有趣、丰富。而在动画的制作上，利用设计工具会是比较好的选择，能够预览效果以及比较直觉；而在动画的处理上 XAML 跟程序代码是可以相辅相成的，比如说利用 XAML 定义了一个 StoryBoard

<Storyboard x:Name="Storyboard1">    <DoubleAnimation Duration="0:0:0.4" To="13" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.Rotation)" d:IsOptimized="True"/></Storyboard>

这个 StoryBoard 中定义了动画的变更是一个 Double 的值变化 (DoubleAnimation)，以及动画的总时间 (Duraction 的部分)，以及受影响的属性 (RenderTransform)，但没有明确指定目标的元素，因此，我们可以在程序代码中设定元素名称，以及呼叫 StoryBoard 执行，就可以看到动画效果 (当然要直接在 XAML 中指定元素名称也是可以的)，例如下面程序代码

private void button2_Click(object sender, RoutedEventArgs e){    (Storyboard1.Children[0] as DoubleAnimation).From = 0;    (Storyboard1.Children[0] as DoubleAnimation).To = 150;    Storyboard.SetTargetName( Storyboard1,  "button1");    Storyboard1.Begin();}

而直接在 XAML 上指定元素名称的话会像下面这样子

<Storyboard x:Name="Storyboard1">    <DoubleAnimation Duration="0:0:0.4" To="13" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.Rotation)" AutoReverse="True" Storyboard.TargetName="button1" d:IsOptimized="True"/></Storyboard>

程序代码也会简化如下

private void button2_Click(object sender, RoutedEventArgs e){    Storyboard1.Stop();                //(Storyboard1.Children[0] as DoubleAnimation).From = 0;    //(Storyboard1.Children[0] as DoubleAnimation).To = 150;    //Storyboard.SetTargetName( Storyboard1,  "button1");    Storyboard1.Begin();}