1. DataTemplate和ControlTemplate的关系

学习过DataTemplate和ControlTemplate,你应该已经体会到,控件只是数据的行为和载体,是个抽象的概念,至于它本身长成什么样子(控件内部结构),它的数据会长成什么样子(数据显示结构)都是靠Template生成的。决定控件外观的是ControlTemplate,决定数据外观的是DataTemplate,它们正是Control类的Template和ContentTemplate两个属性值

凡是Template,最终都要作用在控件上,这个控件就是Template的目标控件,也叫模板化控件。你可能会问:DataTemplate的目标应该是数据呀,怎么会是控件呢。DataTemplate给人的感觉的确是施加在数据对象上,但施加在数据对象上生成的一组控件总得有个载体吧?这个载体一般落实在一个叫做ContentPresenter对象上。ContentPresenter类只有ContentTemplate属性、没有Template属性,这就证明了承载由DataTemplate生成的一组控件是他的专门用途。

至此我们可以看出,由ControlTemplate生成的控件树其树根就是ControlTemplate的目标控件,此模板化控件的Template属性值就是一个ControlTemplate实例。与之相仿,由DataTemplate生成的控件其树根是一个ContentPresenter控件,此模板化控件的ContentTemplate属性值就是这个DataTemplate实例。因为ContentPresenter控件是ControlTemplate控件树上的一个节点,所以DataTemplate控件树是ControlTemplate里面的一个子树。

显然,如果把数据对象赋值给ContentPresenter的DataContext属性,由DataTemplate生成的控件自然会找到这个数据对象并把它当作自己的数据源。

2. 应用


2.1 应用1

为Template设置其应用目标有两种方法,一个是逐个设置控件的Template/ContentTemplate/ItemTemlate/CellTemplate等属性,不想应用Template的控件不设置;另一种是整体应用,即把Template应用到某个类型的控件或者数据上。
把ControlTemplate应用到所有控件上需要借助Style来实现,但Style不能标记X:KEY,例如下面的代码:

<Window x:Class="WpfApplication11.wnd11421"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="wnd11421" Height="" Width="">
<Window.Resources>
<!--ControlTemplate作用在所有目标控件上,Style不能标记x:key-->
<Style TargetType="{x:Type TextBox}">
<Setter Property="Template">
<Setter.Value>
<!--使用TemplateBinding,与模版目标一致-->
<ControlTemplate TargetType="{x:Type TextBox}">
<Border SnapsToDevicePixels="True"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="">
<ScrollViewer SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"></ScrollViewer>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="Margin" Value=""></Setter>
<Setter Property="BorderBrush" Value="Black"></Setter>
<Setter Property="Height" Value=""></Setter>
</Style>
</Window.Resources>
<StackPanel>
<TextBox></TextBox>
<TextBox></TextBox>
<TextBox Style="{x:Null}"></TextBox>
</StackPanel>
</Window>

Style没有X:key标记,默认为引用到所有的x:type指定的控件上,如果不想应用则将style标记为{x:null}。运行效果如下图:

2.2 应用2

把DataTemplate应用到某个数据类型上是设置DataTemplate的DataType属性,并且DataTemplate作为资源时也不能带x:key标记, 例如下面的代码:

<Window x:Class="WpfApplication11.wnd11422"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:WpfApplication11"
Title="wnd11422" Height="" Width="">
<Window.Resources>
<!--DataTemplate作用在某个数据类型上,使用DataType,不能设置x:key-->
<DataTemplate DataType="{x:Type local:Unit}">
<Grid>
<StackPanel Orientation="Horizontal">
<Grid>
<Rectangle Fill="Red" Width="{Binding Price}" Stroke="Yellow"></Rectangle>
<TextBlock Text="{Binding Year}"/>
</Grid>
<TextBlock Text="{Binding Price}"></TextBlock>
</StackPanel>
</Grid>
</DataTemplate>
</Window.Resources>
<StackPanel>
<ListBox x:Name="_listBox"></ListBox>
<ComboBox x:Name="_comBox"></ComboBox>
</StackPanel>
</Window>

代码中的DataTemplate的目标数据类型和ListBox的条目类型都是Unit:

/// <summary>
/// DataType
/// </summary>
public class Unit
{
public int Price { get; set; }
public string Year { get; set; }
}

指定数据源:

public partial class wnd11422 : Window
{
public wnd11422()
{
InitializeComponent(); List<Unit> _listUnit = new List<Unit>()
{
new Unit(){Price=, Year="" },
new Unit(){Price=, Year="" },
new Unit(){Price=, Year="" },
new Unit(){Price=, Year="" },
new Unit(){Price=, Year="" },
new Unit(){Price=, Year="" },
}; _listBox.ItemsSource = _listUnit;
_comBox.ItemsSource = _listUnit;
}
}

此时DataTemplate会自动加载到所有的Unit类型对象上,尽管我没有为ListBox和CompBox指定ItemTemplate,一样会得到下图的效果:

2.3 应用3

