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

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

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

?

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

?

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

?

本章范例最後结果：

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

?

?

01

若你对ListBox还不熟悉，请回到这里重新开始喔~

?

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

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

?

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

?

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

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

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

?

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

?

这是Blend很聪明的地方：

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

?

02

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

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

如果想看更详细的SampleData设定，请看这里。

?

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

?

03

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

ListBox->Edit Additional Templates->Edit Generates Items->Edit Current

?

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

?

调整下列几项设定：

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

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

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

?

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

?

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

?

?

?

?

本篇的教学就到此。

?

?

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

一步一步迈向HIE之路

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

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