原文:

?

ListBox里的排列不是垂直就是水平，觉得这样的排列很枯燥乏味吗?

想要它变聪明吗?

看下去就对了~

?

先前在【】

使用了WrapPanel做为第二层选单的布局容器

另外，在社团，也有朋友问到有关WrapPanel的问题

我就一起在这里做介绍

?

在开始本章之前，要先提醒朋友~

如果你还没有装Silverlight Toolkit的话，请先下载，才会有本章提到的WrapPanel唷!

针对Silverlight Toolkit，小猴子先前有特别做了详细的介绍。

(请看【】)

?

01

在主要工作区置入一个ListBox，并调整到适当位置

?

02

接着我们运用假资料的代入，来测试布局容器内物件的排序状况

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

?

有关更详细的Sample Data如何使用

请看小猴子先前所做的详细介绍：

【】

?

03

这里，我们设定一组的Property就好，并且把Type改为Image

?

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

?

04

放入Sample Data的ListBox，出现了VerticalScrollBar

?

让我们进到Template里面，看看发生什麽事

ListBox->Edit Additional Templates->Edit Layout of Items->Create Empty

?

原来是预设的ListBox里面住了个StackPanel阿!!!

没关系，我们来帮它变身~

点选StackPanel->右键->Change Layout Type->WrapPanel

?

05

变身为WrapPanel後，除了图片改为横向排列外，好像没甚麽差别

没关系，不要紧~让我们先离开Edit Template模式再说

?

在这边，我必须要先介绍WrapPanel特性：

WrapPanel会将子项目由左至右依序放置，在包含方块的边缘将内容换行。

依据 属性的值，後续的排列方式会由上至下或由右至左依序进行。

?

所以我们要把ListBox的HorizontalScrollBarVisibility以及VerticalScrollBarVisibility设定为Disabled

让宽度或高度不够时，容器内的物件自动排列

?

如果没有设定Disabled，会被辨识为宽高无限制，底层的WrapPanel自然没办法发挥它的特性

?

设定Disabled後，你应该可以发现，ListBox内的物件排列已经改变了

?

06

若你想要改变把排列方式由水平改为垂直

请回到Edit Template模式，在Properties->CommomProperties->Orientation

把Horizontal改为Vertical

?

物件的排列方式，就改为垂直排列噜!

?

?

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

?

?

?

一步一步迈向HIE之路

 

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

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