zoukankan      html  css  js  c++  java
  • 深入详解WPF ControlTemplate

    WPF包含数据模板和控件模板,其中控件模板又包括ControlTemplate和ItemsPanelTemplate,这里讨论一下WPF ControlTemplate。

    其实WPF的每一个控件都有一个默认的模板,该模板描述了控件的外观以及外观对外界刺激所做出的反应。我们可以自定义一个模板来替换掉控件的默认模板以便打造个性化的控件。

    与Style不同,Style只能改变控件的已有属性值(比如颜色字体)来定制控件,但控件模板可以改变控件的内部结构(VisualTree,视觉树)来完成更为复杂的定制,比如我们可以定制这样的按钮:在它的左办部分显示一个小图标而它的右半部分显示文本。

    要替换控件的模板,我们只需要声明一个WPF ControlTemplate对象,并对该ControlTemplate对象做相应的配置,然后将该ControlTemplate对象赋值给控件的Template属性就可以了。

    WPF ControlTemplate包含两个重要的属性:

    1,VisualTree,该模板的视觉树,其实我们就是使用这个属性来描述控件的外观的

    2,Triggers,触发器列表,里面包含一些触发器Trigger,我们可以定制这个触发器列表来使控件对外界的刺激发生反应,比如鼠标经过时文本变成粗体等。

    参考以下代码

    1. Button>   
    2. Button.TemplateControlTemplate>   
    3. < !--定义视觉树-->   
    4. Grid>   
    5. Ellipse Name="faceEllipse" Width="
      {TemplateBinding Button.Width}" 
      Height="{TemplateBinding Control.Height}" 
      Fill="{TemplateBinding Button.Background}"/>   
    6. TextBlock Name="txtBlock" 
      Margin="{TemplateBinding Button.Padding}"
       VerticalAlignment="Center" 
      HorizontalAlignment="Center" 
      Text="{TemplateBinding Button.Content}" />   
    7. < /Grid< !--定义视觉树_end-->   
    8. < /ControlTemplate>   
    9. < /Button.Template>   
    10. < /Button

    在上面的代码中,我们修改了Button的Template属性,我们定义了一个WPF ControlTemplate,在< ControlTemplate> ... < /ControlTemplate>之间包含的是模板的视觉树,也就是如何显示控件的外观,我们这里使用了一个Ellipse(椭圆)和一个TextBlock(文本块)来定义控件的外观。

    很容易联想到一个问题:控件(Button)的一些属性,比如高度、宽度、文本等如何在新定义的外观中表现出来呢? 
    我们使用TemplateBinding 将控件的属性与新外观中的元素的属性关联起来Width="{TemplateBinding Button.Width}" ,这样我们就使得椭圆的宽度与按钮的宽度绑定在一起而保持一致,同理我们使用Text="{TemplateBinding Button.Content}"将TextBlock的文本与按钮的Content属性绑定在一起。

    http://developer.51cto.com/art/200912/172520.htm

  • 相关阅读:
    android笔记5——同一个Activity中Fragment的切换
    JavaScript 刚開始学习的人应知的 24 条最佳实践
    位运算符之异或的化腐朽为奇妙
    unity常见问题之20题
    汉澳sinox不受openssl心血漏洞影响并分析修复其漏洞代码
    基于canvas和Web Audio的音频播放器
    poj2595(凸包)
    HDU 1257 最少拦截系统(dp)
    【iOS开发-33】学习手动内存管理临时抛弃ARC以及retain/assign知识——iOSproject师面试必考内容
    万能狗! 程序猿屌丝独自创业之路(一)
  • 原文地址:https://www.cnblogs.com/sjqq/p/7905644.html
Copyright © 2011-2022 走看看