WPF:在ControlTemplate中使用TemplateBinding

时间:2022-10-21 21:22:25

A bit on TemplateBinding and how to use it inside a ControlTemplate.

Introductio

Today I'll try to write a bit on TemplateBinding and how to use it inside a ControlTemplate.TemplateBinding is a type of binding used mainly for template scenarios. Here I am not going to write more on its theoretical aspect as what is TemplateBinding, when to use, blah blah blah, as lot of content is readily available on the net.  So, let's start quickly with the coding part:

First of all, let's create a new project using WPF template and place a button in it as below:

WPF:在ControlTemplate中使用TemplateBinding

Now, what I am going to do is, I am going to replace this content template for this button. So, in order to do this, open up the Button tag and add Button.Template markup tag with a new ControlTemplate as:

WPF:在ControlTemplate中使用TemplateBinding

Now as soon as you will add ControlTemplate tag, you will notice that the content of the button is gone and button is shown as a transparent rectangle. This has happened because here I told WPF to replace the defaultControlTemplate with the one which I defined. But at this point, our ControlTemplate is blank, so there is no visualization and we can see only a transparent rectangle.

Now go ahead and customize our ControlTemplate by putting Ellipse inside it as:

WPF:在ControlTemplate中使用TemplateBinding

Now we can see that we get a visualization for a button in the form of ellipse. At this point of time, it works OK, but there are scenarios where this struct breaks down.

For example, let's increase the height of button, from 35 to 105 as:

WPF:在ControlTemplate中使用TemplateBinding

In the above image, you will notice that button height is increased but the ellipse size is still the same, which is a bad UI design. And the reason this is happening is, inside a ControlTemplate, the height of an ellipse is hard coded. So, no matter, whatever height is set at parent (i.e., Button), it will not get inherited to child control (i.e.Ellipse).

So, now we have to fix this problem by using a special type of binding called TemplateBinding insideControlTemplate. So, instead of hard coding the height, we will use TemplateBinding as shown below:

WPF:在ControlTemplate中使用TemplateBinding

By setting the TargetType property of ControlTemplate, we are telling Ellipse that, any property of Button can be set to ellipse. Now, whatever the height of button will be, it will automatically be the height of ellipse also. Isn't it interesting?

Moving forward, let's do something more interesting with Fill property of ellipse.

WPF:在ControlTemplate中使用TemplateBinding

In the above snippet, I am trying to set the Fill property of an ellipse using TemplateBinding. But now the problem here is, a button doesn't have a Fill property. So, there is no one-to-one mapping for Fillproperty. Now, what to do?

No need to worry that much because button does have a Background property as:

WPF:在ControlTemplate中使用TemplateBinding

In the above image, you might have noticed that as soon as ellipse's Fill property is set to Background,ellipse becomes transparent as button's background. Now if we set button's Background property to Red, the same will be applied to ellipse too.

WPF:在ControlTemplate中使用TemplateBinding

So, one can understand how much magic we can do with TemplateBinding.
Now, let's work a little bit on code cleanup.

ControlTemplate Inside Resource Dictionary

For better code readability, we will move out our ControlTemplate code and put it inside a resource dictionary as:

WPF:在ControlTemplate中使用TemplateBinding

So, now we can see as earlier that whatever visual property for button is set, all get applied to ellipse as well.

Hope this tip was useful and gave you the basic idea on how to use TemplateBinding.

