ControlTemplate用于描述控件本身. 使用TemplateBinding来绑定控件自身的属性, 比如{TemplateBinding Background}
DataTemplate用于描述控件的Content. 使用Binding来绑定数据对象的属性, 比如{Binding PersonName}

一般来说, ControlTemplate内有一个ContentPresenter, 这个ContentPresenter的ContentTemplate就是DataTemplate类型

Control类型
    - Template属性 (ControlTemplate类型)
        - ContentPresenter
            - ContentTemplate (DataTemplate类型)

ContentControl类型
    - Template属性 (ControlTemplate类型) 继承自Control
    - ContentTemplate (DataTemplate类型)

ItemsControl类型
    - Template属性 (ControlTemplate类型) 继承自Control
    - ItemsPanel属性 (ItemsPanelTemplate类型) 指定布局容器
    - ItemTemplate属性 (DateTemplate类型) 每个Item的Template

<Style TargetType="Button">
  <Setter Property="OverridesDefaultStyle" Value="True"/>
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="Button">
        <Grid>
          <Ellipse Fill="{TemplateBinding Background}"/>
          <ContentPresenter HorizontalAlignment="Center"
                            VerticalAlignment="Center"/>
        </Grid>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

https://www.cnblogs.com/YangMark/p/3154375.html

一. 前言

什麼是DataTemplate? 什麼是ControlTemplate? 在stackoverflow有句簡短的解釋 "A DataTemplate, therefore, is used to provide visual structure for underlying data, while a ControlTemplate has nothing to do with underlying data and simply provides visual layout for the control itself."

http://stackoverflow.com/questions/1340108/difference-between-control-template-and-datatemplate-in-wpf

意思是說,DataTemplate被使用在提供底層的數據;ControlTemplate則被使用在對控件本身可見布局的樣式。因此關於DataTelmplate與ControlTemplate的不同之處,我們應該從控件是如何使用著手。

二. Control, ContentControl, and ItemsControl

由下面三個邏輯樹,可知道ContentControl與ItemsControl均繼承自Control。而Control又繼承FrameworkElement,莫名奇妙的我們又多了一個問題-為什麼控件都要繼承FrameworkElement呢?

FrameworkElement具備以下幾點特性:

1.布局(Layout):定義了MaxHeight與MinHeight等屬性,故當我們呼叫控件時,控件本身即會在UI上佔位。

2.生命週期事件:定義Loaded/UnLoaded等事件,可通知後端控件何時被加載。

3.DataContext:在MVVM設計模式下,我們通常會使用DataContext綁定我們的ViewModel,DataContext屬性就是由FrameworkElement所提供。

故控件均具有以上特性,因此我們能直接呼叫控件,並知道何時應該被加載。

以下是WPF中常使用的控件之結構樹狀圖

三. DataTemplate and ControlTemplate

  上一章介紹完一些控件的特性以及附屬關係,現在該思考的是我們如何使用這些控件呢??如:ListBox出現時,我們需要的是底層數據能展示在UI上(DataTemplate);Button有時或許我們會希望能修改事件觸發(IsPress or IsMouseOver)的結果(ControlTemplate)。

  因此我們可以說兩者最大的不同在於DataTemplate服務於無形的數據, ControlTemplate則服務於有形的Control。而ControlTemplate還有一個特別重要的屬性-Triggers, 我們可藉由Triggers控制Control本身的屬性。

以下將以Button為例,分別在DataTemplate與ControlTemplate中加上同樣的樣式, 我們就可以知道兩者的不同了。

DataTemplate

            <Button>
<Button.ContentTemplate>
<DataTemplate>
<Grid>
<Ellipse Width="100" Height="100" x:Name="ellipse">
<Ellipse.Fill>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<GradientStop Offset="0" Color="blue"/>
<GradientStop Offset="1" Color="LightBlue"/>
</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>
</DataTemplate>
</Button.ContentTemplate>
</Button>

ControlTemplate

            <Button>
<Button.Template>
<ControlTemplate TargetType="Button">
<Grid>
<Ellipse Width="100" Height="100" x:Name="ellipse">
<Ellipse.Fill>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<GradientStop Offset="0" Color="blue"/>
<GradientStop Offset="1" Color="LightBlue"/>
</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>
</Button.Template>
</Button>

發現了嗎??

同樣的樣式,在DataTemplate與ControlTemplate卻有不同的結果。

DataTemplate存在於ContentTemplate中, 所修改的樣式僅修改Button中Content的樣式。而ControlTemplate卻將Button整個樣式修改掉了。

