开篇:数据驱动UI的设计理念
2014-04-29 22:39
92 查看
在线演示: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时代,则让我们将注意力集中在数据上,至于界面的呈现则可以使灵活多变的,甚至是各种各样的呈现方式。
详细内容请参考演示视频!
相关文章推荐
- selenium+java 数据驱动框架设计
- 《3个驱动之系统设计篇》-(1)开篇
- UI数据缓冲层的设计(-)
- "约束驱动的软件分析&设计新技术"开篇
- UI设计理念: 减少类继承关系,增加某种程度的代码冗余,换取类之间的独立性(某种意义的解耦))
- "约束驱动的软件分析&设计新技术"开篇
- 以数据驱动页面为展现系统设计的思考
- PM如何用数据驱动产品设计与迭代?
- 第31天(就业班) struts数据校验、UI标签、ognl表达式语法、数据回显、模型驱动
- 如何用数据看用户行为,驱动产品设计
- 贫血模型;DTO:数据传输对象(Data Transfer Object);AutoMapper ;Domain Model(领域模型);DDD(领域驱动设计)
- 元数据驱动的应用程序设计和开发
- 控制器设计的数据驱动技术
- WPF研究之道——数据驱动UI
- Atitit. 数据约束 校验 原理理论与 架构设计 理念模式java php c#.net js javascript mysql oracle
- 用数据驱动思想来设计游戏
- 解析圆—-智能手表UI设计理念
- WPF 之 Binding 数据驱动UI (INotifyPropertyChanged 向客户端发送属性更改通知,ValidationRule 数据校验, IValueConverter数据转换 )
- Atitit. 数据约束 校验 原理理论与 架构设计 理念模式java php c#.net js javascript mysql oracle
- 四核驱动的三维导航—淘宝新UI(设计篇)