一、场景模拟

假设我们现在有如下需求:

我们需要在ListBox中的每个Item中显示某个成员的姓名、年龄以及喜欢的颜色,点击Item的时候,会在右边显示详细信息,同时也想让ListBox的样式变得好看一些,比如带有绿色边框等。

为了实现以上需求,我们可以使用控件模板来修改ListBox的默认样式,使之变得生动有趣,使用数据模板来改变ListBoxItem的数据呈现形式。

二、Demo

为了改变ListBoxItem的外观,我们在资源里定义一个名字为listBoxItemTemplate的数据模板,模板中使用Binding将数据进行关联,然后为ListBox的ItemTemplate属性进行赋值。

当我们点击左面ListBoxItem的时候,为了能在右面显示详细信息,我们定义四个Label,绑定左侧选中的ListBoxItem。

为了绑定方便,我们为四个Label加个父容器StackPanel,并将它的DataContext属性绑定到选中的ListBoxItem上(四个Label的DataContext就会继承StackPanel的DataContext属性)。

具体代码以及运行截图参见以下:

 1 using System.Collections.ObjectModel;
2 using System.Windows;
3
4 namespace DataTemplateDemo1
5 {
6 /// <summary>
7 /// Interaction logic for MainWindow.xaml
8 /// </summary>
9
10 public partial class MainWindow : Window
11 {
12 private ObservableCollection<Student> observableCollection = new ObservableCollection<Student>();
13 public ObservableCollection<Student> ObservableCollection
14 {
15 get { return observableCollection; }
16 set { observableCollection = value; }
17 }
18 public MainWindow()
19 {
20 InitializeComponent();
21 this.DataContext = this;
22 observableCollection.Add(new Student() {Name = "Tom", Age= 16, FavorColor="Red",Hobby="Swim" });
23 observableCollection.Add(new Student() { Name = "Maty", Age = 18, FavorColor = "Green" ,Hobby="Football"});
24 observableCollection.Add(new Student() { Name = "Alice", Age = 19, FavorColor = "Yellow" ,Hobby="Running"});
25 }
26 }
27
28 public class Student
29 {
30 public int Age { get; set; }
31 public string Name { get; set; }
32 public string FavorColor { get; set; }
33 public string Hobby { get; set; }
34 }
35
36 }
 1 <Window x:Class="DataTemplateDemo1.MainWindow"
2 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4 xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
5 xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
6 xmlns:local="clr-namespace:DataTemplateDemo1"
7 mc:Ignorable="d"
8 Title="DataTemplateDemo" Height="350" Width="525">
9 <Window.Resources>
10
11 <ControlTemplate x:Key="ListBoxControlTemplate" TargetType="ListBox">
12 <Grid>
13 <Border BorderBrush="Green" BorderThickness="1" CornerRadius="5" >
14 <Grid>
15 <ItemsPresenter TextBlock.Foreground="Green"></ItemsPresenter>
16 </Grid>
17 </Border>
18 </Grid>
19 </ControlTemplate>
20
21 <DataTemplate x:Key="listBoxItemTemplate">
22 <Grid Height="50">
23 <Grid.ColumnDefinitions>
24 <ColumnDefinition Width="150"/>
25 <ColumnDefinition Width="50"/>
26 </Grid.ColumnDefinitions>
27 <Grid.RowDefinitions>
28 <RowDefinition/>
29 <RowDefinition/>
30 </Grid.RowDefinitions>
31 <TextBlock Name="textbox1" Text="{Binding Name}" Grid.Row="0" Margin="5"/>
32 <TextBlock Name="textbox2" Text="{Binding Age}" Grid.Row="1" Margin="5"/>
33 <Rectangle Fill="{Binding FavorColor}" Grid.Column="1" Grid.Row="0" Grid.RowSpan="2" Margin="3"></Rectangle>
34
35 </Grid>
36 </DataTemplate>
37 </Window.Resources>
38 <Grid>
39 <StackPanel Orientation="Horizontal">
40
41 <ListBox Margin="5" Name="stuList"
42 Template="{StaticResource ListBoxControlTemplate}"
43 ItemsSource="{Binding ObservableCollection}"
44 ItemTemplate="{StaticResource listBoxItemTemplate}">
45 </ListBox>
46 <StackPanel DataContext="{Binding Path=SelectedItem,ElementName=stuList}">
47 <Label Content="{Binding Name}"></Label>
48 <Label Content="{Binding Age}"></Label>
49 <Label Content="{Binding FavorColor}"></Label>
50 <Label Content="{Binding Hobby}"></Label>
51 </StackPanel>
52 </StackPanel>
53
54 </Grid>
55 </Window>

