天天看点

.NET 3.0 WPF工具及应用

 作者:IT168 微山译 原文:http://tech.it168.com/msoft/2007-09-14/200709140949325.shtml

   介绍

    可扩展应用标记语言(XAML)即将来临,对那些没有听过XAML的人而言,它是一种为微软新的表示层编写代码的方式,也就是视窗表示基础(WPF,代号Avalon)。

    XAML是XML类型的标记语言,负责表示图形元素,很类似于HTML标记。

    我们可以在很多工具中开发XAML代码,比如Zam3D,和.NET Framework 3.0 SDK一起提供的 XAMLPad,Visual Studio 2005,,以及Expression Blend(以前的Expression Inte)。

    我认为XAML的一个设计思想就是图形终端可以有一些艺术设计者来开发,然后编程人员根据这些艺术代码编写.NET代码,从而驱动交互界面。利用同一种语言——XAML,图形设计者和软件开发人员可以自由地转换工作。

    总之,这是一个基本的思想,但不是我这篇文章的主要内容。在这篇文章中,我想展示一下利用XAML能够干什么,可以用什么工具来创建XAML,以及应该怎么使用这些工具。我同样会解释我是怎么完成演示程序中的各个不同部分的。

     我不会讲怎么掌握XAML,而是完全专注于介绍一些主流的XAML工具。如果确实不能通过CAMEL来了解XAML,建议你看看  XAML Resources上Marc Clifton的文章,这些文章能让你学得快点。下面是这篇文章包含的内容:

1. CIDER

主要讨论Visual Studio的CIDER,它让VS用户仅仅通过工具箱的拖拽就可以方便的创建XAML设计,就像在.NET 2.0的工程里一样。

2. Expression BLEND

简要介绍Expression BLEND外表特征。

3. 用 Expression BLEND 创建演示程序 (附件)

演示程序的片段,以及怎么样和BLEND集成。

4. Visual Studio 2005 综合

把一个BLEND(EID, Sparkle)的工程放到Visual Studio 2005。这应该足够我们开始的了,那么,我们前进吧。

5. 代码

对,就是技术,代码。

文章代码描述

我也只是在2天前才开始看XAML(这之前我草草浏览了一下,但没有仔细看)。为了写这篇文章,我决定尝试利用已有的工具来创建应用程序,毕竟这些工具可以立马产生XAML代码,为什么不用它们呢?我并不是说我们都需要熟悉XAML,假设我们以后会吧,但是在我看完Charles Petzold的——Applications = Code + Markup(一共1002页)之前,我只是想看看能够利用工具完成什么事情,这也是大多数人在他们的日常工作中的任务。

所以这篇文章就像一个人到陌生地方的旅行。我对最后完成的东西感到很高兴。事实上,正文就描述了我计划要完成的事情。附件中的app文件展示了XAML的下列概念:

附件程序的功能:

• 按钮控件的用户模板

• 滑动条控件的用户模板

• 滑动条和文本框的数据绑定

• 文本框透明度

• 鼠标点击时按钮的反应

• 鼠标点击时文本的反应

• 播放用户选择的多媒体

下面这张图是应用程序运行时的样子,虽然从静态的屏幕截图上还区分不出那些是活动的。稍后我会更加详细地描述应用程序的功能,并在需要的地方配上屏幕截图。

    对有些人来说这还不够留下深刻影响,但是我向你保证,这里有很多漂亮优雅的素材,你可以用真实的应用程序来看看哪些是活动的,它们是怎么搭配起来的。你可以稍后下载app文件,但是现在我们继续读下去吧,来体验一下XAML的乐趣。

先决条件

    在读下去之前,如果想运行附带的程序,你必须至少具有以下条件:

• Microsoft .NET Framework 3.0

• Visual Studio 2005

• 配置够好的机器,有足够的RAM (最好有1GB的空余内存)

    如果你想看看CIDER,可以在这里获得。

1. Cider

    我们先通过使用Cider来简要介绍一下WPF。Cider是Visual Studio的一个附加部分,用于创建WPF应用程序。我希望通过Cider,我们能够慢慢进入WPF的世界,并且盼望读到这篇文章的其它有趣的部分。

    只要你安装了所有要求的软件,并安装了Cider,你就会在Visual Studio中看到创建新的WPF应用的选项。我们可以看到,在启动Visual Studio时,有一个工程选项是WPF工程,如下图所示。

.NET 3.0 WPF工具及应用

    如果我们选择接受,就可以继续创建一个WPF应用。可以看到,一旦Visual Studio载入,在正常界面就会有一些新的标签,像下面图中的那样,我们有Design/Xaml标签。

.NET 3.0 WPF工具及应用

    这个标签用于在图形设计和XAML代码之间切换(一般来说是先进行图形设计,当然你可以根据你需要选择)来看看面板中的代码吧,这些代码为我们创建了一个新的WPF应用程序。Visual Studio / Cider为我们提供了下面的叫做Windows1.XAML的XAML代码。

.NET 3.0 WPF工具及应用

   这就是XAML用于描述用户界面的标记,但是不是还有一些代码来帮助我们理解呢?对,是的,有一个.NET代码文件(本例是C#)。就像下面这样的代码段(Window1.XAML.cs)

.NET 3.0 WPF工具及应用

    这还不会引起恐慌,事实上,只要用过ASP.NET的人都会对文件里面的代码感到高兴,这很相似,不是吗?基本上,所有的表达部分以及它们的标记都在一个文件中(.XAML),逻辑部分的代码在另外一个文件中。(.XAML.CS或者如果你用的是VB.NET,就是.XAML.VB文件)。下一步我们就真正地在这个页面上加一些部件,怎么样?     选择Design标签,工具栏就会有很多可以拖到窗体工作区的控件。

.NET 3.0 WPF工具及应用

    这个例子就是放置一个WrapPanel,当它被放置之后会产生下面的语句.

.NET 3.0 WPF工具及应用

    元素的开始和结束都在同一行。这显得很没有效率,因为WrapPanel是一个容器,我们该怎么让它包含其它的控件呢?我们选择Xaml标签(这会清除工具栏中的控件,别担心,只要点击Design标签,它们就会回来),把WrapPanel元素从中分开,这样开始和结束部分就被分到不同的行里。然后把鼠标移动到WrapPanel的开始和结束部分之间,转换到设计视角,再从工具栏拖一些控件(按钮)到WrapPanel去。变!WrapPanel立马就拥有了几个按钮,并且按照合适的方式排放着。

    值得注意的是,使用Cider,我们可以点击一个控件,然后改变它的属性,就像我们在.NET 2.0的应用里使用属性窗口一样。但是这些属性并不完全一样的,其中一些类甚至完全不同,比如说MessageBox,它捕捉新的事件,并返回一个新的MessageBoxResult对象。记得这点哦。

    当然,这显然是个认为的例子,只是想简单介绍一下Cider。你可以用这个素材来进行实验,这只是让你知道你可以在一个熟悉安全的好环境里完成这个例子,这个环境叫做Visual Studio。如果你想学习更多的XAML概念和其它的XAML资源呢?继续读第2篇吧。

继续阅读