如果自己来做一个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)

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

Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

<ControlTemplate x:Key=”buttonTemplate”>
  <Grid>
    <Ellipse Width=”100” Height=”100”>
      <Ellipse.Fill>
        <LinearGradientBrush StartPoint=”0,0” EndPoint=”0,1”>
        <GradientStop Offset=”0” Color=”Blue”/>
        <GradientStop Offset=”1” Color=”Red”/>
        </LinearGradientBrush>
      </Ellipse.Fill>
    </Ellipse>
    <Ellipse Width=”80” Height=”80”>
      <Ellipse.Fill>
        <LinearGradientBrush StartPoint=”0,0” EndPoint=”0,1”>
          <GradientStop Offset=”0” Color=”White”/>
          <GradientStop Offset=”1” Color=”Transparent”/>
          </LinearGradientBrush>
      </Ellipse.Fill>
    </Ellipse>
  </Grid>
</ControlTemplate>

·数据模板(data template):数据模板负责定制任何一个.Net对象的外观,这对于非UIElement控件非常重要,非UIElement控件的默认模板仅仅是一个TextBlock,其中包含了一个由ToString方法反会的字符串。

Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

<ListBox x:Name=”pictureBox” ItemsSource=”{Binding Source={StaticResource photos}}” …>
  <ListBox.ItemTemplate>
    <DataTemplate>
      <Image Source=”placeholder.jpg” Height=”35”/>
    </DataTemplate>
  </ListBox.ItemTemplate>
  …
</ListBox>

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

wordend 相关阅读:

  • WPF中控件与控件值的绑定
  • WPF中使用XmlDataProvider做控件绑定
  • 为WPF中DropShadowBitmapEffect提供轻量级的替代品

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

Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

<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 Binding、Binding Converters

布局(Layout)

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

·检测:面板询问其子元素到底需要多少空间,这里假设有足够的控件。面板会重载FrameworkElement的MeasureOverride方法来实现这一步。

·排列:在检测步骤完成后,就该排列元素了。面板会告诉子元素它们将放在哪里,它们有多少空间可以用。面板会重载FramworkElement的ArrangeOverride方法来实现这一步骤。

