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