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内制作出倒影效果 我提供了 ...
随机推荐
- cooking java ——加密解密
java安全与密码概述 主要分为三部分: 密码学基础,包括:相关术语:分类:常用安全体系. java的安全组成:jdk以及第三方扩展. 相关实现代码,包括:base64.MD5········ 密码学 ...
- mongoDB操作命令及mongoDB的helper
此项目已开源,开源地址是: http://mongodbhelper-csharp.googlecode.com/svn/trunk/ mongodb的helper using System; usi ...
- [课程相关]homework-05
零.准备工作 队伍成员:梁杰,夏天晗,谢祖三. 周五晚上吃完饭,我们就开始了讨论. 这次的要求是写服务器,客户端以及游戏结果动态显示.很明显是三个部分,我们也就顺其自然, 一人一个部分.我负责服务器, ...
- JS中获取table节点的tr或td的内容
<table id="tb1" width="200" border="1" cellpadding="4" ce ...
- 转:艾瑞咨询2016 IM云的发展趋势
转自: http://www.cnblogs.com/lingyunhu/p/rtc63.html
- 谈在一个将TXT按章节分割的PHP程序中的收获
最近在做一个自动分割txt小说的东西,能够将一整个txt文件按照章节进行分割,然后分解成一个个小的.txt文件保存起来并且能够获取有多少章节和每章的章节名. 我最初的想法是: ① 先使用fopen打开 ...
- HTML5와 CSS3 적용기
HTML5의 DTD 선언 <!DOCTYPE html> HTML5의 인코딩 선언 <meta charset="utf-8"> 그리고나서는 새로 ...
- 【转载】Apache Kafka监控之Kafka Web Console
http://www.iteblog.com/archives/1084 Kafka Web Console是一款开源的系统,源码的地址在https://github.com/claudemamo/k ...
- Editplus中使用正则表达式压缩代码
快捷键ctrl+H打开查找与替换窗口,勾上使用正则表达式选项,查找项输入\t|^( )+,替换范围选当前文档,选择全部替换按钮,然后查找项在输入\n,再选择全部替换按钮. 大功告成!
- 返回页面,主页面不刷新window.history.go(-1),主页面刷新window.location.go(-1)
返回上一页,不刷新 window.history.go(-1) 返回上一页,刷新 window.location.go(-1)