很多时候数据是以XML形式存取的,如果把XML节点先转换为CLR数据类型再应用DataTemplate就麻烦了。DataTemplate很智能,具有直接把XML数据节点当作目标对象的功能-----XML数据中的元素名(标签名)可以作为DataType,元素的子节点和Attribute可以使用XPath来访问。下面的代码使用XmlDataProvider作为数据源(其XPath指出的必须是一组节点),请注意细节之处的变化,结果和应用2的效果相同:

<Window x:Class="WpfApplication11.wnd11423"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="wnd11423" Height="" Width="">
<Window.Resources>
<!--Xml中的元素名可以作为DataType-->
<DataTemplate DataType="XUnit">
<Grid>
<StackPanel Orientation="Horizontal">
<Grid>
<Rectangle Fill="Red" Width="{Binding XPath=@Price}" Stroke="Yellow"></Rectangle>
<TextBlock Text="{Binding XPath=@Year}"/>
</Grid>
<TextBlock Text="{Binding XPath=@Price}"></TextBlock>
</StackPanel>
</Grid>
</DataTemplate>
<!--XPath指定一组节点-->
<XmlDataProvider x:Key="ds" XPath="XUnits/XUnit">
<x:XData>
<XUnits xmlns="">
<XUnit Price="" Year=""></XUnit>
<XUnit Price="" Year=""></XUnit>
<XUnit Price="" Year=""></XUnit>
<XUnit Price="" Year=""></XUnit>
<XUnit Price="" Year=""></XUnit>
<XUnit Price="" Year=""></XUnit>
</XUnits>
</x:XData>
</XmlDataProvider>
</Window.Resources>
<StackPanel>
<!--XmlDataProvider使用Binding-->
<ListBox x:Name="_listBox" ItemsSource="{Binding Source={StaticResource ds}}"></ListBox>
<ComboBox x:Name="_comBox" ItemsSource="{Binding Source={StaticResource ds}}"></ComboBox>
</StackPanel>
</Window>

2.4 应用4

XML的优势就是可以方便的表示带有层级的数据,比如:年级----班级----小组 或  主菜单---次菜单----三级菜单。同时WPF准备了TreeView和MenuItem控件来显示层级数据。能够帮助层级控件显示层级数据的模板是HierachicalDataTemplate。下面是实际工作中常见的例子:

值得一提的是,HierarchicalDataTemplate的作用不是MenuItem的内容而是它的Header。如果对MenuItem的单击事件进行侦听处理,我们就可以从被单击的MenuItem的Header中取出XML数据。

<Window x:Class="WpfApplication11.wnd11424"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="wnd11424" Height="" Width="">
<Window.Resources>
<!--年级模版-->
<HierarchicalDataTemplate DataType="Grade" ItemsSource="{Binding XPath=Class}">
<TextBlock Text="{Binding XPath=@Name}"></TextBlock>
</HierarchicalDataTemplate>
<!--班级模版-->
<HierarchicalDataTemplate DataType="Class" ItemsSource="{Binding XPath=Group}">
<RadioButton Content="{Binding XPath=@Name}"></RadioButton>
</HierarchicalDataTemplate>
<!--分组模版-->
<HierarchicalDataTemplate DataType="Group">
<CheckBox Content="{Binding XPath=@Name}"></CheckBox>
</HierarchicalDataTemplate> <!--数据模版-->
<XmlDataProvider x:Key="ds" XPath="Data/Grade">
<x:XData>
<Data xmlns="">
<Grade Name="一年级">
<Class Name="甲班">
<Group Name="A组"></Group>
<Group Name="B组"></Group>
<Group Name="C组"></Group>
</Class>
<Class Name="乙班">
<Group Name="A组"></Group>
<Group Name="B组"></Group>
<Group Name="C组"></Group>
</Class>
</Grade>
<Grade Name="二年级">
<Class Name="丙班">
<Group Name="A组"></Group>
<Group Name="B组"></Group>
<Group Name="C组"></Group>
</Class>
<Class Name="丁班">
<Group Name="A组"></Group>
<Group Name="B组"></Group>
<Group Name="C组"></Group>
</Class>
</Grade>
</Data>
</x:XData>
</XmlDataProvider>
</Window.Resources>
<!--监听事件-->
<StackPanel MenuItem.Click="StackPanel_Click">
<Menu ItemsSource="{Binding Source={StaticResource ds}}"></Menu>
<TreeView ItemsSource="{Binding Source={StaticResource ds}}" Margin=""></TreeView>
</StackPanel>
</Window>

事件处理器:

private void StackPanel_Click(object sender, RoutedEventArgs e)
{
// Head为XmlElement
XmlElement xmlElem = (e.OriginalSource as MenuItem).Header as XmlElement;
MessageBox.Show(xmlElem.Attributes["Name"].Value);
}

原文地址:https://www.cnblogs.com/lizhenlin/p/5906678.html

