Microsoft Expression Blend 4制作简单的按钮
在博客园混了这么久了,第一次写博客。本人标准的理工男,文笔不敢说一般,只能用还学过语文。勉强达意而已。见笑!!
由于本人能有有限,错误之处在所难免,望大牛们批评指正,共同进步。^_^!!!!!!!!!!!!!!!!!!!!!!
觉得此篇博文对你有用,欢迎阅读,同时欢迎喜欢拍砖的同学。哥们脑袋硬。
书归正传,由于第一次写博客、加上个人技术有限,只能简单把自己曾经用的一些技术在这里做下简单的纪录。作为一个攻城狮,那就先慢慢的攻城吧,总有一天要成为狮!!嘿嘿
制作圆角的按钮:
step by step:建立wpf项目工程,首先在窗体上画一个矩形,设置其Fill为no brush,RadiusX、RadiusY的值2(圆角效果),右键选中矩形,构成控件,如下图:

在控件类型中选中Button,修改名称为myBtnStyle,确定。下面就来制作button的样式,鼠标滑动,点击的各种效果。

在上图的触发器选项卡下面有以上的触发事件,下面分别设置IsDefaulted,IsMouseOver,IsPressed来设置Button的默认、鼠标滑过、按下的样式。

IsDefaulted:设置如上图,背景填充为绿色,边框为无样式。
其他触发选项如IsDefaulted一样,设置自己喜欢的颜色。
设置完成活按F5,运行,看下效果:
默认:
鼠标滑过:
点击样式:
(运行点击没有虚线,截图就出现了,嘿嘿)
ok,一个简单的按钮的样式就写完了。
xaml代码如下:
<Style x:Key="myBtnStyle" TargetType="{x:Type Button}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition x:Name="columnDefinition1" Width="0.982*"/>
<ColumnDefinition x:Name="columnDefinition" Width="0.018*"/>
</Grid.ColumnDefinitions>
<Rectangle x:Name="rectangle" RadiusY="2" RadiusX="2" Stroke="{x:Null}" Fill="#FF0DAD5F" Grid.ColumnSpan="2"/>
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsFocused" Value="True">
<Setter Property="Stroke" TargetName="rectangle" Value="{x:Null}"/>
<Setter Property="Fill" TargetName="rectangle" Value="#FF0EED80"/>
</Trigger>
<Trigger Property="IsDefaulted" Value="True">
<Setter Property="Fill" TargetName="rectangle" Value="#FF0DAD5F"/>
<Setter Property="Stroke" TargetName="rectangle" Value="{x:Null}"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Stroke" TargetName="rectangle" Value="{x:Null}"/>
<Setter Property="Fill" TargetName="rectangle" Value="#FF83D245"/>
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Stroke" TargetName="rectangle" Value="{x:Null}"/>
<Setter Property="Fill" TargetName="rectangle" Value="#FF17D256"/>
<Setter Property="Width" TargetName="columnDefinition" Value="Auto"/>
<Setter Property="MinWidth" TargetName="columnDefinition" Value="0"/>
<Setter Property="Width" TargetName="columnDefinition1" Value="*"/>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Stroke" TargetName="rectangle" Value="{x:Null}"/>
<Setter Property="Fill" TargetName="rectangle" Value="{x:Null}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
就这样非常简单的Button样式就这样搞定了,第一次写,有点仓促,更有点无从下手,总算写了一篇了,哎,再接再厉吧!!!
Microsoft Expression Blend 4制作简单的按钮的更多相关文章
- 在Microsoft Expression Blend 2 中绘制圆角矩形按钮
原文:在Microsoft Expression Blend 2 中绘制圆角矩形按钮 /* 声明:转载请保留此信息:http://www.BrawDraw.com, http://www.ZPXP.c ...
- 在Expression Blend中制作侧面为梯形的类棱柱体
原文:在Expression Blend中制作侧面为梯形的类棱柱体 在上一篇"在WPF设计工具Blend2中制作立方体图片效果"( http://blog.csdn.net/joh ...
- WPF动画制作简单的按钮动画
主界面的代码 <StackPanel ButtonBase.Click="Grid_Click"> <Button Content="逐渐变大缩小&qu ...
- Motion Paths in WPF 4 using Expression Blend 4
原文 Motion Paths in WPF 4 using Expression Blend 4 Posted by: Pravinkumar Dabade , on 3/19/2011, in C ...
- Expression Blend制作自定义按钮(转)
来源:http://www.cnblogs.com/iChina/archive/2011/11/25/2262854.html Expression Blend制作自定义按钮 1.从Blend工具箱 ...
- WPF学习笔记-用Expression Blend制作自定义按钮
1.从Blend工具箱中添加一个Button,按住shift,将尺寸调整为125*125; 2.右键点击此按钮,选择Edit control parts(template)>Edit a cop ...
- Expression Blend创建自定义按钮
在 Expression Blend 中,我们可以在美工板上绘制形状.路径和控件,然后修改其外观和行为,从而直观地设计应用程序.Button按钮也是Expression Blend最常用的控件之一,在 ...
- 【全面解禁!真正的Expression Blend实战开发技巧】第七章 MVVM初体验-在DataGrid行末添加按钮
原文:[全面解禁!真正的Expression Blend实战开发技巧]第七章 MVVM初体验-在DataGrid行末添加按钮 博客更新较慢,先向各位读者说声抱歉.这一节讲解的依然是开发中经常遇到的一种 ...
- 零元学Expression Blend 4 - Chapter 47 超简单!运用StackPanel配合OpacityMask做出倒影效果
原文:零元学Expression Blend 4 - Chapter 47 超简单!运用StackPanel配合OpacityMask做出倒影效果 有网友问我如何在Blend内制作出倒影效果 我提供了 ...
随机推荐
- JavaWeb中的简单分页
这次主要是讲解一下通过登录后对得到的数据进行分页,首先我们新建一个登录页面login.jsp,因为我们主要学习一下分页,所以登录验证的部分不再阐述,主要代码如下: <form action=&q ...
- Jfinal学习笔记
实习期间,公司使用jfinal做开发,所以就学习了这个框架 Jfinal作为一个极速ORM,使用上非常方便,核心源代码1万多行,压缩后只有200多KB. 从入口开始 作为一个web项目,首先解读web ...
- Java 8 Stream API Example Tutorial
Stream API Overview Before we look into Java 8 Stream API Examples, let’s see why it was required. S ...
- scope重定义
.directive('myAttr', function() { return { restrict: 'E', scope: { customerInfo: '=info' }, template ...
- MySQL 更改默认编码为 utf8 (转)
转自blog.sina.com.cn/s/blog_4c451e0e0100vefm.html 1.打开MySQL安装目录找到 my.ini,如:C:\Program Files\MySQL\My ...
- hdu 3401 单调队列优化动态规划
思路: 动态方程很容易想到dp[i][j]=max(dp[i][j],dp[i-w-1][j-k]-k*ap[i],dp[i-w-1][j+k]+k*bp[i]): dp[i][j]表示第i天拥有j个 ...
- git 一个文件还原到某个提交的commit
git checkout ${commit} /path/to/file 参考文献中1的参考链接中的git-checkout(1) Manual Page 中的Name: git-checkout - ...
- HTTP状态码解读
1xx:信息 消息 描述 100 Continue 服务器仅接收到部分请求,但是一旦服务器并没有拒绝该请求,客户端应该继续发送其余的请求. 101 Switching Protocols 服务器转换协 ...
- Servlet & JSP - Filter
过滤器可以对用户的请求拦截,进行预处理操作,接着将请求交给 Servlet 处理并生成响应,最后再对响应拦截,进行后处理操作.过滤器应用的场景有:用户登录.加密解密.会话校验等. Filter API ...
- Android项目源码界面超级华丽的仿QQ最新版本
这是一个我们比较熟悉的一款应用,高仿专仿最新QQ应用源码,也是一个高仿QQ最新版本的项目,界面超级华丽,使用了大量的自定义控件,项目里实现了部分功能,例如WIFI-FTP(把手机变成FTP服务端,可以 ...