这款软件相信大家都不陌生，是时下最火的iphone，在这款软件中典型的应用了ImageButton。除了图片，我们注意到上图中的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，所以就看到了如图的效果。
三：调整文字位置
“我的电脑”这几个字可否调整一下位置，换个颜色，答案是当然可以
选择TextBlock——属性面板——调整水平和竖直对齐方式
在画笔中调整前景色
效果如下：
文字移下去了，但是还需要修改图片的位置，其实很简单，直接把图片往上面拖动就OK
这三部分代码如下：
<UserControl
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
x:Class="DemoBysj.ImageButton"
d:DesignWidth="640" d:DesignHeight="480">
<UserControl.Resources>
<Style x:Key="ImageButtonStyle" TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid>
<TextBlock Text="{TemplateBinding Tag}" VerticalAlignment="Bottom" HorizontalAlignment="Center" Foreground="#FFFAF5F7"></TextBlock>
<ContentPresenter/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</UserControl.Resources>
<Grid x:Name="LayoutRoot">
<Button Style="{StaticResource ImageButtonStyle}" Width="64" Height="84" Margin="77,197,0,199" HorizontalAlignment="Left" d:LayoutOverrides="Width" Tag="我的电脑" VerticalAlignment="Top">
<Image Source="images/sytb_116.png" Stretch="Fill" VerticalAlignment="Top" Height="64"/>
</Button>
</Grid>
</UserControl>
四：添加动画效果
上面虽然看起来与ImageButton有点形似，但是还差神似。
点击状态面板
选中ContentPresenter，选择MouseOver
添加鼠标经过时，“手型”效果
添加鼠标经过时，“放大”效果
到此，就可以有明显的按钮效果了，而且点击时有明显的点击效果。