WPF---数据模板(一)的更多相关文章

  1. WPF数据模板和控件模板

     WPF中有控件模板和数据模板,控件模板可以让我们自定义控件的外观,而数据模板定义了数据的显示方式,也就是数据对象的可视结构,但是这里有一个问题需要考虑,数据是如何显示出来的?虽然数据模板定义了数 ...

  2. WPF数据模板样式选择器

    在使用数据模板样式选择器时,不能设置ItemContainerStyle的属性值,如果设置了该值,那么数据模板样式选择器会失去作用. 在使用数据模板样式选择器时,首先要创建数据模板样式选择器对象,此对 ...

  3. WPF数据模板(7)

    数据模板常用在3种类型的控件, 下图形式: 1.Grid这种列表表格中修改Cell的数据格式, CellTemplate可以修改单元格的展示数据的方式. 2.针对列表类型的控件, 例如树形控件,下拉列 ...

  4. WPF数据模板中绑定事件不触发问题

    今天比较闲,做一个练手的项目,结果在xaml中写了一个用户的数据模板后,在其中的某个Canvas上绑定了一个鼠标左击的事件,结果调试的时候,无论怎么点击都不跳到断点那里,百思不得其解. 之后尝试不绑定 ...

  5. WPF数据模板的数据触发器的使用

    <Window x:Class="CollectionBinding.MainWindow"        xmlns="http://schemas.micros ...

  6. WPF 数据模板使用值转换器

    <Window x:Class="CollectionBinding.MainWindow"        xmlns="http://schemas.micros ...

  7. WPF 数据模板DataType属性的使用,不用指定ItemTemplate

    <Window x:Class="CollectionBinding.MainWindow"        xmlns="http://schemas.micros ...

  8. WPF 数据模板的使用

    <Window x:Class="CollectionBinding.MainWindow"        xmlns="http://schemas.micros ...

  9. WPF的ComboBox 数据模板自定义

    WPF的ComboBox 有些时候不能满足用户需求,需要对数据内容和样式进行自定义,下面就简要介绍一下用数据模板(DataTemplate)的方式对ComboBox 内容进行定制: 原型设计如下: 步 ...

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

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

随机推荐

  1. python 模拟点击微信

    from PyQt5 import QtCore,QtWidgets import win32gui, win32api, win32con # 调用win32api的模拟点击功能实现ctrl+v粘贴 ...

  2. PYTHON 转化函数

    ord(c)#字符转ASCII码值,10进制:自变量只能是一个字符 chr(a)#通过ASCII码值得到对应的字符 bin()函数:将整数(十 等进制)转化为二进制 bool():将指定参数转化为bo ...

  3. DWA局部路径规划算法论文阅读:The Dynamic Window Approach to Collision Avoidance。

    DWA(动态窗口)算法是用于局部路径规划的算法,已经在ROS中实现,在move_base堆栈中:http://wiki.ros.org/dwa_local_planner DWA算法第一次提出应该是1 ...

  4. Redis学习——常用小功能

    一.慢查询分析(查询日志:所谓慢查询日志就是系统在命令执行前后计算每条命令的执行时间,当超过预设阀值,就将这条命令的相关信息(例如:发生时间,耗时,命令的详细信息)记录下来,Redis也提供了类似的功 ...

  5. PAT乙级:1056 组合数的和 (15分)

    PAT乙级:1056 组合数的和 (15分) 给定 N 个非 0 的个位数字,用其中任意 2 个数字都可以组合成 1 个 2 位的数字.要求所有可能组合出来的 2 位数字的和.例如给定 2.5.8,则 ...

  6. 《鸟哥Linux私房菜》 全套视频和PDF资料—— 老段带你学鸟哥Linux视频课程

    <鸟哥的Linux私房菜-基础篇-服务器篇(第三版)>学习Linux极为经典的入门资料,但是还是很多同学难以坚持系统的看完整本书,最终以放弃而告终. 为了帮助大家更容易入门Linux,老段 ...

  7. 第十篇 -- 下拉列表框QComboBox

    效果图: ui_ComboBox.py # -*- coding: utf-8 -*- # Form implementation generated from reading ui file 'ui ...

  8. 福利!Python制作动态字符画(附源码)

    字符画,一种由字母.标点.汉字或其他字符组成的图画.简单的字符画是利用字符的形状代替图画的线条来构成简单的人物.事物等形象,它一般由人工制作而成:复杂的字符画通常利用占用不同数量像素的字符代替图画上不 ...

  9. django2.1实现全文检索(最详细)+遇到的坑+jieba分词

    首先django实现全文检索在这里使用的是haystack,环境是django2.1+win10 64+py3.7 1: 安装包: pip install dgango-haystack #安装全局检 ...

  10. JAVAWEB - Servlet原理及其使用>从零开始学JAVA系列

    目录 Servlet原理及其使用 什么是Servlet Servlet的使用 编写一个Servlet,使用继承HttpServlet的方式 配置web.xml 很简单的几个JSP文件 小提示,如果继承 ...