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

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



想要它变聪明吗?



看下去就对了~

?

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

想要它变聪明吗?

看下去就对了~

?

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

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

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

我就一起在这里做介绍

?

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

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

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

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

?

01

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

?

02

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

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

?

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

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

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

?

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会将子项目由左至右依序放置,在包含方块的边缘将内容换行。

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

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

?

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

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

?

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

?

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

?

06

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

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

把Horizontal改为Vertical

?

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

?

?

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

?

?

?

一步一步迈向HIE之路

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

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

 

零元学Expression Blend 4 - Chapter 45 ListBox里的物件不能换行吗?的更多相关文章

  1. 零元学Expression Blend 4 - Chapter 28 ListBox的基本运用与更改预设样式

    原文:零元学Expression Blend 4 - Chapter 28 ListBox的基本运用与更改预设样式 本章将先教大家认识ListBox的基本运用与更改预设样式 本章将先教大家认识List ...

  2. 零元学Expression Blend 4 - Chapter 29 ListBox与Button结合运用的简单功能

    原文:零元学Expression Blend 4 - Chapter 29 ListBox与Button结合运用的简单功能 本章所讲的是运用ListBox.TextBox与Button,做出简单的列表 ...

  3. 零元学Expression Blend 4 - Chapter 35 讨厌!!我不想一直重复设定!!『Template Binding』使用前後的差异

    原文:零元学Expression Blend 4 - Chapter 35 讨厌!!我不想一直重复设定!!『Template Binding』使用前後的差异 因为先前写到自制Button时需特别注意T ...

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

    原文:零元学Expression Blend 4 - Chapter 31 看如何简单的把SampleData 绑进ListBox里 前面几章连续讲到ListBox的运用,本章要讲得是如何简单的把Sa ...

  5. 零元学Expression Blend 4 - Chapter 25 以Text相关功能就能简单做出具有设计感的登入画面

    原文:零元学Expression Blend 4 - Chapter 25 以Text相关功能就能简单做出具有设计感的登入画面 本章将交大家如何运用Blend 4 内的Text相关功能做出有设计感的登 ...

  6. 零元学Expression Blend 4 - Chapter 24 以实作了解Cover Flow功能

    原文:零元学Expression Blend 4 - Chapter 24 以实作了解Cover Flow功能 今天要介绍一个Silverlight Toolkit内好用且在图片展示操作上很常见的元件 ...

  7. 零元学Expression Blend 4 - Chapter 46 三分钟快速充电-设定Margin的小撇步

    原文:零元学Expression Blend 4 - Chapter 46 三分钟快速充电-设定Margin的小撇步 如果需要经常的使用某一项工具,总会希望能够更快速的使用各项设定达到效果 今天要介绍 ...

  8. 零元学Expression Blend 4 - Chapter 47 超简单!运用StackPanel配合OpacityMask做出倒影效果

    原文:零元学Expression Blend 4 - Chapter 47 超简单!运用StackPanel配合OpacityMask做出倒影效果 有网友问我如何在Blend内制作出倒影效果 我提供了 ...

  9. 零元学Expression Blend 4 - Chapter 44 Flash做的到的Blend也可以!轻松制作拥有动画的MenuBar!(下)

    原文:零元学Expression Blend 4 - Chapter 44 Flash做的到的Blend也可以!轻松制作拥有动画的MenuBar!(下) 抱歉久等了!!!! 终於到了动画MenuBar ...

随机推荐

  1. [Node.js] Identify memory leaks with nodejs-dashboard

    In this lesson, I introduce a memory leak into our node.js application and show you how to identify ...

  2. android获取和展示音乐的频谱

    做了个音乐播放器 就一直想做个加一个音乐频谱的展示界面 觉的这是一个好玩的东西,可以将耳边动听的声音形象化,仿佛眼前可以看到声音一样. 但是我在文档的开发者指南里没有讲任何有关音乐频谱的东西,最后还是 ...

  3. iOS 直播

    待解决: 貌似苹果规定10M以内的视频可以用RTMP,以上的必须用HLS  ? IOS非直播超过10分钟只能用hls,ios上有规定? 待尝试: 用Vitamion内核开发的可以自定义界面的视频播放器 ...

  4. 开源库Fab-Transformation简单使用解析

    转载请注明出处王亟亟的大牛之路 相似于IPhone的悬浮按钮的操作,仅仅只是是固定的,当然经过自己的改动也能够动.这边仅仅是给伸手党一个福祉,外加加上一些自己的理解.让大家能够拿来就用.看了就懂,废话 ...

  5. hadoop 3.x org.apache.hadoop.security.AccessControlException: Permission denied: user=Administrator, access=WRITE, inode="/":tele:supergroup:drwxr-xr-x

    权限不足,上传文件时应当使用启动hadoop的账户,即在获取FileSystem时就应当指定用户 修改后的代码 public class Demo1 { public static void main ...

  6. 【25.23%】【codeforces 731C】Socks

    time limit per test2 seconds memory limit per test256 megabytes inputstandard input outputstandard o ...

  7. jeesuite分布式框架环境搭建

    一.简述 这是菜鸟走向开源的第一步.开源项目jeesuite:http://git.oschina.net/vakinge/jeesuite-libs jeesuite是托管在码云上的开源项目,是一个 ...

  8. Python 第三方库的安装

    1. pip 进入命令行,使用 pip install pip install numpy 2. 含有 setup.py 文件的第三方库 切换到 setup.py 所在的目录: python setu ...

  9. vuex与vue-router学习方案

    1.vuex,官方vuex2.0的文档写得太简略了,先1.0的文档,研究1.0分支的counter例子.1.0文档只需看核心概念和API参考文档.2.0的用法先不管,需要的时候再说,先把1.0高熟练. ...

  10. 将memo转化为JPG输出,使用Memo1.PaintTo(Bitmap.Canvas)

    unit unit1; interface uses  Windows, Messages, SysUtils, Graphics, Controls, Forms, StdCtrls,  Class ...