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

这款软件相信大家都不陌生，是时下最火的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

添加鼠标经过时，“手型”效果

添加鼠标经过时，“放大”效果

到此，就可以有明显的按钮效果了，而且点击时有明显的点击效果。

学习资料：http://www.cnblogs.com/kaodigua/archive/2011/02/16/1955688.html