深入浅出WPF（1）—转（http://liutiemeng.blog.51cto.com/120361/91631/）

深入浅出WPF（1）——什么是WPF 2008-05-15 19:06:00

 

小序：

 

Hi，大家好！几乎两个月没有写技术文章了。这两个月，我在学习WPF。回顾一下两个月的学习历程，有两个感觉——第一，WPF是一项非常实用又简单易学的东西，它将成为未来MS平台上快速开发的主流趋势；第二，WPF的学习比较讲求路径，如果没有一个比较好的路径，学习起来可能比较慢，主要原因是它像是一种ASP.NET与Windows Forms的“杂交品种”，里面有很多内容与前两者似像非像，同时还有很多新内容的引入。

 

本系列文章的主要目标是：帮助大家学习WPF技术，快速成为这项技术的开路先锋。在此，我借CSDN一块宝地，把这两个月来学习到的东西做一个整理，奉献给大家。希望大家能喜欢。BTW，本系列文章的风格将一改以前长篇累牍的样式，改变为非常短小的篇幅，每篇文章一两个知识点，小步快跑、天天积累。这样，我写着不累，你看着也不累。

 

在我两个月的学习中，我的同事们——Anstinus、 Mathew、 Allen、 ChengSong、 Edward和Mike——他们像战场上的战友一样给了我无数的帮助。在这里，我向这些同事表示深深的感谢和敬意。还有我的搭档——大美女Yan，和你在一起工作很开心。

 

正文：

 

什么是WPF

 

WPF，Windows Presentation Foundation也，译过来就是“Windows呈现基础”，你看它的目的非常明确，就是用来把数据“显示”给用户看的（说白了就是用来做UI的）。如果只是给用户显示几串文本、两三张图片或者几个表格那WPF就太糗了，幸乎，WPF可不是这等素食动物——大家都见过Flash动画吧，WPF的显示能力丝毫不亚于Flash以及Flash的同门师弟Flex+AIR（某建筑公司产品）。

 

为什么会有WPF

 

“微软出点儿什么新东西，我就得跟着跑！”我也曾这样抱怨过。不过，当大量的工作任务压在头上的时候，我终于感觉到——每一次技术（包括理念、架构、语言、工具）的更新都带来了巨大的工作效率提升。的确，我们需要花些时间来搞懂那些看起来乱糟糟的新概念，但搞明白之后——坦白地讲，在有人带的情况下，这并不是什么难事——我们就能用非常少的代码来换取先前技术大量代码才能获得的功能。似乎代码量是开发团队中一切糟糕问题的罪魁祸首，so，明白了？

 

对于WPF是如何减少代码量的，后面有一个例子。但WPF绝不是一个只能帮我们减少代码量的家伙，更重要的是，它还能帮我们把程序的界面和功能逻辑近乎彻底地剥离——in a nutshell，把你的程序变成一只香蕉或者橘子——“皮”是可以从“瓤”上剥下来的，一旦某天用户说：“这个橘子能不能看起来像是个香蕉？”你就可以为你的橘子瓣儿裹上漂亮的进口香蕉皮再开出一个更漂亮的价码。

 

WPF是怎样做到的

 

使用WPF技术开发产品，程序的“皮”，也就是UI，是使用XAML语言来“画”出来的；而程序的“瓤”，也就是功能逻辑，可以由程序员来选择使用C#/VB.NET/C++.NET等托管语言来实现。

 

对于程序员们来说，C#/VB.NET/C++什么的已经是耳熟能详。XAML是什么呢？简言之，XAML（读音为“zamel”，近似于“咋没有”）是XML语言的一个衍生物，它的语法基本上与XML语言完全一致；它的功能就是专门用来设计和实现程序的UI；它看起来和HTML语言非常像，无论你是程序员还是美工人员，只要你设计过网页，那学习XAML对你来说都是小菜一碟儿。而且，XAML可不像HTML和XHTML那样只能呆在Web开发领域——XAML对于Web开发和桌面开发是“通吃”的，从Web程序改成桌面程序或者反过来，所付出的工作量惊人的小，而且由于UI与逻辑完全分离，逻辑代码几乎不用改动——这意味着两种开发的边界渐渐消失，两类设计人员和程序员将会染指“彼岸”、拿到更多的项目、挣更多的钱。

 

