零元学Expression Blend 4 - Chapter 31 看如何简单的把SampleData 绑进ListBox里

前面几章连续讲到ListBox的运用，本章要讲得是如何简单的把SampleData 绑进ListBox里

?

前面几章连续讲到ListBox的运用，本章要讲的是如何简单的把SampleData 绑进ListBox里

就是要让不会的新手都看的懂!

本章范例最後结果：

很抱歉，阁下使用的浏览器并不支援 IFrame，不能正常浏览我的网页

01

开启一个新的专案，并且在工作区置入一个ListBox

於Data->Creat Sample Data->New Sample Data开始我们的Sample Data建置

<a href="https://az787680.vo.msecnd.net/user/yuan0716/1102/Expression-Blend-4---Chapter-31-SampleDa_E2F8/image_2.png"></a>

若是你找不到Data控制版面，请到TopMenu-&gt;Window-&gt;选取Data後就会出现了

<a href="https://az787680.vo.msecnd.net/user/yuan0716/1102/Expression-Blend-4---Chapter-31-SampleDa_E2F8/image_4.png"></a>

点选New Sample Data後会出现设定视窗

这边值得一提的是有个CheckBox选项："Enable sample data when application is running"

意思是，执行时是否要显示这个绑在ListBox里的假资料，选取为显示，反之则否

<a href="https://az787680.vo.msecnd.net/user/yuan0716/1102/Expression-Blend-4---Chapter-31-SampleDa_E2F8/image_6.png"></a>

若是这时候不选择，之後你也可以在Data Source Options做调整

<a href="https://az787680.vo.msecnd.net/user/yuan0716/1102/Expression-Blend-4---Chapter-31-SampleDa_E2F8/image_8.png"></a>

这是Blend很聪明的地方：

「为了能让介面设计师与程式设计师的分工更细，并且减少设计双方的认知误差，抛弃传统合作模式很重要的功能之一，这项功能让设计师在设计时能够藉由假资料的代入，模拟最後的成果。」

02

接着设定总共四组的Sample Data：

本章范例把四种格式都抓出来设定，分别为Boolean、Image、Number以及String

<a href="https://az787680.vo.msecnd.net/user/yuan0716/1102/Expression-Blend-4---Chapter-31-SampleDa_E2F8/image_10.png"></a>

接着点选Collection後直接拖拉进ListBox里，ListBox就会出现刚刚所设定的SampleData了

<a href="https://az787680.vo.msecnd.net/user/yuan0716/1102/Expression-Blend-4---Chapter-31-SampleDa_E2F8/image_12.png"></a>

03

接下来修改放进SampleData後，ListBox内资料的排列方式

ListBox-&gt;Edit Additional Templates-&gt;Edit Generates Items-&gt;Edit Current

<a href="https://az787680.vo.msecnd.net/user/yuan0716/1102/Expression-Blend-4---Chapter-31-SampleDa_E2F8/image_14.png"></a>

进入了ItemTemplate後，可以看到刚刚代入的四项SampleData被StackPanel包了起来

<a href="https://az787680.vo.msecnd.net/user/yuan0716/1102/Expression-Blend-4---Chapter-31-SampleDa_E2F8/image_16.png"></a>

调整下列几项设定：

1)更改StackPanel的排列方式，由Vertical改为Horizontal水平排列

2)全选StackPanel下的四个物件，设定上下左右间格为10、设定排列方式为置中

3)当然你也可以更改字的字型与颜色

<a href="https://az787680.vo.msecnd.net/user/yuan0716/1102/Expression-Blend-4---Chapter-31-SampleDa_E2F8/image_18.png"></a>

完成後，按下F5预览你的成果

<a href="https://az787680.vo.msecnd.net/user/yuan0716/1102/Expression-Blend-4---Chapter-31-SampleDa_E2F8/image_20.png"></a>

再ListBox的外观调整成你喜欢的样子就大功告成啦~!

本篇的教学就到此。

(若有任何错误的地方，请各位前辈或同好能不吝指教，小女子都会虚心接受；若是你喜欢我的教学，请给我点鼓励，谢谢。)

一步一步迈向HIE之路

喜欢我文章请推我一下或给我个回应，你的鼓励会给我无限的动力喔!

若是您有其他问题或是特别需要，请在文章回应处留言，我会尽快回覆您