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


    
        
        
        
            
            
        
    

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

 

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

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

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

而第三个页面示范了可以对于按钮上附加一些动画的效果,对于应用程序的操作与互动上能够更有趣、丰富。而在动画的制作上,利用设计工具会是比较好的选择,能够预览效果以及比较直觉;而在动画的处理上 XAML 跟程序代码是可以相辅相成的,比如说利用 XAML 定义了一个 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 上指定元素名称的话会像下面这样子


    

程序代码也会简化如下

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();

}


你可能感兴趣的:(windows,phone)