WPF学习笔记-用Expression Blend制作自定义按钮

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导出的矢量图。

时间: 2025-01-15 03:44:13

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

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

第一次用Windows live writer写东西,感觉不错,哈哈~~ 1.在白纸上完全凭感觉,想象来画图难度很大,尤其是象我这样毫无美术基础,毫无艺术细胞的人而言.因此可以找个参照物,比如一张数码照片,对着这个图片描,可以大体上把物体的轮廓描出来. 2.Ctrl+C然后Ctrl+V,在Expression Design中添加一张位图,注意,此时Design会自动新建一个图层(layer),双击修改图层名为MousePhoto: 3.单击Layer面板右下角的New layer按钮,添加新图层

quick-cocos2d-x学习笔记【6】——制作自定义效果按钮菜单

前面提到的是基本的菜单使用,还是很容易的,不过我们在商业产品中,经常看到的按钮都是非常好看,不光光是图片做得精美,而且动画效果也很棒.Candy Crash都玩过吧,看它们那个按钮,真的像果冻一样,效果确实很赞,所以我们也来做个,当然不是它那个效果,而且点击之后有一个抖动的效果.像这样, 好了,开始做个吧,我这个也是搬了一下coinflip中的按钮代码,算是学习一下. 创建一个views文件夹,里面创建一个MyButton.lua文件,这个就是我们的自定义按钮类了.实现的原理比较简单,在ui.n

Expression Blend创建自定义按钮

在 Expression Blend 中,我们可以在美工板上绘制形状.路径和控件,然后修改其外观和行为,从而直观地设计应用程序.Button按钮也是Expression Blend最常用的控件之一,在项目中扮演着重要的角色,但是我们会发现,默认外观的 Button,其实一点也不美观,也不够吸引人. 因此,在本篇文章中,我将介绍如何在Expression Blend中自定义button按钮控件,我选择的是将图片转变成按钮,再添加自定义mouseover鼠标滑过的效果. 详细步骤如下: 1 启动Ex

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

说明(2017-6-12 11:26:48): 1. 视频教程里是把一个按钮点击一下,慢慢变长: 注意几个方面: (1)RoutedEvent="Button.Click",这里面要用Button,是属性名,而不是name名button1. (2)这些东西要写在成对的标签里面,比如这个是<Button></button>,如果是单个的那种标签,可以拆分成对,比如下面我自己的<MediaElement/>本身是一个单独标签,可以手动拆分成<Med

Linux学习笔记——例说makefile 增加自定义共享库

0.前言 从学习C语言开始就慢慢开始接触makefile,查阅了很多的makefile的资料但总感觉没有真正掌握makefile,如果自己动手写一个makefile总觉得非常吃力.所以特意借助博客总结makefile的相关知识,通过例子说明makefile的具体用法. 例说makefile大致分为4个部分 1.只有单个C文件 2.含有多个C文件 3.需要包括头文件路径 4.增加宏定义 5.增加系统共享库 6.增加自定义共享库 7.一个实际的例子 [代码仓库]--makefile-example

WPF学习笔记4&mdash;&mdash;Layout之2

下面简单介绍常见的面板. 一.Grid 1.Grid关于调整行列距离有三种方法:绝对大小,自动大小,比例大小.如下: <ColumnDefinition Width="100"></ColumnDefinition> <ColumnDefinition Width="Auto"></ColumnDefinition> <ColumnDefinition Width="*"></Co

WPF学习笔记2&mdash;&mdash;XAML之2

三.事件处理程序与代码隐藏 例如,为一个Page添加一个Button控件,并为该Button添加事件名称Button_Click: <Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Class="ExampleNamespace.ExampleP

WPF学习笔记系列之一 (布局详情)

布局:StackPanel  栈布局:控件不会拐弯且多出的不再显示.DockPanel   停靠布局 吸在上边下边或左右.WrapPanel    环绕布局   一行控件会拐弯Canvas  进行基于坐标的布局 Grid中若不指定Grid.Row属性及Grid.Column则默认为:0行,0列.RowDefinitions ColumnDefinitions ShowGridLines=true <ColumnDefinition Width="100"></Colu

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

  前面介绍了自定义审批流的配置.使用,这篇介绍下如何进行初始化.   一. 下载   从下面的地址下载整个审批流: http://yunpan.cn/cJR65k2Grj3Ss  访问密码 8065 下载完后,一共有三块内容:   二.初始化 1. Web 把CRMWFExtends文件夹copy到ISV目录下 默认的目录应该是C:\Program Files\Microsoft Dynamics CRM\CRMWeb\ISV   2. 解决方案 导入solution:ApprovalWork