原文:WPF - 本质:数据和行为

  如果自己来做一个UI框架,我们会首先关注哪些方面?我想UI框架主要处理的一定包括两个主要层次的内容,一个是数据展现,另一个就是数据操作,所以UI框架必须能够接收各种不同的数据并通过UI界面展现出来,然后可以通过控件行为来操作这些数据,也就是UI框架的数据(Data)和行为(Behavior)。

  本篇从总体上讲解一下WPF如何处理和操作Data,看完之后大家应该对WPF框架如何把数据转变为展现界面有初步的认识,这也是WPF的核心设计之一。

数据(Data)

  以前的UI框架的控件对控件数据类型都有规定,按钮上显示的是文本或者加上一个图片,下拉框显示的都是字符串或者带上一个object类型属性的作为保存
对象引用用。而WPF则不同,它缺省的数据类型为object,这就允许控件能够操作任意类型的数据,这也是它灵活和强大的地方之一。

数据类型

  • 原始数据:字符串、布尔、整形等
  • 列表数据:数组、列表等,集合中的内容可以是相同类型或者不同类型的数据
  • 层级数据:树、列表的列表或者图等,具有层级关系的数据
  • 组合数据:包含以上多种数据的数据,如用户联系方式包括电话、地址1、地址2、手机号等

  但是如果是object类型,那WPF如何知道具体该如何显示这些数据呢?这就要通过Templates、Presenters、Binding and Converters、Layout和Styles了。

模板(Templates)

  1. 控件模板control template):控件模板定义一个控件的外观,这个控件主要和UI相关,一般也不和Data有关。每个控件都有个一个缺省的控件模板。

    Code<ControlTemplate x:Key=”buttonTemplate”>  <Grid>    <Ellipse Width=”” Height=””>      <Ellipse.Fill>        <LinearGradientBrush StartPoint=”,” EndPoint=”,”>        <GradientStop Offset=”” Color=”Blue”/>        <GradientStop Offset=”” Color=”Red”/>        </LinearGradientBrush>      </Ellipse.Fill>    </Ellipse>    <Ellipse Width=”” Height=””>      <Ellipse.Fill>        <LinearGradientBrush StartPoint=”,” EndPoint=”,”>          <GradientStop Offset=”” Color=”White”/>          <GradientStop Offset=”” Color=”Transparent”/>          </LinearGradientBrush>      </Ellipse.Fill>    </Ellipse>  </Grid></ControlTemplate>
  2. 数据模板data template):数据模板负责定制任何一个.Net对象的外观,这对于非UIElement控件非常重要,非UIElement控件的默认模板仅仅是一个TextBlock,其中包含了一个由ToString方法反会的字符串。
    Code<ListBox x:Name=”pictureBox” ItemsSource=”{Binding Source={StaticResource photos}}” …>  <ListBox.ItemTemplate>    <DataTemplate>      <Image Source=”placeholder.jpg” Height=””/>    </DataTemplate>  </ListBox.ItemTemplate>  …</ListBox>

  大家可以通过工具ShowMeTheTemplate 来查看一下现有控件的默认模板。

内容控件(Presenters)

  通过Templates讲解,我们现在知道控件模板定义控件外观,数据模板定义特定的数据如何显示,那么现在如何将定义的数据显示在控件外观上显示呢?那就需要content presenter了。每个控件都有一个默认的ContentPresenter用于显示Content内容,我们称这种控件为内容控件ContentPresenter负责将ContentControl的Content属性显示出来,如以下代码示例:

Code    <Grid>        <Grid.Resources>            <Style TargetType="Label">                <Setter Property="Template">                    <Setter.Value>                        <ControlTemplate TargetType="Label">                            <Grid>                                <Ellipse Margin="34,45,44,117" Fill="{TemplateBinding Background}"/>                                <ContentPresenter Content = {TemplateBinding Content}" HorizontalAlignment="Center"                            VerticalAlignment="Center"/>                            </Grid>                        </ControlTemplate>                    </Setter.Value>                </Setter>            </Style>        </Grid.Resources>        <Label Background="Red" Content="hello wpf control"></Label>    </Grid>

