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

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/gjysk/article/details/24742469


在线演示: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时代,则让我们将注意力集中在数据上,至于界面的呈现则可以使灵活多变的,甚至是各种各样的呈现方式。


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


展开阅读全文

没有更多推荐了,返回首页