Expression Blend4经验分享：制作一个简单的图片按钮样式

这次分享如何做一个简单的图片按钮经验

在我的个人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