回到我們一開始說的,DataTemplate服務於無形的數據(Data), ControlTemplate則服務於有形的Control。

https://www.cnblogs.com/YangMark/p/3172725.htmlWPF 正確理解ContentPresenter

我們先由下圖來看類層次,可知ContentControl繼承Control,ContentPresenter繼承FrameworkElement(Control也繼承FrameworkElement);

同樣的,ItemsControl繼承Control,ItemsPresenter繼承FrameworkElement.

在Control類並沒有Content屬性, 所以在這之上再寫了一個ContentControl, 使控件有Content屬性可以顯示內容, 而

ContentPresenter就是負責將Content屬性顯示出來.

接著來我們看一下實例,

實例1:不使用ContentPresenter

使用ContentPresenter

            <ContentControl Content="YangMark">
<ContentControl.Template>
<ControlTemplate TargetType="ContentControl">
<ContentPresenter></ContentPresenter>
</ControlTemplate>
</ContentControl.Template>
</ContentControl>
輸出結果: YangMark
正確顯示Content!!
 
不使用ContentPresenter
            <ContentControl Content="YangMark">
<ContentControl.Template>
<ControlTemplate TargetType="ContentControl"> </ControlTemplate>
</ContentControl.Template>
</ContentControl>
輸出結果:      
無法顯示出Content!!
 
結論1:ContentPresenter通常出現在ControlTemplate內,且若不使用ContentPresenter則
Content屬性就無法正常顯示。
 
 
實例2:ContentPresenter中的ContentSource屬性
為什麼只為了顯示出Content屬性要大費周張弄出ContentPresenter呢??
我們可以先比較以下兩種代碼不同之類,
            <ContentControl Content="YangMark" ContentStringFormat="Hello!! {0}">
<ContentControl.Template>
<ControlTemplate TargetType="ContentControl">
<ContentPresenter ContentSource="Content"></ContentPresenter>
</ControlTemplate>
</ContentControl.Template>
</ContentControl>

輸出結果:Hello!! YangMark

            <ContentControl Content="YangMark" ContentStringFormat="Hello!! {0}">
<ContentControl.Template>
<ControlTemplate TargetType="ContentControl">
<ContentPresenter Content="{TemplateBinding Content}"></ContentPresenter>
</ControlTemplate>
</ContentControl.Template>
</ContentControl>
輸出結果:YangMark
僅出現Content屬性的內容!!
 
結論2:<ContentPresenter/>與<ContentPresenter ContentSource="Content"/> 意義上是相同的。
它們同時綁定了Content, ContentStringFormat, ContentTemplate和ContentTemplateSelector等內容

屬性。

若僅用Content="{TemplateBinding Content}"代表只綁定Content屬性而已,且ContentSource會失效。
 
 

實例3:ContentSource的應用

 以HeaderContentControl為例,使用ContentPresenter綁定內容屬性。
            <HeaderedContentControl Header="Header" HeaderStringFormat="I'm {0}"
Content="Content" ContentStringFormat="I'm {0}">
<HeaderedContentControl.Template>
<ControlTemplate TargetType="HeaderedContentControl">
<DockPanel> <ContentPresenter ContentSource="Header" DockPanel.Dock="Top"></ContentPresenter> <!--等同於<ContentPresenter ContentSource="Content"/>-->
<ContentPresenter></ContentPresenter> </DockPanel>
</ControlTemplate>
</HeaderedContentControl.Template>
</HeaderedContentControl>

輸出結果:

I'm Header

I’m Content

結論3:ContentSource若指定對象為Content是可以省略的,若不為Content(如:Header)則不能省略。

總結:

Content, ContentStringFormat, ContentTemplate和ContentTemplateSelector等屬性, 我將它們稱為內容屬性.

1. ContentPresenter的作用就是用來顯示內容屬性

2.ContentSource若指定對象為Content,則等同於<ContentPresenter/>; 若指定對象不為Content,

則必須使用ContentSource聲明指定的對象.

