Microsoft Expression Blend 4 关于 Listbox

Microsoft Expression Blend 4设计ListBox

Listbox是一个很强大的控件可以支持纵向布局也可以支持横向布局 下面我们来做一个实例

1. 打开Microsoft Expression Blend 4 2. 新建一个项目

3. 新建一个示例数据源 具体步骤如下： （1）找到数据选项卡

选择左边“”这个

在弹出的菜单中选择选择“新建数据源”会弹出

在数据源名称里面写上相应的名称 设置完成点击 确定

数据源就完成了

那么怎样设置Listbox的数据源呢？

4. 从控件中拖一个Listbox到画布中并设置数据源 数据源完成后我们会在数据源选向卡里面看见这样的布局

Microsoft Expression Blend 4设计ListBox

（1）点击Property1右边的“然后点击此按钮

点击后会弹出下图：

“会出现“更改数据类型提示”如图：

（注：因为我的数据源类型是图片所以要更改属性，如果你的数据源是字符类型就不用更改了。因为我的数据源是图片所以要将类型改成图片否则数据源就不正确了）

（2）在类型中选择“图像“然后找到图片的地址 设置步骤如下：

Microsoft Expression Blend 4设计ListBox

设置完成后Property1右边的““这就表示数据源设置完成

（3）这时候将Property1拖到Listbox里面就ok了 如果前面你都对了，那么效果图会是这样的

“会变成”

5. 可能这结果并不是我们想要的，有时候我们可能需横向布局。下面我们看一下怎么编辑

Lisbox的模板 在Listbox上面右击“编辑其他模板“->”编辑项的布局“->”创建空项”具体操作如下图 ：

Microsoft Expression Blend 4设计ListBox

在弹出对话框中，为你的Template取一个名字，然后点击确定按钮。

然后你会发现,”对象和时间轴“面板自动切换到了Template编辑模式。如下图：

在右侧属性面板中，找到StackPanel的Orientation属性，我们看到该属性默认值为vertical，也就是说自上而下排列的，请把它修改为horizontal。

Microsoft Expression Blend 4设计ListBox

在“对象和时间轴“面板中，点击下图中最左的“

”按钮返回主界面编辑模式。

这样一个水平方向，从左向右排列的ListBox便制作完毕了。 将模板中的StackPanel替换为

WrapPanel

在“对象和时间轴“面板中，点击下图中最左的“

Microsoft Expression Blend 4设计ListBox

”按钮返回主界面编辑模式。

编辑完成之后会出现如下效果

接下来得到下图中的

效果，做到这一步大家可能会有疑问，怎么ListBox一点效果也没有变化呢? 别着急，这是因为wrapPanle的特性是当wrapPanle的宽度不够容下所有子Item时才会换行排列其余的Item。所以我们下一步需要禁用ListBox的水平滚动条，让他内部的wrapPanle没有延展的空间。

我们在Listbox代码里加上

ScrollViewer.HorizontalScrollBarVisibility="Disabled" 一切完成之后你会看见：

Microsoft Expression Blend 4设计ListBox