Expression Blend实战开发技巧——ImageButton详解

Button的逻辑树中只有一个Content属性，要么放图片进去，要么输入文字。那么，我现在就通过对烤地瓜仁兄博客的学习，并对实现过程予以充实。

一：创建模板

首先添加一个TextBlock到LayoutRoot。右击TextBlock，在弹出菜单中选择“构成控件”，将Style命名为ImageButtonStyle，格式默认为Button

点击确定，然后可以得到下图中的效果。Blend为我们自动生成的样式元素结构下图所示，一个简单的ContentPresenter被Grid包裹。

点击下图中，最左侧的图标，返回到[UserControl]范围，切换到UserControl编辑视图。

此时我们需要几张图片作为素材，随便下载一些ICON就可以了，在项目中新建文件夹，名为Images，将图片拷贝进来，调节Button的宽度和高度，随便选择一张图片，将它拖拽到Button上，然后松开鼠标，得到下图中的效果。Image被Button包裹。

右击Button，在弹出菜单中选择 编辑模板 -> 编辑当前模板，切换到Style编辑视图。

二：模板绑定

在ImageButtonStyle的Grid中，添加一个TextBlock,然后在右侧属性面板中找到TextBlock的Text属性（在公共属性中），点击Text属性最右侧的小方块。在弹出菜单中选择 “模板绑定”-> Tag。

同上，在“对象和时间线”面板中点击最左侧的图标，返回到[UserControl]范围，切换到UserControl编辑视图。

在“对象和时间线”面板中选择Button，然后查看右侧属性面板，找到Tag属性，输入一些文本比如“我的电脑”

得到如下效果：

在此过程中，首先我们将TextBlock控件转换为Button控件（ImageButtonStyle），ImageButtonStyle会应用于所有的button，然后在ImageButtonStyle中添加TextBlock，TextBlock的text属性绑定Tag。

如例中Tag为“我的电脑”所以ImageButtonStyle中的TextBlock的text属性为“我的电脑”，ImageButtonStyle应用于所有的Buton，所以就看到了如图的效果。

三：调整文字位置

 

//原文出处：http://www.silverlightchina.net/html/tips/2011/0225/5633.html