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

  1. 云栖社区>
  2. 博客>
  3. 正文

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

杰克.陈 2018-05-14 10:14:00 浏览308
展开阅读全文
原文:【全面解禁!真正的Expression Blend实战开发技巧】第六章 认识ListBox

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

    img_5c9ab839406ad2334a6f441e704cdd53.jpe

  在我做过的项目中很多都用到了图2和3的表达方式,比如下图中就是用了图3的布局:

    img_a88b5a50a82cab1de49b150bb503b4fe.jpe

  国内某个非常著名的公司有一款siverlight产品,也用到了上图中的布局效果。一次交流中我给他们的开发人员看了我做的一个demo,然后他问我:“你这个布局用的是什么控件啊?stackpanel? wrappanel? grid? ” ,当我跟他说是ListBox时他很意外。他告诉我他们产品中,使用grid实现这个效果, 要用code动态生成grid的行与列,把元素一个一个的加进去,由于grid不自带滚动条,所以他们还要用code控制滚动条。如此这般麻烦下才实现了上图中的效果。我听后非常无语,也非常钦佩他们的耐心。其实,实现上面的效果只要30秒。兄弟们,打开Blend,跟我一起做。

  

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

    img_7a7a77f90443cda07e5adffe53cc2fd8.jpe

  

  在弹出菜单中直接点击OK

    img_00afa2753be11b4b9f6352d9565ab923.jpe

  然后blend会自动生成一个sampleDataSource,他下面紧跟一个名为Collection的集合,集合中包含两个属性Property1,Property2,点击Property1最右侧的img_a7fd14a74e7c994566f9e96ee13ae862.jpe按钮,在弹出框中将Type类型选择为Image。如下图所示:

     img_b024fcfa037d7795f9c66f1880560cdf.jpe

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

    img_1090cecbc1f39b528980cead2ff866c5.jpe

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

    img_a5cdaa9fc1ca932bad7d631c721a4622.jpe

  

  这样我们得到了一个默认样式的ListBox,他就像我们常见的ListBox一样,自上而下排列内容。下一步,为了让他变得特殊一点,请右击ListBox,在弹出菜单中选择Edit Additional Templates -> Edit Layout Of Items ->Create Empty

    img_23974a41e0b84ec5a2bb70d5cded12f3.jpe

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

    img_ff84df6812f56eb8f383bd432efa48f0.jpe

  然后你会发现,Objects and timeline面板自动切换到了Template编辑模式。如下图:

    img_f75596404e0ff25ce756800b550ac348.jpe

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

    img_77a28b6e2bc95052860446786e698b5e.jpe

  

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

    img_13f9678f4655eccd82c451442ef39503.jpe

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

    img_b83c269230891fa800267b590e1b40a4.jpe

  下一步我们来实现图3中的另外一种效果,可以自动换行的ListBox。首先右击ListBox,在弹出菜单中选择Edit Additional Templates -> Edit Layout Of Items ->Edit Current                  

    img_aead0ade04e09df5fad52c903ddba706.jpe  

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

    img_970546e1cc64323851f5b149b56e317a.jpe      

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

    img_13f9678f4655eccd82c451442ef39503.jpe

  

  接下来得到下图中的效果,做到这一步大家可能会有疑问,怎么ListBox一点效果也没有变化呢?

    img_6f65a2c3169aea06333b6bab9b3c2111.jpe

  别着急,这是因为wrapPanle的特性是当wrapPanle的宽度不够容下所有子Item时才会换行排列其余的Item。所以我们下一步需要禁用ListBox的水平滚动条,让他内部的wrapPanle没有延展的空间。请点击ListBox,在右侧属性面板中找到HorizontalScrollBarVislbility属性,将它设置为Disabled。

    img_e5b842c86d2800a11437d121dbb7a156.jpe

  这样就实现了图3中的ListBox效果。

    img_76f37952b4869b1e5501b5577f4496b5.jpe

  背后的故事

  也许有人会问,假设ListBox中有一万张图片数据,一起加载岂不是会消耗很多的资源? 也许你想到,如果可以随着滚动条向下拖拽,内容被逐步的加载并显示就好了。

其实微软已经替我们考虑并默认集成了这一特性。在WPF中,VirtualizingStackPanel等集合控件本身具有名为virtualizes的特性。请看下图

    img_d2c72c7b8901b13c4853db3ef9eb4612.jpe

  这是一个拥有10个Item的ListBox。但他的高度只够显示4项Item,5~10(半透明的部分)用户是看不到的。我们从此可以发现,无论ListBox有多少子项,用户同一时间可以看到的只有四项,利用这一点,在WPF中,VirtualizingStackPanel无论有多少子项,实际消耗资源的只有用户看到的那四项,当滚动条向下滑动时,会动态的加载后续资源并使其可视化,同时自动释放移出用户的视野的Items。Silverlight作为WPF的弟弟,当然也默认集成了virtualizes特性。

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

  唠叨几句

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

网友评论

登录后评论
0/500
评论
杰克.陈
+ 关注