zoukankan      html  css  js  c++  java
  • Expression Blend学习5控件TextButton

    Expression Blend ButtonStyle- TextButton

    本章以TextButton为例,讲解如何最简单,最快速的制作一个专业的TextButton。

    对于这个TextButton的需求是这样的,鼠标悬浮时,光标变为“手指”,并改变按钮的前景色,鼠标按下时,有明显的按下的感觉。

    都会遇到一个问题,ContentPresenter没有Foreground属性,如何改变前景色?

    新建一个TextBlock,输入I'm TextButton

    wps_clip_image-26354

      右击TextBolck,选择Make Into Control

    wps_clip_image-29991

      为我们的样式取名为TextButtonStyle,Blend默认每次新建样式时的ControlType就是Button,所以直接点击OK

    wps_clip_image-7276

      看一下Blend为我们生成的元素列表,他将TextBlock自动转换为ContentPresenter,并用一个Grid包裹。

    wps_clip_image-28645

    鼠标悬浮时,改变按钮的前景颜色,为了实现这个效果,先将ContentPresenter替换为ContentControl 。(替换方法为:先删除ContentPresenter,然后点击工具条上的wps_clip_image-7380按钮,在搜索栏中输入ContentControl,如果没结果请稍等几十秒s)

    wps_clip_image-22116

    注意:wpf中使用这种方法也是可行的。只是将ContentPresenter替换为ContentControl后,必须给ContentControl加上“SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"”。

      将ContentControl.Content属性与Button逻辑树中的Content属性绑定。点击ContentControl,在右侧属性面板中,找到Content属性,点击Content属性最右侧的小方块。    

    wps_clip_image-1350

      在弹出菜单中,顺序选择Template Binding -> Content

    wps_clip_image-20443

      如果你上面的步骤都操作正确的话,ContentControl的Content属性会自动绑定我们之前输入的文本    

    wps_clip_image-27805

    注意:wpf的过程中是丢失字体的,需要重新添加

      为什么要使用ContentControl?原因在于ContentControl比ContentPresenter多了一个Foreground属性。这样我们可以方便的改变按钮的前景色,无论他是文本还是Path。下面我们开始制作OnMouseOver时的动画,尝试改变前景色。打开States面板,选择MouseOver,点击显示时间线wps_clip_image-23112图标,将黄色时间线拖拽到0.3秒处。  

    wps_clip_image-22820

      设置前景色为#FFDE9107 

    wps_clip_image-2539

      点击停止录制按钮,暂时暂停动画的录制。 

    wps_clip_image-26357

      设置Cursor为hand,然后点击开始录制按钮,启动动画录制。 

    wps_clip_image-7971

      此时MouseOver状态下动画面板应该是这样的 

    wps_clip_image-25140

      接下来我们定义压下效果,首先右击States面板中的MouseOver,选择Copt State To然后选择Pressed 

    wps_clip_image-19940

      点击Preesed状态,在对象面板中选中ContentControl 

    wps_clip_image-17695

      设置ContentControl的RenderTransform.TranslateX 为1 ,RenderTransform.TranslateY为1 

    wps_clip_image-26043

      此时Pressed状态下动画面板应该是这样的 

    wps_clip_image-4463

  • 相关阅读:
    关于 php json float 出现很多位的问题
    做 Excel 的 XML schema.xsd
    笔记:Python 默认参数必须指向不变对象
    Bartender 使用 Excel xlsx 数据库时出现 0x800A0E7A
    Javascript 中 的 for ... in 和 for ... of 差别
    关于跨域资料收集 (2019-01-11)
    ThinkPHP3 和 ThinkPHP5 不是一个团队做的
    记录一下:给电推剪改锂电池
    为你的Web程序加个启动画面
    前端不为人知的一面--前端冷知识集锦 前端已经被玩儿坏了!像console.log()可以向控制台输出图片
  • 原文地址:https://www.cnblogs.com/iChina/p/2264661.html
Copyright © 2011-2022 走看看