DataTemplate作用是布局+数据绑定

使用DataTemplate

同时完成样式布局和数据绑定

<Window.Resources>
<DataTemplate x:Key="PersonDataTemplate">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<TextBlock Grid.Row="0" Grid.Column="0" Text="{Binding Name}"></TextBlock>
<TextBlock Grid.Row="0" Grid.Column="1" Text="{Binding Age}"></TextBlock>
<TextBlock Grid.Row="1" Grid.Column="0" Text="{Binding Hometown}"></TextBlock>
</Grid>
</DataTemplate>
</Window.Resources>
<Grid>
<ListBox ItemsSource="{Binding}" ItemTemplate="{StaticResource PersonDataTemplate}"></ListBox>
</Grid>

数据在后台赋值DataContext

效果

 

不使用DataTemplate

也可以不使用DataTemplate,使用表格控件中的"列"(DataGrid同)

<ListView HorizontalContentAlignment="Center" VerticalContentAlignment="Center" ItemsSource="{Binding }" HorizontalAlignment="Left" Name="listView1" VerticalAlignment="Top">
<ListView.View>
<GridView>
<GridView.Columns>
<GridViewColumn Header="姓名" DisplayMemberBinding="{Binding Name}"/>
<GridViewColumn Header="年龄" DisplayMemberBinding="{Binding Age}"/>
<GridViewColumn Header="年龄" DisplayMemberBinding="{Binding Hometown}"/>
</GridView.Columns>
</GridView>
</ListView.View>
</ListView>

示例代码

https://github.com/zLulus/NotePractice/tree/dev3/WPF/WpfDemo/Template/DataTemplate

DataTemplate和ControlTemplate混用

针对ListBox等表格式控件
整个ListBox采用ControlTemplate,制订外观
里面的每一项采用DataTemplate,设置外观+数据绑定

DataTemplate的更多相关文章

  1. wpf ListView DataTemplate方式的鼠标悬停和选中更改背景色

    今天使用wpf技术弄一个ListView的时候,由于需求需要,需要ListView显示不同的数据模板,很自然的使用了DataTemplate方式来定义多个数据模板,并在ListView中使用ItemT ...

  2. [WPF系列]-数据邦定之DataTemplate 对 ItemsControl 进行样式和模板处理

    引言   即使 ItemsControl 不是 DataTemplate 所用于的唯一控件类型,将 ItemsControl 绑定到集合仍然很常见. 在 DataTemplate 中有哪些内容一节中, ...

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

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

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

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

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

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

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

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

  7. WPF中UserControl和DataTemplate

    最新更新: http://denghejun.github.io 前言 前言总是留给我说一些无关主题的言论,WPF作为全新Microsoft桌面或web应用程序显示技术框架, 从08年开始,一直到现在 ...

  8. toolkit:Accordion DataTemplate ListBox TextBlock Interaction.Triggers

    困扰好几个小时的问题终于解决了,本人系菜鸟,使用MVVM设计模式,绑定DataTemplate的Command,需要使用 DataContent的资源,否则无法触发ICommand ClickChil ...

  9. DataTemplate应用

    在WPF中,决定数据外观的是DataTemplate,即DataTemplate是数据内容的表现形式,一条数据显示成什么样子,是简单的文本还是直观的图形,就是由DataTemplate决定的.下面通过 ...

  10. WPF中ControlTemplate和DataTemplate的区别

    下面代码很好的解释了它们之间的区别: <Window x:Class="WPFTestMe.Window12" xmlns="http://schemas.micr ...

随机推荐

  1. WD-保修验证(WCC7K4ARTDF1)

    https://support.wdc.com/warranty/warrantystatus.aspx?lang=cn WCC7K4ARTDF1 有限保修期限内 WD40EFRX WD Red 09 ...

  2. Android动态修改图片颜色的实现方式分析

    版权声明:本文为博主原创文章,未经博主允许不得转载. 1.修改色相.饱和度.亮度 参看:http://blog.csdn.NET/sjf0115/article/details/7267063 2.使 ...

  3. CSDN编程挑战——《交替字符串》

    交替字符串 题目详情: 假设字符串str3可以由str1和str2中的字符按顺序交替形成,那么称str3为str1和str2的交替字符串.比如str1="abc",str2=&qu ...

  4. js如何实现动态的在表格中添加和删除行?(两种方法)

    js如何实现动态的在表格中添加和删除行?(两种方法) 一.总结 1.table元素有属性和一些方法(js使用) 方法一:添加可通过在table的innerHTML属性中添加tr和td来实现 tab.i ...

  5. kali 系统的源

    sources.list deb http://http.kali.org/kali kali-rolling main non-free contrib deb http://mirrors.ust ...

  6. Java 出现内存溢出的定位以及解决方案

    在上一节中Java虚拟机内存分布   说了Java虚拟机中分为五个区域,而且也知道了在Java程序计数器区域不会出现OOM(OutOfMemeryError),那么以下就对除了程序计数器以外的四个区域 ...

  7. 关于Vuex可直接修改state问题

    下面的代码证明不通过mutation,而直接修改state修改确实生效了.这样子多人协作岂不是很容易出问题.对于这个问题,在创建 store 的时候传入 strict: true, 开启严格模式,那么 ...

  8. mongodb 批量更新 数组的键操作的文件

    persons该文件的数据如下面的: > db.persons.find() { "_id" : 2, "name" : 2 } { "_id& ...

  9. npm与cnpm混用导致的问题

    npm和cnpm混用之后,再用npm升级模块导致如下错误: 解决办法: 删除node_modules文件下的文件后,重新执行npm install

  10. R 语言基本操作(基本信息的查看、与本地文件系统交互、编译器版本升级)

    0. 信息及路径的查看 getwd() ⇒ 查看路径: setwd() ⇒ 设置路径: .libPaths() ⇒ R 语言库所在的位置: sessionInfo() ⇒ 查询版本及系统和库等信息: ...