WPF:在ControlTemplate中使用TemplateBinding的更多相关文章

  1. 年度巨献-WPF项目开发过程中WPF小知识点汇总(原创+摘抄)

    WPF中Style的使用 Styel在英文中解释为”样式“,在Web开发中,css为层叠样式表,自从.net3.0推出WPF以来,WPF也有样式一说,通过设置样式,使其WPF控件外观更加美化同时减少了 ...

  2. WPF Prism MVVM 中 弹出新窗体. 放入用户控件

    原文:WPF Prism MVVM 中 弹出新窗体. 放入用户控件 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/qq_37214567/artic ...

  3. WPF实现窗体中的悬浮按钮

    WPF实现窗体中的悬浮按钮,按钮可拖动,吸附停靠在窗体边缘. 控件XAML代码: <Button x:Class="SunCreate.Common.Controls.FloatBut ...

  4. 模板中的 TemplateBinding 问题

    昨天一个朋友向我求助一个自定义水印控件绑定的问题,问题出在文本框中输入的文本,不能绑定到 相应的依赖属性上(自定义的依赖属性 PassText),他纠结了很久找不出问题所在.问题帮他解决后,这里稍 做 ...

  5. WPF 显示文件列表中使用 ListBox 变到ListView 最后使用DataGrid

    WPF 显示文件列表中使用 ListBox 变到ListView 最后使用DataGrid 故事背景: 需要检索某目录下文件,并列出来,提供选择和其他功能. 第一版需求: 列出文件供选择即可,代码如下 ...

  6. 如何在WPF应用程序中使用视频处理控件TVideoGrabber

    要在WPF 中使用 TVideoGrabber 组件,需要像下面的方法来使用 VS.NET(DLL) 版本的组件: ——复制TVideoGrabber_x.x.x.x_x86.dll到c:/windo ...

  7. WPF窗体视图中绑定Resources文件中字符串时,抛出:System&period;Windows&period;Markup&period;StaticExtension

    问题描述: 在Resources.resx定义了一个静态字符串字段Title,并在WPF窗体视图中绑定为窗体的标题: Title="{x:Static local:Resources.Tit ...

  8. wpf将表中数据显示到datagrid示例(转)

    原文:http://www.jb51.net/article/47120.htm 这篇文章主要介绍了wpf将表中数据显示到datagrid示例,需要的朋友可以参考下 a.在.xaml文件中拖入一个da ...

  9. 在WPF的DATAGRID中快速点击出现在ADDNEW或EDITITEM事务过程不允许DEFERREFRESH

    原文 在WPF的DATAGRID中快速点击出现在ADDNEW或EDITITEM事务过程不允许DEFERREFRESH 在项目中关于DataGrid的遇到过一些问题,其中是关于迁入CheckBox的双向 ...

随机推荐

  1. SqlServer性能优化 即席查询(十三)

    执行计划,查询类别: 1.即席查询     2.预定义查询 select c.EnglishProductCategoryName,p.EnglishProductName,p.Color,p.Siz ...

  2. &lbrack;LeetCode&rsqb;&lbrack;Java&rsqb;Triangle&commat;LeetCode

    Given a triangle, find the minimum path sum from top to bottom. Each step you may move to adjacent n ...

  3. Docker 修改默认存储位置

    首先使用 docker info 查看 docker 的基本信息 sudo docker info Containers: 0 Images: 5 Storage Driver: devicemapp ...

  4. R中,去掉dataframe中的NA行

    R中使用complete.cases 和 na.omit来去掉包含NA的行 现在有个一data.frame  datafile如下所示 Date        sulfate nitrate ID 1 ...

  5. CentOS 安装 mono

    1. 安装EPEL 2. 安装软件包 yum install bison gettext glib2 freetype fontconfig libpng libpng-devel libX11 li ...

  6. SpringMVC配置双数据源,一个java项目同时连接两个数据库

    数据源在配置文件中的配置 请点击--->   java架构师项目实战,高并发集群分布式,大数据高可用,视频教程 <pre name="code" class=&quot ...

  7. Linux DHCP原理

    DHCP作用 DHCP(Dynamic Host Configuration Protocol,动态主机配置协议)是一个局域网的网络协议,使用UDP协议工作, 主要有两个用途:给内部网络或网络服务供应 ...

  8. Orleans框架简单示范

    希望现在学习Orleans不会晚,毕竟Server Fabric都开源了.本篇博客从Sample的HelloWorld示例程序来解读Orleans的Grains. Server配置参考 : https ...

  9. CF666E Forensic Examination

    思路 线段树合并+广义SAM 先把所有串都插入SAM中,然后用线段树合并维护right集合,对S匹配的同时离线询问,然后就好啦 代码 #include <cstdio> #include ...

  10. mybatis进行一对多时发现的问题总结

    1.定义一对多xml文件时,所有的resultMap中的column的值一定不要重复,否则mybatis会发生错误,如果有重名,定义别名,column中的名字一定要与查询出的名字一致,如: 52行的别 ...