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

    

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

    

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

  

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

    

  

  在弹出菜单中直接点击OK

    

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

     

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

    

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

    

  

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

    

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

    

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

    

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

    

  

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

    

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

    

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

      

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

          

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

    

  

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

    

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

    

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

    

  背后的故事

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

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

    

  这是一个拥有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

转载文章来源:http://www.cnblogs.com/kaodigua/archive/2011/02/21/1959650.html

[转]【全面解禁!真正的Expression Blend实战开发技巧】第六章 认识ListBox的更多相关文章

  1. 【全面解禁!真正的Expression Blend实战开发技巧】十一章 全面解析布局(Grid & Canvas &StackPanel &Wrappanel)

    原文:[全面解禁!真正的Expression Blend实战开发技巧]十一章 全面解析布局(Grid & Canvas &StackPanel &Wrappanel) 写这篇文 ...

  2. 【全面解禁!真正的Expression Blend实战开发技巧】第九章 FluidMoveBehavior完全解析之二平滑运动的滚动条

    原文:[全面解禁!真正的Expression Blend实战开发技巧]第九章 FluidMoveBehavior完全解析之二平滑运动的滚动条 这一章讲解FluidMoveBehavior的另一个应用, ...

  3. 【全面解禁!真正的Expression Blend实战开发技巧】第二章 你好,UI设计师

    原文:[全面解禁!真正的Expression Blend实战开发技巧]第二章 你好,UI设计师 你好,UI设计师 曾几何时我从没想过要与艺术家打交道,但是Silverlight改变了这一切.UI设计师 ...

  4. 【全面解禁!真正的Expression Blend实战开发技巧】第一章 真正的开发中的最佳的做法

    原文:[全面解禁!真正的Expression Blend实战开发技巧]第一章 真正的开发中的最佳的做法 从设计者到开发者 设计师创建一个应用程序的布局然后让开发者去实现. 从开发者到设计者 开发者创建 ...

  5. 【全面解禁!真正的Expression Blend实战开发技巧】序章

    原文:[全面解禁!真正的Expression Blend实战开发技巧]序章 从silverlight2开始我也和大家一样一直在跟随微软的脚步,从sl2~sl4一步一步过来,总结了不少心得体会.由于各种 ...

  6. 【全面解禁!真正的Expression Blend实战开发技巧】第十章 FluidMoveBehavior完全解析之三飞出ListBox吧

    原文:[全面解禁!真正的Expression Blend实战开发技巧]第十章 FluidMoveBehavior完全解析之三飞出ListBox吧 刚才有人说我的标题很给力,哈哈.那这个标题肯定更给力了 ...

  7. 【全面解禁!真正的Expression Blend实战开发技巧】第七章 MVVM初体验-在DataGrid行末添加按钮

    原文:[全面解禁!真正的Expression Blend实战开发技巧]第七章 MVVM初体验-在DataGrid行末添加按钮 博客更新较慢,先向各位读者说声抱歉.这一节讲解的依然是开发中经常遇到的一种 ...

  8. 【全面解禁!真正的Expression Blend实战开发技巧】第八章 FluidMoveBehavior完全解析之一漂浮移动

    原文:[全面解禁!真正的Expression Blend实战开发技巧]第八章 FluidMoveBehavior完全解析之一漂浮移动 好久没更新博客了,今天如果没急事,准备连发三篇,完全讲解Blend ...

  9. 【全面解禁!真正的Expression Blend实战开发技巧】第四章 从最常用ButtonStyle开始 - PathButton

    原文:[全面解禁!真正的Expression Blend实战开发技巧]第四章 从最常用ButtonStyle开始 - PathButton 上一篇我们介绍了TextButton,但为了追求界面的张力, ...

  10. 【全面解禁!真正的Expression Blend实战开发技巧】第五章 从最常用ButtonStyle开始 - ImageButton

    原文:[全面解禁!真正的Expression Blend实战开发技巧]第五章 从最常用ButtonStyle开始 - ImageButton 本章围绕ImageButton深入讨论,为什么是Image ...

随机推荐

  1. [转]SpringMVC框架入门配置 IDEA下搭建Maven项目

    初衷:本人初学SpringMVC的时候遇到各种稀奇古怪的问题,网上各种技术论坛上的帖子又参差不齐,难以一步到位达到配置好的效果,这里我将我配置的总结写到这里供大家初学SpringMVC的同僚们共同学习 ...

  2. 判断MDI窗体的子窗体是否存在

    //***************************************************************************//函 数名: CreateForm//返 回 ...

  3. Systm.IO.File.cs

    ylbtech-Systm.IO.File.cs 1.程序集 mscorlib, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b77a5c5619 ...

  4. Python 函数与内置函数

    1.函数的基本定义 def 函数名称(参数) 执行语句 return 返回值 def : 定义函数的关键字: 函数名称:顾名思义,就是函数的名字,可以用来调用函数,不能使用关键字来命名,做好是用这个函 ...

  5. 标记excel中输入的重复数据

    首先选中需要标记重复的数据列 开始 -> 条件格式 -> 突出显示单元格规则 -> 重复值 选择相应的颜色即可 效果如下:

  6. Django杂篇(2)

    目录 Django杂篇(2) cookie与session cookie session django中间件 自定义中间件 跨站请求伪造(csrf) CSRF的解决方案 Django杂篇(2) 本文主 ...

  7. MVC中利用ViewBag传递Json数据时的前端处理方法

    用viewBag传递Json字符串到前端时,json字符串中的“会被转义为& quot,前端处理方法为@Html.Raw(Json.Encode(ViewBag.Data)),再用eval() ...

  8. (转)线程池 ExecutorService 详细介绍以及注意点区别

    线程池 ExecutorService 相信java开发都用到,这里做个简单笔记 一 Java通过Executors提供四种线程池,分别为: newCachedThreadPool创建一个可缓存线程池 ...

  9. SPOJ10707 COT2-Count on a tree II

    COT2 - Count on a tree II 中文题意 离线询问一颗树上路径(u,v)中经过所有点的权值的种类数. 题解 树上莫队.即在树的欧拉序列上进行莫队.同一个点加第一次时增加,第二次时减 ...

  10. c# 中反射里的invoke方法的参数

    一个最简单的C#反射实例,首先编写类库如下: namespace ReflectionTest { public class WriteTest { //带参数的公共方法 public void Wr ...