wordend 相关阅读:

  • WPF中控件与控件值的绑定
  • WPF中使用XmlDataProvider做控件绑定
  • 为WPF中DropShadowBitmapEffect提供轻量级的替代品

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

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

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

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

  1. WPF - 本质:数据和行为

    原文:WPF - 本质:数据和行为 如果自己来做一个UI框架,我们会首先关注哪些方面?我想UI框架主要处理的一定包括两个主要层次的内容,一个是数据展现,另一个就是数据操作,所以UI框架必须能够接收各种 ...

  2. WPF中的数据验证

    数据验证 WPF的Binding使得数据能够在数据源和目标之间流通,在数据流通的中间,便能够对数据做一些处理. 数据转换和数据验证便是在数据从源到目标 or 从目标到源 的时候对数据的验证和转换. V ...

  3. WPF中的数据模板(DataTemplate)(转)

    原文地址 http://www.cnblogs.com/zhouyinhui/archive/2007/03/30/694388.html WPF中的数据模板(DataTemplate)        ...

  4. CYQ.Data 支持WPF相关的数据控件绑定.Net获取iis版本

    CYQ.Data 支持WPF相关的数据控件绑定(2013-08-09) 事件的结果 经过多天的思考及忙碌的开发及测试,CYQ.Data 终于在UI上全面支持WPF,至此,CYQ.Data 已经可以方便 ...

  5. WPF中的数据模板(DataTemplate)

    原文:WPF中的数据模板(DataTemplate) WPF中的数据模板(DataTemplate)                                                   ...

  6. WPF中的数据模板使用方式之一:ContentControl、ContentTemplate和TemplateSelector的使用

    在WPF中,数据模板是非常强大的工具,他是一块定义如何显示绑定的对象的XAML标记.有两种类型的控件支持数据模板:(1)内容控件通过ContentTemplate属性支持数据模板:(2)列表控件通过I ...

  7. wpf mvvm datagrid数据过滤

    原文:wpf mvvm datagrid数据过滤 datagrid数据过滤,你可以通过设置RowStyle属性,通过将Visibility绑定到ViewModel层的属性来控制是否可见,比如:   & ...

  8. WPF 精修篇 数据触发器

    原文:WPF 精修篇 数据触发器 数据触发器 可以使用Binding 来绑定控件 或者数据源 来触发相关动作 举栗子 <Window.Resources> <Style Target ...

  9. WPF 后台获得 数据模板里的内容控件(DataTemplate)

    原文:WPF 后台获得 数据模板里的内容控件(DataTemplate) 假如      <Window.Resources> 里 有一个 Datatemplate 我想获得TextBlo ...

  10. WPF DataGrid 绑定数据及时更新的处理

    原文:WPF DataGrid 绑定数据及时更新的处理 默认情况下datagrid 绑定数据源后,在界面编辑某一列后,数据不会及时更新到内存对象中.如在同一行上有一个命令对来获取 当前选中行(内存对象 ...

随机推荐

  1. C#的Xamarin开发小米盒子应用并以WCF实现微信通知

    对于熟悉C#语言的开发人员而言,用Xamarin开发Android应用也是一个不错的选择.小米盒子是Android系统.当然也就能够使用Xamarin来开发.首选来看效果图. watermark/2/ ...

  2. uCOS-ii笔记

    ucos ii system 文件结构 上层: 应用软件,用户代码 中层: 与处理器无关代码 与应用程序相关配置文件 与处理器有关代码 下层: 硬件(cpu,interupt,timer,gpio,i ...

  3. Centos 7 搭建蓝鲸V4.1.16社区版

    第一次搭建蓝鲸平台,参考了蓝鲸社区的官方搭建文档. 友情链接:蓝鲸智云社区版V4.1.16用户手册 搭建时遇到了不少的坑,这里做一个详细的安装梳理 主机硬件要求 官方的推荐如下: 在本地用VMware ...

  4. ZOJ 3526 Weekend Party

    Weekend Party Time Limit: 2 Seconds      Memory Limit: 65536 KB As the only Oni (a kind of fabulous ...

  5. 倍福TwinCAT(贝福Beckhoff)常见问题(FAQ)-点动面板的每个按钮含义

    参考下面的图示     更多教学视频和资料下载,欢迎关注以下信息: 我的优酷空间: http://i.youku.com/acetaohai123   我的在线论坛: http://csrobot.g ...

  6. AutoResponder及正则表达式

    使用AutoResponder选项卡,你可以创建一个匹配规则和一个响应字符串,如果请求的URL地址跟你的匹配规则相匹配,Fiddler就会自动执行这个对应的响应字符串. 小提示: 匹配规则会按照它在规 ...

  7. 在ASP.NET MVC中支持 HttpHandler

    写HttpHandler与ASP.NET WebForm基本没有什么不同.只是部署的时候需要注意,只在Web.config中注册还不行,需要在Global.asax.cs添加一条ignore规则: p ...

  8. Mysql纯命令行添加用户及权限

    原文链接:http://hi.baidu.com/ngy1991/item/45978bd05d82c7ea785daa42 创建用户: 命令: 1 CREATE USER 'username'@'h ...

  9. MySQL学习总结(四)数据的基本操作以及MySQL运算符和常用函数

    数据库是存储数据库对象的仓库,数据库的基本对象是表,表用来存储数据.关于数据的操作也就是我们常说的CRUD,C指的是CREATE(插入数据记录).R指的是READ(查询数据记录).U指的是UPDATE ...

  10. W25Q128页数和扇区数

    int8_t STORAGE_GetCapacity (uint8_t lun, uint32_t *block_num, uint32_t *block_size){ *block_size = 4 ...