1.从Blend工具箱中添加一个Button,按住shift,将尺寸调整为125*125;

2.右键点击此按钮,选择Edit control parts(template)>Edit a copy...

3.在弹出的Create style resource对话框中,修改新按钮样式的名称

4.在左侧的Object and timeline面板中选中ContentPresenter元素,按Ctrl+X将此标记临时保存到内存中

5.选中Chrome,按Delete键删除

6.选中Template,在工具条中双击Grid,添加一个Grid到Template中

7.双击Grid,按Ctrl+V将之前保存在内存中的ContentPresenter元素粘贴到Grid中

8.在Property面板的Layout中修改ContentPresenter的属性,将HorizontalAllignment和VerticalAllignment设为Center,将Margin属性Reset为0

9.添加一个Ellipse到Grid中,设置其width和Height属性为Auto,这样此圆会始终与Grid大小相同

10.选中Ellipse,然后在Brushes中选择GradientBrush

11.选中左侧的Stop,调整其颜色为深蓝色,然后将其向右拖到大约三分之一的位置

12.在工具条中选择Brush Transform工具,然后按住圆上的箭头调整使其朝向右上角

13.选择Stroke,设置颜色为黄色,StrokeThickness为5

14.在Triggers面板中点击+Property,添加一个PropertyTrigger

15.选择IsMouseOver,然后修改结果为True

16.将左侧的Stop的颜色设置为浅蓝色,并将StrokeThickness设置为8

17.点击ScopeUp按钮推出Template编辑,然后按F5,即可看到自定义按钮的实际效果

不过这个自定义按钮还是有点问题:按钮的Content属性是字符串"Button",可实际上看不到这个内容。原因是在编辑Template时,ContentPresenter(用于放置Content的元素)和Ellipse的顺序不正确,导致Content被Ellipse遮住了,只要进入编辑模式将ContentPresenter的位置调整下就好了

修正后的自定义按钮的行为就很正常了:

注意,由于Button是一个Content控件,具有Content属性,因此可以包含任何WPF控件/元素,比如图片等,而不仅仅是"Button"这样的字符串。下篇文章中就为这次制作的自定义按钮的Content属性设置为由Expression Design导出的矢量图。

WPF学习笔记-用Expression Blend制作自定义按钮的更多相关文章

  1. WPF学习笔记-用Expression Design制作矢量图然后导出为XAML

    WPF学习笔记-用Expression Design制作矢量图然后导出为XAML 第一次用Windows live writer写东西,感觉不错,哈哈~~ 1.在白纸上完全凭感觉,想象来画图难度很大, ...

  2. Expression Blend制作自定义按钮(转)

    来源:http://www.cnblogs.com/iChina/archive/2011/11/25/2262854.html Expression Blend制作自定义按钮 1.从Blend工具箱 ...

  3. Expression Blend创建自定义按钮

    在 Expression Blend 中,我们可以在美工板上绘制形状.路径和控件,然后修改其外观和行为,从而直观地设计应用程序.Button按钮也是Expression Blend最常用的控件之一,在 ...

  4. WPF学习笔记(2)——动画效果按钮变长

    说明(2017-6-12 11:26:48): 1. 视频教程里是把一个按钮点击一下,慢慢变长: 注意几个方面: (1)RoutedEvent="Button.Click",这里面 ...

  5. 【WPF学习笔记】之如何点登录按钮时判断用户名密码进行登录:动画系列之(二)

    ...... 承接动画系列之(一)的代码: 再添加登录按钮代码进行登录,验证用户名和密码在数据库是否正确. 直接上代码: using System; using System.Collections. ...

  6. Dynamic CRM 2013学习笔记(二十一)自定义审批流2 - 配置按钮

    上次介绍了 Dynamic CRM 2013学习笔记(十九)自定义审批流1 - 效果演示 现在开始介绍如何配置审批流,首先在form上添加三个按钮,Submit, Agree, Reject: 1. ...

  7. Dynamic CRM 2013学习笔记(三十七)自定义审批流7 - 初始化(整套审批流下载、安装)

    前面介绍了自定义审批流的配置.使用,这篇介绍下如何进行初始化. 一. 下载 从下面的地址下载整个审批流: http://yunpan.cn/cZ5Rdx5HCt3VF 下载完后,一共有三块内容: 二. ...

  8. VSTO 学习笔记(十二)自定义公式与Ribbon

    原文:VSTO 学习笔记(十二)自定义公式与Ribbon 这几天工作中在开发一个Excel插件,包含自定义公式,根据条件从数据库中查询结果.这次我们来做一个简单的测试,达到类似的目的. 即在Excel ...

  9. WPF 学习笔记-在WPF下创建托盘图标

    原文:WPF 学习笔记-在WPF下创建托盘图标 首先需要在项目中引用System.Windows.Forms,System.Drawing; using System; using System.Co ...

随机推荐

  1. windows10 家庭版 无法远程2012的解决

    windows 10安装最新补丁后无法远程windows server 2008.2012服务器 报错信息如下:出现身份验证错误,要求的函数不受支持  可能是由于CredSSP加密Oracle修正. ...

  2. 4.RDD常用算子之transformations

    RDD Opertions     transformations:create a new dataset from an existing one         RDDA --> RDDB ...

  3. 二分图匹配——poj1469

    关于本题二分图的匹配关系始终是加单向边用左边去匹配右边,match表示的是右边的人匹配的对应的左边的点 /* 关于本题二分图的匹配 链接的关系始终是单向边 用左边去匹配右边,match表示的是右边的人 ...

  4. idea加载完文件报错:java:-source 1.7中不支持lambda表达式 解决方案

    1.file - Project Structure ctrl+alt+shift+s 2.modules 中把7换成8

  5. vue-resourse简单使用方法

    一.安装引用 安装: npm install vue-resource --save-dev 引用: /*引入Vue框架*/ import Vue from 'vue' /*引入资源请求插件*/ im ...

  6. MYSQL常用命令(转)

    1.导出整个数据库mysqldump -u 用户名 -p --default-character-set=latin1 数据库名 > 导出的文件名(数据库默认编码是latin1)mysqldum ...

  7. angularjs中使用swiper时不起作用,最后出现空白位

    controller.js中定义swipers指令: var moduleCtrl = angular.module('newscontroller',['infinite-scroll','ngTo ...

  8. C# FTP上传下载(支持断点续传)

    <pre class="csharp" name="code"><pre class="csharp" name=&quo ...

  9. 服务安全-JWT(JSON Web Tokens):百科

    ylbtech-服务安全-JWT(JSON Web Tokens):百科 JSON Web Tokens是一种开放的行业标准 RFC 7519方法,用于在双方之间安全地表示索赔. JWT.IO允许您解 ...

  10. centos 以太坊多节点私链搭建

    环境  centos 7   搭建 3 个节点的 私链. 第一步 安装 一些依赖的 工具 yum update -y && yum install git wget bzip2 vim ...