WPF : ControlTemplate和DataTemplate的区别的更多相关文章

  1. WPF中ControlTemplate和DataTemplate的区别

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

  2. ControlTemplate,ItemsPanelTemplate,DataTemplate(wpf)

    在WPF中有三大模板ControlTemplate,ItemsPanelTemplate,DataTemplate.其中ControlTemplate和ItemsPanelTemplate是控件模板, ...

  3. Style、ControlTemplate 和 DataTemplate 触发器

    本文摘要:    1:属性触发器:    2:数据触发器:    3:事件触发器: Style.ControlTemplate 和 DataTemplate 都有触发器集合.    属性触发器只检查W ...

  4. 背水一战 Windows 10 (76) - 控件(控件基类): Control - 基础知识, 焦点相关, 运行时获取 ControlTemplate 和 DataTemplate 中的元素

    [源码下载] 背水一战 Windows 10 (76) - 控件(控件基类): Control - 基础知识, 焦点相关, 运行时获取 ControlTemplate 和 DataTemplate 中 ...

  5. WPF 动态创建 DataTemplate 及数据绑定

    WPF 动态创建 DataTemplate 及数据绑定 运行环境:Window7 64bit,.NetFramework4.61,C# 6.0: 编者:乌龙哈里 2017-02-22 参考: star ...

  6. 深入详解WPF ControlTemplate

    WPF包含数据模板和控件模板,其中控件模板又包括ControlTemplate和ItemsPanelTemplate,这里讨论一下WPF ControlTemplate. 其实WPF的每一个控件都有一 ...

  7. WPF中Auto与*的区别

    原文:WPF中Auto与*的区别 Auto 表示自动适应显示内容的宽度, 如自动适应文本的宽度,文本有多长,控件就显示多长. * 则表示按比例来分配宽度. <ColumnDefinition W ...

  8. WPF 获取 ListView DataTemplate 中控件值

    原文:WPF 获取 ListView DataTemplate 中控件值 版权声明:本文为博主原创文章,未经博主允许可以随意转载 https://blog.csdn.net/songqingwei19 ...

  9. WPF的ControlTemplate和DataTemplate简介

    首先理清几个概念,Template.ControlTemplate.ContentTemplate.DataTemplate.ContentControl 这几个东西名字都差不多,意思感觉也接近,初次 ...

随机推荐

  1. 你觉得我的这段Java代码还有优化的空间吗?

    上周,因为要测试一个方法的在并发场景下的结果是不是符合预期,我写了一段单元测试的代码.写完之后截了个图发了一个朋友圈,很多人表示短短的几行代码,涉及到好几个知识点. 还有人给出了一些优化的建议.那么, ...

  2. Java基础00-方法引用32

    1. 方法引用 Java8新特征之方法引用 1.1 体验方法引用 代码示例: 需求: 1:定义一个接口(Printable):里面定义一个抽象方法: void printString(String s ...

  3. [刘阳Java]_eayui-pagination分页组件_第5讲

    分页组件也是很基本的应用,这里我只给出一段简单的代码 关键注意一点:分页组件可以在上面添加buttons按钮,或者自定义分页组件的外观.这些内容需要自行的查看EasyUI的API文档 <!DOC ...

  4. C++:常量

    /** https://www.runoob.com/cplusplus/cpp-constants-literals.html * 常量: 固定值,一旦定义不能被修改 * 整数常量:可以是十进制.八 ...

  5. Luogu2839 [国家集训队]middle 题解

    题目很好,考察对主席树的深入理解与灵活运用. 首先看看一般解决中位数的思路,我们二分一个 \(mid\),将区间中 \(\ge mid\) 的数置为 \(1\),小于的置为 \(-1\),然后求区间和 ...

  6. 【洛谷P1318积水面积】最小生成树

    我写一篇绝对原创的题解,算法原创,求洛谷通过!!!(让更多人看到这篇题解) 绝大多数人肯定认为这道题是一道模拟题 以下为正解 我们来看一下这一道题,其实就是找到左右高点,在模拟. 但是这个是正常人的想 ...

  7. python调用接口方式

    python中调用API的几种方式: - urllib2- requests 一.调用别人的接口 案例1.urllib2 import urllib2, urllib github_url ='htt ...

  8. 浏览器不支持promise的finally

    IE浏览器以及edge浏览器的不支持es6里面promise的finally 解决方法: 1.npm install axios promise.prototype.finally --save 2. ...

  9. loadrunner 利用JDBC操作mysql数据库

    import lrapi.lr;import java.util.ArrayList;import java.util.List; import java.sql.Connection; import ...

  10. 使用C#winform编写渗透测试工具--Web指纹识别

    使用C#winform编写渗透测试工具--web指纹识别 本篇文章主要介绍使用C#winform编写渗透测试工具--Web指纹识别.在渗透测试中,web指纹识别是信息收集关键的一步,通常是使用各种工具 ...