20111014ExpressionBlend学习6控件imagebutton.docVIP

ButtonStyle- ImageButton 　　　　 　　　　 　　　 这两款软件相信大家都不陌生，一款是pplive,另一个是时下最火的iphone，在这两款软件中都典型的应用了ImageButton。除了图片，我们注意到上图中的ImageButton都还配有描述文字。假设你遇到类似的需求，你可能马上会意识到，Button的逻辑树中只有一个Content属性，要么放图片进去，要么输入文字。如果两者都要呢？我来列举一下可能实现的方法，当然他们都是负面教材，都是低效，不灵活或高成本的。 　　最佳的做法： 　　首先添加一个TextBlock到LayoutRoot。右击TextBlock，在弹出菜单中选择Make Into Control，将Style命名为ImageButtonStyle，然后可以得到下图中的效果。Blend为我们自动生成的样式元素结构下图所示，一个简单的ContentPresenter被Grid包裹。 　　　　 　　点击下图中，最左侧的图标，Return Scope to[UserControl]，切换到UserControl编辑视图。 　　　　　　 　　此时我们需要几张图片作为素材，随便下载一些ICON就可以了，在项目中新建文件夹，名为Images，将图片拷贝进来，随便选择一张图片，将它拖拽到Button上，然后松开鼠标，得到下图中的效果。Image被Button包裹。 　　　　 　　右击Button，在弹出菜单中选择 Edit Template - Edit Current，切换到Style编辑视图。 　　　　 　　 　　下面是关键步骤：在ImageButtonStyle的Grid中，添加一个TextBlock,然后在右侧属性面板中找到TextBlock的Text属性，点击Text属性最右侧的小方块。在弹出菜单中选择TemplateBinding- Tag。 　　　　 　　 　　再一次点击下图中，最左侧的图标，Return Scope to[UserControl]，切换到UserControl编辑视图。　 　　　　 　　在Objects and Timeline面板中选择Button，然后查看右侧属性面板，找到Tag属性，输入一些文本比如“木头防火墙” 　　　　 　　然后你会发现，奇迹出现了！嗯，稍作调整后，加一些你喜欢的动画等等。就变成下面的效果。 　　　　 　　 　　代码如下：　　　　 Button Style={StaticResource ImageButtonStyle} Tag=木头防火墙 HorizontalAlignment=Left Height=86 Margin=8,8,0,0 VerticalAlignment=Top Width=64 Image Height=64 Source=Images/sytb_298.png Stretch=Fill Width=64/ /Button Button Style={StaticResource ImageButtonStyle} Tag=调色板 Width=64 HorizontalAlignment=Left Height=86 Margin=72,8,0,0 VerticalAlignment=Top Image Height=64 Margin=0 Source=Images/sytb_087.png Stretch=Fill Width=64/ /Button Button Style={StaticResource ImageButtonStyle} Tag=麦克风 Width=64 HorizontalAlignment=Left Height=86 Margin=136,8,0,0 VerticalAlignment=Top Image Height=64 Source=Images/sytb_099.png Stretch=Fill/ /Button Button Style={StaticResource ImageButtonStyle} Tag=我的电脑 Width=64 HorizontalAlignment=Left Height=86 Margin=200,8,0,0 VerticalAlignment=Top Image Height=64 Source=Images/sytb_116.png Stretch=Fill/ /Button Button Style={StaticResource ImageButtonStyle} Tag=安全退出 Height=86 Margin=264,8,312,0 VerticalAlignment=Top Width=64 Image