Expression Blend 的点滴（1）--ListBox华丽大变身

最近，在园子里有很多朋友写了关于Blend的优秀而且实用的文章，在此，我先表明silverlight的爱好者感谢他们的无私分享。废话很少说了，今天，我也来分享点东西，但愿对你们有用。

正如文章题目，此次咱们要拿ListBox来进行折腾，这时，你脑海中会不会浮现listbox的样子呢？最后，listbox最后变成了下面的样子：



看到它会不会以为很熟悉？在js中见过，在flash中见过？不会吧？它是listbox变的？别被眼睛所欺骗，相信我，它确实是listbox。至少，在看完这篇文章的时候，你必定会相信个人。其实，这一切都受益于silverlight强大的模板技术，可是这仍是不够的，若是没有blend，这一切将变得如此的不现实，你面对一大堆xaml代码，相信你没看上50行就头晕了，一块儿来感谢blend吧，让一切工做变得如此简单（这里指的的界面设计，若是你要用它去作业务逻辑，那就......)。接下了，就跟着我一步一步改造listbox，不用写一行代码，把它变成上面的样子：

首先，打开blend建立一个silverlight项目



接着打开数据源选项，建立一个示例数据



选择图片数据，并指定文件来源



讲Property1拖拽到LayoutRoot上
这样就能看到以下的样子


接着，对listbox建立一个副本模板



肯定后，咱们修改模版下Grid的属性将垂直卷动条设置为无效，水平设置有效


接着，咱们继续选择scrollviewer编辑模板--编辑副本



建立好后，能够看到以下界面：



在这里，咱们把VerticalScrollBar删除掉，由于不须要它，接着继续编辑VerticalScrollBar的模板



肯定后，将会是下面的结构：


接着把不须要的东西删除，这里咱们删除VerticalRoot以及HorizontalRoot下的全部Rectangle，HorizontalLargeDecrease，HorizontalLargeIncrease，HorizontalThumb项。

而后，继续编辑HorizontalSmallDecrease的模板



把下图中选中的项所有删除，只留下path，咱们一层一层的进入，好像把一件件衣服脱掉，如今已经在内衣部分了，这个Path其实就是listbox滚动条上的增长和减小的三角按钮，不过，目前彷佛有些小，不要紧，咱们修改它的属性，把它变大点。





这样能够看到它了：



对于HorizontalSmallIncrease作相同的修改（这里略去）

而后退出因此的模板编辑进入最开始的界面，编辑listbox的布局模板：



将stackpanel的位置设置为垂直




调整下listbox的大小，这时，你将看到下面的结果：


这两个控制的箭头位置好像有点不对，不要紧，咱们打开到HorizontalScrollBar的模板下对HorizontalSmallDecrease和horizontalSmallIncrease的Margin属性进行设置，调整到合适的位置：

                   

具体的值根据你本身肯定的大小去调整。你运行项目，就能够看到效果了，可是还有一点点不对的地方，就是在listbox中的image下会有一段空白，这是因为存在着HorizontalScrollBar的缘由，想办法把它隐藏掉，可是不能删除，删除的话，那个三角箭头也会消失，由于它是属性Scrollbar的一部分，这里，只要将HorizontalScrollBar的Margin属性的top设置一个必定大小的负数，让它往上移动，这样就隐藏了。

还有更多的细节，就再也不赘述了，能够对三角箭头设置各类状态响应，例如鼠标移上去颜色变化等等动画效果。终于写完了，若是你第一次看，可能会以为很复杂，那么多步骤，可是当你熟练了以后，你会发现这一切是多么的简单，固然你也许更愿意本身用coding硬编码去实现这样的效果，那也是很好的。这里只是提供一个思路，并非必定要你这样作。：）