绑定(Binding) 和 转换(Converters)

  数据模板描述了数据显示的外观,我们如何使得这些外观和数据关联起来呢?这就是数据绑定(data binding)来做的事情。WPF的数据绑定是一个强大的功能,它允许单项和双向的绑定,当对象更改时UI会自动刷新,当UI操作后数据也可以自动更改。

  有时候数据的格式并不只是简答的显示,比如bool类型需要显示成三态,可以通过一个转换器来实现。

Binding和Converters代码示例:网上很多这个资料,可以参考WPF Data BindingBinding Converters

布局(Layout

  经过前面的步骤,模板已经定义了,数据也有了,转换器和绑定也触发了,内容显示也生成了,剩下最后一步就是布局(layout)。布局系统将确定前面生产的所有UI控件的大小和位置。在WPF中panel以及其继承类负责提供layout功能。布局是一种递归的分两个步骤进行的过程,第一步叫做检测(measuer),第二步叫做排列(arrange)。

  1. 检测:面板询问其子元素到底需要多少空间,这里假设有足够的控件。面板会重载FrameworkElement的MeasureOverride方法来实现这一步。
  2. 排列:在检测步骤完成后,就该排列元素了。面板会告诉子元素它们将放在哪里,它们有多少空间可以用。面板会重载FramworkElement的ArrangeOverride方法来实现这一步骤。

样式(Style

  样式是一种简单的机制,通过它可以把属性值和用户界面元素分类开来,有点类似CSS与HTML的关系

以上内容可以表达为下图:Person数据经过控件模板、数据模板以及样式和布局,再加上数据绑定就可以展现数据了

行为(Behavior)

  把数据显示出来只是做了一半工作,还有一半就是提供用户方式与UI进行交互。下图说明了输入操作示意图:

WPF控件支持鼠标、键盘和写字板等输入设备来与UI进行交互,还可以通过外部和内部时间进行操作,经过触发后可以通过事件处理或者command机制来进行Action。

参考 《WPF Control Development Unleashed

欢迎转载,转载请注明:转载自周金根 [ http://zhoujg.cnblogs.com/ ]

WPF - 本质:数据和行为的更多相关文章

  1. 浅谈WPF本质中的数据和行为

    WPF缩写为Windows Presentation Foundation的缩写,本文所要谈的就是WPF本质中的数据和行为,希望通过本文能对大家了解WPF本质有所帮助. 如果自己来做一个UI框架,我们 ...

  2. [WPF系列]-数据邦定之DataTemplate 根据对象属性切换模板

      引言 书接上回[WPF系列-数据邦定之DataTemplate],本篇介绍如何根据属性切换模板(DataTemplate)   切换模板的两种方式:   使用DataTemplateSelecto ...

  3. 【WPF】数据验证

    原文:[WPF]数据验证 引言      数据验证在任何用户界面程序中都是不可缺少的一部分.在WPF中,数据验证更是和绑定紧紧联系在一起,下面简单介绍MVVM模式下常用的几种验证方式. 错误信息显示 ...

  4. WPF 后台数据触发改变界面状态-心跳实现

    今年做的一个上位机工控WPF项目,做个小小的总结把,以后随时来找 请不要带血乱喷,我只是菜鸟.___by 鲍队 类似于这样子的;大致的意思是:一个代码变量,通过改变变量的值,绑定这个变量的这个圆颜色也 ...

  5. [WPF系列]-数据邦定之DataTemplate 对分层数据的支持

    到目前为止,我们仅讨论如何绑定和显示单个集合. 某些时候,您要绑定的集合包含其他集合. HierarchicalDataTemplate 类专用于 HeaderedItemsControl 类型以显示 ...

  6. [WPF系列]-数据邦定之DataTemplate简介

    引言 WPF 数据模板化模型为定义数据的表示形式提供了很大的灵活性.WPF 控件有支持自定义数据表示形式的内置功能.首先介绍下如何定义Datatemplate,然后再介绍其他数据模板化功能,例如根据自 ...

  7. WPF:数据和行为

    如果自己来做一个UI框架,我们会首先关注哪些方面?我想UI框架主要处理的一定包括两个主要层次的内容,一个是数据展现,另一个就是数据操作,所以UI框架必须能够接收各种不同的数据并通过UI界面展现出来,然 ...

  8. [WPF系列]-数据邦定之DataTemplate 使用 DataTrigger 来应用属性值

    使用 DataTrigger 来应用属性值 当前表示不会告诉我们某个 Task 是家庭任务还是办公室任务.记住 Task 对象拥有类型为 TaskType 的 TaskType 属性,该类型是一个枚举 ...

  9. WPF 大数据加载过程中的等待效果——圆圈转动

    大家肯定遇到过或将要遇到加载大数据的时候,如果出现长时间的空白等待,一般人的概念会是:难道卡死了? 作为一个懂技术的挨踢技术,即使你明知道数据量太大正在加载,但是假如看不到任何动静,自己觉得还是一种很 ...

  10. wpf之数据触发器DataTrigger

    wpf, 根据绑定的属性的值的不同(数据分类),界面上显示不同的控件(绑定不同类型的属性),可以使用数据库触发器DataTrigger实现这一功能. 实现的效果如下: 首先建立实体类: 更改通知类: ...

随机推荐

  1. 【Lucene4.8教程之五】Luke 2014-06-24 15:12 1092人阅读 评论(0) 收藏

    一.Luke基本内容 1.Luke简介 Luke可用于查看Lucene创建的索引,并对其进行基本操作. 2.创建Luke (1)从Github上下载源文件 https://github.com/tar ...

  2. asm 的hello world 2011.04.28

    这几天一直在弄一个嵌入式的程序,搭环境,熟悉库函数,熟悉汇编,乱成一锅粥,到现在还是没有什么系统性的收获. 或许下周弄出来吧,(一定得弄出来,不然老大该跟我急了……). 今天,熟悉汇编,好歹用汇编写出 ...

  3. event.relatedTarget、event.fromElement、event.toElement

    在标准DOM中,mouseover和mouseout所发生的元素可以通过event.target来访问,相关元素通过event.relatedTarget属性来访问.event.relatedTarg ...

  4. html5-7 html5语义标签和视频

    html5-7  html5语义标签和视频 一.总结 一句话总结:设计网站的时候要兼顾早期浏览器的话,最新技术要缓着用,自己可以先尝试. 1.html5所有标签共有属性有哪四种? 1.id2.clas ...

  5. Global Git ignore - Stack Overflow

    https://stackoverflow.com/questions/7335420/global-git-ignore git config --global core.excludesfile ...

  6. 【32.89%】【codeforces 719A】Vitya in the Countryside

    time limit per test 1 second memory limit per test 256 megabytes input standard input output standar ...

  7. 20+ 个很有用的 jQuery 的 Google 地图插件 (英语)

    20+ 个很有用的 jQuery 的 Google 地图插件 (英语) 一.总结 一句话总结:英语提上来我才能快速去google上面找资源啊.google上面的资源要比百度丰富很多,然后有了英语就可以 ...

  8. .netcore consul实现服务注册与发现-单节点部署

    原文:.netcore consul实现服务注册与发现-单节点部署 一.Consul的基础介绍     Consul是HashiCorp公司推出的开源工具,用于实现分布式系统的服务发现与配置.与其他分 ...

  9. erlang中变量作用域

    http://erlangdisplay.iteye.com/blog/315452 _开头(包括_)在erlang可以是表明,这个变量可以存任意东西,就是我们常说的全匹配,_A一般来说就是表明这个东 ...

  10. [Python] 字典推导 PEP 274 -- Dict Comprehensions

    之前自己也遇到过一次,这段时间在群里也遇到过几次的一个问题 用python2.7写的一段程序.里面用到了字典推导式,可是server版本号是python2.6,无法执行. 今天查了下关于Dict Co ...