【全面解禁!真正的Expression Blend实战开发技巧】第六章 认识ListBox

  • 时间:
  • 浏览:1

  删改请参阅http://msdn.microsoft.com/en-us/library/bb613565.aspx  User Interface Virtualization

    

  下一步大伙 来实现图3中的另外两种生活效果,还需用自动换行的ListBox。首先右击ListBox,在弹出菜单中选折 Edit Additional Templates -> Edit Layout Of Items ->Edit Current                  

    

    

  或者点击上图中的Browse...按钮,浏览一3个 预先准备好图片的文件夹。或者点击OK。我电脑中的位置是“e:\图片文件夹”

  第五章发表后,意外发现我的文章被许多网站转载,银光中国甜得还将它放满了首页的头条。我受宠若惊的不知道该感谢CCTV还是MTV。最近工作很忙,时间排的很满。本想等忙过这段再继续写,但看了大伙 的留言,一想到有这样多人等着看下文,心里就抓心挠肝一样。本文的定位围绕三点“最常用,最实用,最快速”,什么都该讲你这名比缘何讲更有难度。在此可是大伙 还需用你还都可以并肩想题目,你还都可以在这里留言或邮件发给我。谢谢!

    

    

  事先大伙 得到了一3个 默认样式的ListBox,他就像大伙 常见的ListBox一样,自上而下排列内容。下一步,为了你还都可以变得特殊许多,请右击ListBox,在弹出菜单中选折 Edit Additional Templates -> Edit Layout Of Items ->Create Empty

  反反复复考虑后,准备把你这名章的切入点瞄准ListBox。并用了一3个 看起来特别别扭的标题“认识ListBox",大伙 看了这里就不爱看了,即使是大学里用winform的学生也会说ListBox我看他好几年了。但你还都可以说,在实际项目开发中,界面元素除了Button,事先使用率最高的可是ListBox,你认识ListBox,但无须认识下面几种特殊的ListBox,也无须知道如何最快速构建事先特殊的ListBox,这肩上还涉及了blend独有的特别要的一3个 元素的用法,sampledatasource!有兴趣多会儿?好,请看下图。

    

    

  这是一3个 拥有10个Item的ListBox。但他的深度图只够显示4项Item,5~10(半透明的每项)用户是看只能的。大伙 从此还需用发现,无论ListBox有几只子项,用户同一时间还需用看了的只能四项,利用你这名点,在WPF中,VirtualizingStackPanel无论有几只子项,实际消耗资源的只能用户看了的那四项,当滚动条向下滑动时,会动态的加载后续资源并使其可视化,并肩自动释放移出用户的视野的Items。Silverlight作为WPF的弟弟,当然也默认集成了virtualizes形态学 。

          

  在弹出菜单中直接点击OK

  在右侧属性面板中,找到StackPanel的Orientation属性,大伙 看了该属性默认值为vertical,也可是说自上而下排列的,请把它修改为horizontal

    

”按钮返回主界面编辑模式。

    

真是微软是因为替大伙 考虑并默认集成了你这名形态学 。在WPF中,VirtualizingStackPanel等集合控件两种生活具有名为virtualizes的形态学 。请看下图

原文:

  国内某个非常著名的公司有一款siverlight产品,也用到了上图中的布局效果。一次交流中我给大伙 的开发人员看了我做的一3个 demo,或者他问我:“你你这名布局用的是你这名控件啊?stackpanel? wrappanel? grid? ” ,当我跟他说是ListBox时他很意外。不知道大伙 产品中,使用grid实现你这名效果, 要用code动态生成grid的行与列,把元素一3个 一3个 的上加,是因为grid不自带滚动条,什么都大伙 需用用code控制滚动条。这样这般麻烦下才实现了上图中的效果。我听后非常无语,也非常钦佩大伙 的耐心。真是,实现里面的效果可是50秒。兄弟们,打开Blend,跟我并肩做。

    

  事先一3个 水平方向,从左向右排列的ListBox便制作完毕了。

  打开Data面板,点击Create a sample data按钮,在弹出菜单中选折 第一项,new sample data...

  下一步,请直接将Property1拖拽到画布上,blend会自动生成一3个 ListBox。并用刚才浏览的图片内容,填充ListBox。

    

  他说他们会问,假设ListBox含晒 一万张图片数据,并肩加载甜得会消耗什么都的资源? 他说你想到,是因为还需用随着滚动条向下拖拽,内容被逐步的加载并显示就好了。

    

  在Objects and timeline面板中,点击下图中最左的“

    

  在弹出对话框中,为你的Template取一3个 名字,或者点击OK按钮。

    

  别着急,这是因为wrapPanle的形态学 是当wrapPanle的深度图缺乏容下所有子Item时才会换行排列其余的Item。什么都大伙 下一步需用禁用ListBox的水平滚动条,你还都可以内控 的wrapPanle这样延展的空间。请点击ListBox,在右侧属性面板中找到HorizontalScrollBarVislbility属性,将它设置为Disabled。

    

  在我做过的项目中什么都都用到了图2和3的表达土办法,比如下图中可是用了图3的布局:

    

  或者blend会自动生成一3个 sampleDataSource,他下面紧跟一3个 名为Collection的集合,集合含晒 高一3个 属性Property1,Property2,点击Property1最右侧的按钮,在弹出框中将Type类型选折 为Image。如下图所示:

  唠叨几句

  将模板中的StackPanel替换为WrapPanel(替换土办法为:先删除StackPanel,或者点击工具条上的按钮,在搜索栏中输入wrappanel,稍等1分钟左右,blend才会搜索到wrappanel。是因为按照里面步骤依然无法找到wrappanel,请确认电脑中是是否是安装了Microsoft Silverlight 4 Toolkit April 2010)

  或者你还都可以发现,Objects and timeline面板自动切换到了Template编辑模式。如下图:

      

    

    

  肩上的故事

  在Objects and timeline面板中,点击下图中最左的“”按钮返回主界面编辑模式。

  事先就实现了图3中的ListBox效果。

  接下来得到下图中的效果,做到你这名步大伙 是因为会有问提,缘何ListBox许多效果也这样变化呢?