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. 小型资源管理器之动态添加TreeView节点

    FrmMain主界面 using System; using System.Collections.Generic; using System.ComponentModel; using System ...

  2. Map、Set使用过程中可能出现的问题

    修改了key之后不能remove class Student implements Serializable { Integer id; String name; public Student(Int ...

  3. [CF768G] The Winds of Winter

    Discription: 断开树的每一个点会形成一个森林,然后可以进行一次操作:将森林中的一棵树接到另一棵树上.使得森林中size最大的树size最小.依次输出对于每个结点的最小size值 Hint: ...

  4. Java 构造器 考虑用静态构造方法代替构造器

    类可以提供一个公有的静态工厂方法,它是一个返回类的实例的静态方法.静态工厂方法与设计模式中的工厂方法模式不同. 优势: 静态工厂方法与构造器不同的第一大优势在于,它们有名称.一个类只能有一个带有指定签 ...

  5. UE4入门(三)

  6. 常用的sort打乱数组方法真的有用?

    JavaScript 开发中有时会遇到要将一个数组随机排序(shuffle)的需求,一个常见的写法是这样: function shuffle(arr) { arr.sort(function () { ...

  7. html冲刺

    html知识点回顾与面试题<!--1.<DOCTYPE>告诉浏览器当前文档要以何种HTML或者XHTML规范解析2.语义标签strong 粗体em 斜体del 删除线ins 下划线 ...

  8. 利用百度OCR实现验证码自动识别

    在爬取网站的时候都遇到过验证码,那么我们有什么方法让程序自动的识别验证码呢?其实网上已有很多打码平台,但是这些都是需要money.但对于仅仅爬取点数据而接入打码平台实属浪费.所以百度免费ocr正好可以 ...

  9. 如何将Powerdesign物理模型中的name复制成comment

    Option Explicit ValidationMode = True InteractiveMode = im_Batch Dim mdl ' the current model ' get t ...

  10. netty中的ChannelHandler和ChannelPipeline

    netty中的ChannelHandler和ChannelPipeline ChannelHandler 家族 https://www.w3cschool.cn/essential_netty_in_ ...