【转】WPF Template模版之DataTemplate与ControlTemplate的关系和应用(二)的更多相关文章

  1. WPF Template模版之DataTemplate与ControlTemplate的关系和应用【二】

    1. DataTemplate和ControlTemplate的关系 学习过DataTemplate和ControlTemplate,你应该已经体会到,控件只是数据的行为和载体,是个抽象的概念,至于它 ...

  2. WPF Template模版之DataTemplate与ControlTemplate【一】

    WPF Template模版之DataTemplate与ControlTemplate[一] 标签: Wpf模版 2015-04-19 11:52 510人阅读 评论(0) 收藏 举报  分类: -- ...

  3. 【转】WPF Template模版之DataTemplate与ControlTemplate(一)

    WPF系统不但支持传统的Winfrom编程的用户界面和用户体验设计,更支持使用专门的设计工具Blend进行专业设计,同时还推出了以模板为核心的新一代设计理念. 1. 模板的内涵 作为表现形式,每个控件 ...

  4. DataTemplate和ControlTemplate的关系

    DataTemplate和ControlTemplate的关系(转载自haiziguo) 一.ContentControl中的DataTemplate 在开始之前,我们先去看一下ContentCont ...

  5. WPF 基础 - DataTemplate 和 ControlTemplate 的关系和应用

    1. 关系 凡是 Template,最后都得作用到 控件 上,这个控件就是 Template 的目标控件(也称模板化控件): DataTemplate 一般是落实在一个 ContentPresente ...

  6. WPF Template模版之寻找失落的控件【三】

    “井水不犯河水”常用来形容两个组织之间界限分明.互不相干,LogicTree与控件内部这颗小树之间就保持着这种关系.换句话说,如果UI元素树上有个X:Name=“TextBox1”的控件,某个控件内部 ...

  7. WPF中UserControl和DataTemplate

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

  8. [WPF]如何使用代码创建DataTemplate(或者ControlTemplate)

    1. 前言 上一篇文章([UWP]如何使用代码创建DataTemplate(或者ControlTemplate))介绍了在UWP上的情况,这篇文章再稍微介绍在WPF上如何实现. 2. 使用Framew ...

  9. WPF DataTemplate與ControlTemplate

    一. 前言     什麼是DataTemplate? 什麼是ControlTemplate? 在stackoverflow有句簡短的解釋 "A DataTemplate, therefore ...

随机推荐

  1. [SPOJ-CIRU]The area of the union of circles/[BZOJ2178]圆的面积并

    [SPOJ-CIRU]The area of the union of circles/[BZOJ2178]圆的面积并 题目大意: 求\(n(n\le1000)\)个圆的面积并. 思路: 对于一个\( ...

  2. [P1306] 斐波那契公约数 (矩阵快速幂+斐波那契数列)

    一开始数据没加强,一个简单的程序可以拿过 gcd(f[n],f[m])=f[gcd(n,m)] 下面这个是加强数据之后的80分代码 #include<bits/stdc++.h> usin ...

  3. yii2场景的应用(scenarios)

    例如: 现在在 post表里面有 title image content 三个的字段,当我创建一个 post 的时候,我想三个字段全部是必填项,但是你修改的时候,title content 两个字段是 ...

  4. html5页面拨打电话实现的方法

    拨打电话:<p>咨询电话  <a href="tel:17337956096">拨号: 17337956096</a></p> 发送 ...

  5. ios真机中Text组件出现多余边框

    问题 ios真机中Text组件出现多余边框(模拟器不会出现,真机会出现该问题). 原因 在ios启动页设置中,预设的尺寸要求与设置中图片尺寸不符合导致屏幕精度计算出现问题(启动屏分辨率错误设置会导致手 ...

  6. 经典SQL面试题(转)

    以下题目都在MySQL上测试可行,有疏漏或有更优化的解决方法的话欢迎大家提出,我会持续更新的:) 有三个表,如果学生缺考,那么在成绩表中就不存在这个学生的这门课程成绩的记录,写一段SQL语句,检索出每 ...

  7. Linux命令第三篇

    作业三: 以操作文件的方式,新建一个用户alex echo "alex:x:1200:1200::/home/alex/:/bin/bash" >> /etc/pass ...

  8. 【最大公约数&链表】权值 @upcexam5921

    时间限制: 1 Sec 内存限制: 512 MB 题目描述 给定一个长为n的正整数序列Ai.对于它的任意一个连续的子序列{Al, Al+1, …, Ar},定义其权值W (l, r)为其长度与序列中所 ...

  9. Hibernate(12)_基于主键的双向1对1

    一.基于主键的双向1对1 1.介绍: 基于主键的映射策略:指一端的主键生成器使用 foreign 策略,表明根据"对方"的主键来生成自己的主键,自己并不能独立生成主键. <p ...

  10. 专门为ADO二层升三层的咏南中间件(特种用途)

    专门为ADO二层升三层的咏南中间件(特种用途) 演示下载:链接: https://pan.baidu.com/s/1bulGBIZ6A1nkeErxIrGsGA 密码: 22dk 解压后运行ynmai ...