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

现在的位置: 首页 > 综合 > 正文

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

2013年06月30日 ⁄ 综合 ⁄ 共 2411字 ⁄ 字号小中大 ⁄ 评论关闭

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