WPF之前，无论是Win32 API编程、使用MFC编程还是Windows Form编程，美工（设计人员）设计出来的界面都需要由程序员使用Visual Studio来实现。程序员不是美工，VS也干不过PS……越俎代庖永远是高效分工的大敌。如今，为了支持WPF程序设计，微软推出了专门的、使用XAML语言进行UI设计工具——Expression Studio，使用它就像使用PhotoShop和Dreamweaver一样，设计出来的结果保存为XAML文件，程序员可以直接拿来用；当UI有变更时，程序员只消用新版XAML文件替换旧版即可。

 

XAML小试牛刀

 

让我们实现这样一个小小的需求，完全使用XAML代码而不需要C#来参与。用户需要一个窗口，里面有一个TextBox和一个Button，并且窗口的背景是蓝色的过渡色。

 

650) this.width=650;" onsubmit onchange onunload onselect onreset>

 

我保证：真的一行C#代码都没写！是不是足以让Windows Form程序员艳羡不已？！

 

一切实现都是使用XAML语言完成的——你可以使用Visual Studio 2008的XAML设计器来完成，也可以使用Expression Studio来更专业地完成设计。下面是它的XAML代码，你现在只需要看个大概，后面的文章里，我会一个词一个词为你解释。

 

<Window x:Class="WpfApplication1.Window1"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    Title="Window1" Height="300" Width="300">

    <Grid>

        <Grid.Background>

            <LinearGradientBrush>

                <GradientStop Offset="0" Color="Blue"></GradientStop>

                <GradientStop Offset="0.5" Color="LightBlue"></GradientStop>

            </LinearGradientBrush>

        </Grid.Background>

        <TextBox Height="23" Margin="10,10,10,0" Name="textBox1" VerticalAlignment="Top" Text="Hello WPF!" />

        <Button Height="23" HorizontalAlignment="Right" Margin="0,40,10,0" Name="button1" VerticalAlignment="Top" Width="75">WPF</Button>

    </Grid>

</Window>

 

咱们再来一个例子：这回的需求是这样的——UI上有一个TextBox和一个Slider，要求Slider的滑块滑动时TextBox的文本显示Slider的值；当TextBox里的文本改变时，就让Slider的滑块与之同步。

 

对于一个有经验的Windows Form开发老手来说，他的思路是这样的：

1. 在UI上拖放控件
2. 为Slider的ValueChanged事件添加响应函数（事件处理函数），函数中将Slider的Value属性（double类型）转换成一个string类型的值并赋给TextBox的Text属性。
3. 为TextBox的TextChanged事件添加响应函数，对TextBox的Text属性进行检验，看看它是否能解析为一个double值（新手常常忘记这一点而导致bug）并且落在Slider的取值范围内，如果一切顺利，就把它赋给Slider的Value属性。

 

Now，你是一个WPF新手，但你可以做的比一个Windows Form老手还好！请打开Visual Studio 2008，新建一个WPF Application，然后把下面的代码copy到XAML设计器里。

 

<Window x:Class="WpfApplication1.Window1"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    Title="Window1" Height="300" Width="300">

    <Grid>

        <Grid.Background>

            <LinearGradientBrush>

                <GradientStop Offset="0" Color="Blue"></GradientStop>

                <GradientStop Offset="0.5" Color="LightBlue"></GradientStop>

            </LinearGradientBrush>

        </Grid.Background>

        <TextBox Height="23" Margin="10,10,10,0" Name="textBox1" VerticalAlignment="Top" Text="{Binding ElementName=slider1, Path=Value, UpdateSourceTrigger=PropertyChanged}" />

        <Slider Height="21" Margin="10,40,10,0" Name="slider1" VerticalAlignment="Top" Maximum="100" />

    </Grid>

</Window>

   

看你，你也可以一句C#代码都不写就完成漂亮的程序！

 

650) this.width=650;" onsubmit onchange onunload onselect onreset>

 

我猜已经有同学开始“晕代码”了。完全没有必要！这些代码80%都是VS自动生成的，而且它们的结构的非常简单——箱子里装着一个口袋，口袋里装着两个核桃。上面这段程序最重要的一句就是：Text="{Binding ElementName=slider1, Path=Value, UpdateSourceTrigger=PropertyChanged}"，即可以说它是WPF最精华的部分，也可以说它是与Windows Form开发相比变化最大的地方，它就是——Data Binding（数据关联）。这两个月来，我几乎天天与这个东西打交道。后面的文章中，我们将仔细学习如何使用它。