零元学Expression Blend 4 - Chapter 45 ListBox里的物件不能换行吗?

简介: 原文:零元学Expression Blend 4 - Chapter 45 ListBox里的物件不能换行吗? ListBox里的排列不是垂直就是水平,觉得这样的排列很枯燥乏味吗? 想要它变聪明吗? ...
原文: 零元学Expression Blend 4 - Chapter 45 ListBox里的物件不能换行吗?

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

想要它变聪明吗?

看下去就对了~

?

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

想要它变聪明吗?

看下去就对了~

?

先前在【Flash做的到的Blend也可以!轻松制作拥有动画的MenuBar!(下)

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

另外,在设计x程式社团,也有朋友问到有关WrapPanel的问题

我就一起在这里做介绍

?

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

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

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

(请看【扩充元件-「Silverlight Toolkit」教学】)

?

01

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

image

?

02

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

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

image

?

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

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

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

?

03

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

image

?

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

image

?

04

放入Sample Data的ListBox,出现了VerticalScrollBar

image

?

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

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

image

?

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

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

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

image

?

05

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

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

image

?

在这边,我必须要先介绍WrapPanel特性:

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

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

(看更多MSDN详细介绍,请点这里)

?

所以我们要把ListBoxHorizontalScrollBarVisibility以及VerticalScrollBarVisibility设定为Disabled

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

image

?

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

image

?

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

image

?

06

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

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

Horizontal改为Vertical

image

?

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

image

?

?

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

?

?

?

一步一步迈向HIE之路

 

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

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

 

 

目录
相关文章
|
C#
在Expression Blend中制作侧面为梯形的类棱柱体
原文:在Expression Blend中制作侧面为梯形的类棱柱体 在上一篇“在WPF设计工具Blend2中制作立方体图片效果”( http://blog.csdn.net/johnsuna/archive/2007/08/10/1736000.aspx )中,演示了如何制作立方体形图片效果;本篇则制作侧面为梯形的类棱柱体形图片。
1043 0
零元学Expression Design 4 - Chapter 3 看小光被包围了!!如何活用「Text On Path」设计效果
原文:零元学Expression Design 4 - Chapter 3 看小光被包围了!!如何活用「Text On Path」设计效果 本章将教大家如何活用「Text On Path」,做出文绕图以及...
1046 0
Expression Blend学习5控件
原文:Expression Blend学习5控件 Expression Blend ButtonStyle- TextButton 本章以TextButton为例,讲解如何最简单,最快速的制作一个专业的TextButton。
847 0
Expression Blend学习四控件
原文:Expression Blend学习四控件 Expression Blend制作自定义按钮 1.从Blend工具箱中添加一个Button,按住shift,将尺寸调整为125*125; 2.右键点击此按钮,选择Edit control parts(template)>Edit a copy.
717 0
零元学Expression Blend 4 - Chapter 31 看如何简单的把SampleData 绑进ListBox里
原文:零元学Expression Blend 4 - Chapter 31 看如何简单的把SampleData 绑进ListBox里 前面几章连续讲到ListBox的运用,本章要讲得是如何简单的把Samp...
1246 0
零元学Expression Blend 4 – Chapter 43 如何指定Childwindow PopUp位置
原文:零元学Expression Blend 4 – Chapter 43 如何指定Childwindow PopUp位置 有网友询问我有关Childwindow是否能指定弹出位置? 其实只...
1306 0
|
前端开发 容器
零元学Expression Blend 4 - Chapter 34 啊~!!我不要毛毛的感觉!-使用布局修整「UseLayoutRounding」
原文:零元学Expression Blend 4 - Chapter 34 啊~!!我不要毛毛的感觉!-使用布局修整「UseLayoutRounding」 本章将介绍UseLayoutRounding,中...
1276 0
零元学Expression Blend 4 - Chapter 29 ListBox与Button结合运用的简单功能
原文:零元学Expression Blend 4 - Chapter 29 ListBox与Button结合运用的简单功能 本章所讲的是运用ListBox、TextBox与Button,做出简单的列表新增...
1243 0
|
容器 前端开发
零元学Expression Blend 4 - Chapter 12 用实例了解布局容器系列-「Viewbox」
原文:零元学Expression Blend 4 - Chapter 12 用实例了解布局容器系列-「Viewbox」 本系列将教大家以实做案例认识Blend 4 的布局容器,此章介绍的布局容器是Blend 4 里的-「Viewbox」; 以及加码赠送安装扩充元件-「Silverlight Toolkit」。
1609 0
|
容器
零元学Expression Blend 4 - Chapter 13 用实例了解布局容器系列-「Pathlistbox」I
原文:零元学Expression Blend 4 - Chapter 13 用实例了解布局容器系列-「Pathlistbox」I 本系列将教大家以实做案例认识Blend 4 的布局容器,此章介绍的布...
1317 0