开篇：数据驱动UI的设计理念

在线演示：http://v.youku.com/v_show/id_XNzA0NDc1ODE2.html

清晰版视频+代码下载：http://115.com/lb/5lbcfwdfuwis

一、概述

本演示主要是对WPF一个非常重要的设计理念做一个简单的概述。这个理念就是：数据驱动UI的设计理念。这是我们的开篇，我们先来看一下这个设计理念，然后感受一下它与我们之前的掌握的UI设计方式有着怎样的不同。

总体来说，Windows GUI开发大致上经历了4个时代。分别为：API时代、封装时代、组件化时代和WPF时代。本演示主要是对组件化时代的GUI设计和WPF时代的GUI设计做一个初步的对比。大家如果对API时代和封装时代的GUI设计感兴趣，可以在互联网查找相关的资料，自行了解学习。

演示分三部分：

1、组件化时代和WPF时代UI开发的对比。

2、Demo演示。分别使用WinForms的UI设计方式和WPF的UI设计方式演示对比。

3、小结。

二、组件化时代和WPF时代UI开发的对比
组件化时代

.NET体系中的WinForm开发可以看成是这方面典型代表。

1、消息被封装成事件。比如说按钮的单击操作，系统仍然按照消息的方式进行处理，但开发模型却将其封装成了事件（Click）。从此，我们便针对于各种各样不同的事件来编写程序。

2、事件驱动UI。用户或者系统触发某个事件，程序员在事件中编写各种代码，包括对界面修改的相关代码。

WPF时代：

1、专门的UI设计语言XAML。是一种标签式的语言，类似于HTML，有标签名，也有各种各样的属性和事件，详细内容可参见稍后的篇章。比如下面的这段XAML代码，呈现出来的界面如下图所示：

<Window x:Class="WPFApp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="WPFApp" Height="244" Width="549" ResizeMode="NoResize" Background="#FFF0F0F0" Loaded="Window_Loaded">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition />
            <RowDefinition />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <TextBox Width="100" Height="23" Name="NumberTextBox1" HorizontalContentAlignment="Center" />
        <TextBox Width="100" Height="23" Grid.Column="1" Name="NumberTextBox2" HorizontalContentAlignment="Center" />
        <TextBox Width="100" Height="23" Grid.Column="2" Name="NumberTextBox3" HorizontalContentAlignment="Center" />
        <Slider Grid.Row="1" Grid.ColumnSpan="3" VerticalAlignment="Center" Maximum="100" Margin="12,0" Name="NumberSlider" />
        <TextBox Width="100" Height="23" Grid.Row="2" Name="NumberTextBox4" HorizontalContentAlignment="Center" />
        <TextBox Width="100" Height="23" Grid.Row="2" Grid.Column="1" Name="NumberTextBox5" HorizontalContentAlignment="Center" />
        <TextBox Width="100" Height="23" Grid.Row="2" Grid.Column="2" Name="NumberTextBox6" HorizontalContentAlignment="Center" />
    </Grid>
</Window>

效果如下图所示：

2、数据驱动UI。数据是核心，是主动的；UI从属于数据并表达数据，是被动的。当数据发生改变后，与该数据相关的UI元素也会做出相应的改变。至于UI做出怎样的改变，这是程序员可以自行定义的。

程序的本质是：数据+算法，组件化时代的程序开发，使得我们紧密的围绕在UI的周围去编写代码，而WPF时代，则让我们将注意力集中在数据上，至于界面的呈现则可以使灵活多变的，甚至是各种各样的呈现方式。

详细内容请参考演示视频！