Expression Blend4经验分享:制作一个简单的图片按钮样式
2014-06-30 16:19
169 查看
这次分享如何做一个简单的图片按钮经验
在我的个人Silverlight网页上,有个Iphone手机的效果,其中用到大量的图片按钮
http://raimon.6.gwidc.com/Iphone/default.html
我现在来介绍一下这种图片按钮的制造步骤:
1、首先在项目里新建一个存放图片的目录,并添加2个图片(60*60),1个是按钮正常显示时的图片,另外一个是鼠标移动到按钮上时显示的图片
2、在页面上放入Address1.png图片(60*60)和一个按钮(60*80),按钮高度比图片稍高,是因为我们最终做的图片按钮要在图片的下方显示按钮的功能名称的,如下图
3、在对象时间线面板里将图片拖入按钮中,形成上下级关系:
4、右键点击按钮,编辑模板—编辑副本
5、在创建Style资源对话框里输入资源名称和位置
6、确定后,进入模板编辑模式
ContentPresenter对应的是按钮中的图片,此处不能更改,其余元素可删除
7、选择ContentPresenter元素,在其属性面板里可以看见其默认布局
选择右侧的黄色小方块,重置其属性,并将垂直对齐方式改为Top对齐
这样图片就在按钮空间中向上对齐了,下方位置我们就可以写按钮的功能名称了
8、在Grid里添加一个TextBlock
对齐方式为水平居中、向下对齐,文本为“通讯录”
9、由于图片元素本身对应的是Button按钮的Content模板,所以功能名称就无法绑定到Content模板了,那怎么办呢?我们寻找另外一个文本模板进行绑定
点击右侧白色小方块,选择模板绑定,找到Tag模板
10、现在退出模板编辑模式、回到页面,选择按钮,在属性面板里找到Tag属性,并写入“通讯录”
11、我们回到模板编辑状态,右键按钮、编辑模板—编辑当前模板(这时不需要编辑副本了)
可以看见按钮的功能名称已经变成了“通讯录”
12、按钮的元素都准备好了,我们开做按钮的状态,主要是MouseOver和Pressed状态
在状态面板里,点击MouserOver,亮起小红眼,我们要记录其状态了
这里我们做个简单的状态变化,在对象面板里选择Grid容器,在它的属性面板里找到“转换”项,选择第三个“缩放”,将X和Y的比例改为1.1
13、然后我们点击Pressed,准备记录其状态
我们还是选择Grid容器,在它的属性面板里找到“转换”项,选择第三个“缩放”,将X和Y的比例改为0.9
14、到此2个按钮的关键状态就做完了,各位看官一定有疑问,不是还准备了一个鼠标移动到按钮时需要显示的图片吗?怎么不用呢?因为我介绍的这种图片按钮的做法是具有复用性的,不同的按钮只需要改变其子级的图片路径就可以得到不同的图片按钮,相对的这个按钮的不同状态图片就只能用后台代码来切换了。
15、我们退出按钮的模板编辑状态,回到页面,给按钮起个名字“AddressButton”,并选择按钮的事件面板,分别双击“MouseMove”和“MouseLeave”事件,会在xaml页面的后台代码中看见新增了这2个事件代码
我们添加如下代码段,并添加引用:using System.Windows.Media.Imaging;
16、好了,一个简单的图片按钮制作完成了,大家试试效果吧!大家可以举一反三,扩展这种图片按钮制作方法,制作出更加出色的按钮。谢谢观看。
Expression Blend的经验分享会持续推出,欢迎关注我的博客!
如果你觉得好,请帮忙推荐一下,谢谢!
我个人的小作品展示平台 :http://raimon.6.gwidc.com/
欢迎有志于钻研Blend的朋友加入我们的Blend美工群QQ:152049269
在我的个人Silverlight网页上,有个Iphone手机的效果,其中用到大量的图片按钮
http://raimon.6.gwidc.com/Iphone/default.html
我现在来介绍一下这种图片按钮的制造步骤:
1、首先在项目里新建一个存放图片的目录,并添加2个图片(60*60),1个是按钮正常显示时的图片,另外一个是鼠标移动到按钮上时显示的图片
2、在页面上放入Address1.png图片(60*60)和一个按钮(60*80),按钮高度比图片稍高,是因为我们最终做的图片按钮要在图片的下方显示按钮的功能名称的,如下图
3、在对象时间线面板里将图片拖入按钮中,形成上下级关系:
4、右键点击按钮,编辑模板—编辑副本
5、在创建Style资源对话框里输入资源名称和位置
6、确定后,进入模板编辑模式
ContentPresenter对应的是按钮中的图片,此处不能更改,其余元素可删除
7、选择ContentPresenter元素,在其属性面板里可以看见其默认布局
选择右侧的黄色小方块,重置其属性,并将垂直对齐方式改为Top对齐
这样图片就在按钮空间中向上对齐了,下方位置我们就可以写按钮的功能名称了
8、在Grid里添加一个TextBlock
对齐方式为水平居中、向下对齐,文本为“通讯录”
9、由于图片元素本身对应的是Button按钮的Content模板,所以功能名称就无法绑定到Content模板了,那怎么办呢?我们寻找另外一个文本模板进行绑定
点击右侧白色小方块,选择模板绑定,找到Tag模板
10、现在退出模板编辑模式、回到页面,选择按钮,在属性面板里找到Tag属性,并写入“通讯录”
11、我们回到模板编辑状态,右键按钮、编辑模板—编辑当前模板(这时不需要编辑副本了)
可以看见按钮的功能名称已经变成了“通讯录”
12、按钮的元素都准备好了,我们开做按钮的状态,主要是MouseOver和Pressed状态
在状态面板里,点击MouserOver,亮起小红眼,我们要记录其状态了
这里我们做个简单的状态变化,在对象面板里选择Grid容器,在它的属性面板里找到“转换”项,选择第三个“缩放”,将X和Y的比例改为1.1
13、然后我们点击Pressed,准备记录其状态
我们还是选择Grid容器,在它的属性面板里找到“转换”项,选择第三个“缩放”,将X和Y的比例改为0.9
14、到此2个按钮的关键状态就做完了,各位看官一定有疑问,不是还准备了一个鼠标移动到按钮时需要显示的图片吗?怎么不用呢?因为我介绍的这种图片按钮的做法是具有复用性的,不同的按钮只需要改变其子级的图片路径就可以得到不同的图片按钮,相对的这个按钮的不同状态图片就只能用后台代码来切换了。
15、我们退出按钮的模板编辑状态,回到页面,给按钮起个名字“AddressButton”,并选择按钮的事件面板,分别双击“MouseMove”和“MouseLeave”事件,会在xaml页面的后台代码中看见新增了这2个事件代码
我们添加如下代码段,并添加引用:using System.Windows.Media.Imaging;
privatevoid AddressButton_MouseMove(object sender, System.Windows.Input.MouseEventArgs e) { Image img= AddressButton.Contentas Image; BitmapImage bitmapImage =new System.Windows.Media.Imaging.BitmapImage(); bitmapImage.UriSource =new Uri("Images/Address2.png", UriKind.Relative); img.Source = bitmapImage; } privatevoid AddressButton_MouseLeave(object sender, System.Windows.Input.MouseEventArgs e) { Image img= AddressButton.Contentas Image; BitmapImage bitmapImage =new System.Windows.Media.Imaging.BitmapImage(); bitmapImage.UriSource =new Uri("Images/Address1.png", UriKind.Relative); img.Source = bitmapImage; }
16、好了,一个简单的图片按钮制作完成了,大家试试效果吧!大家可以举一反三,扩展这种图片按钮制作方法,制作出更加出色的按钮。谢谢观看。
Expression Blend的经验分享会持续推出,欢迎关注我的博客!
如果你觉得好,请帮忙推荐一下,谢谢!
我个人的小作品展示平台 :http://raimon.6.gwidc.com/
欢迎有志于钻研Blend的朋友加入我们的Blend美工群QQ:152049269
相关文章推荐
- Expression Blend4经验分享:制作一个简单的文字按钮样式
- 分享一个在线制作GIF格式loading图片的好网址
- 经验分享:从最简单开始设计一个LOGO
- Unity3d制作一个简单的打开保存对话框-按钮2
- 一个分享按钮的插件使用介绍(可扩展,内附开发制作流程)
- 樱花季到了,分享一个简单的樱花树H5制作。
- 如何快速制作一个简单的图片轮播?
- [教程] React Native基础实战(1)—— 制作一个简单的按钮
- 一个简单的WPF图片动画制作
- 【学习中的分享】 iOS利用UILabel和UIButton制作一个简单的计算器
- 制作一个简单的网页爬虫爬取一张网页的特定图片
- 自己写的一个分享按钮的插件(可扩展,内附开发制作流程)
- 分享一个按钮样式
- 使用JSP制作一个超简单的网页计算器的实例分享
- VC++6.0 一个简单的图片按钮示例
- VC++6.0 一个简单的图片按钮示例
- 分享个用JavaScript制作的简单图片展播代码
- MFC制作简单的图片按钮
- Unity3d制作一个简单的打开保存对话框-按钮2
- ECharts的学习(二):制作一个简单的饼状图,并对其设置样式