原文: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硬编码去实现这样的效果,那也是很好的。这里只是提供一个思路,并不是一定要你这样做。:)

Expression Blend 的点滴(1)--ListBox华丽大变身的更多相关文章

  1. Expression Blend 的点滴(4)--创建类似iPhone屏幕锁控件(上)

    原文:Expression Blend 的点滴(4)--创建类似iPhone屏幕锁控件(上) 本篇文章,最终效果图:  当然,不只是一个UI而已,如果只是一张图片,那专业的设计师能做出更出色的效果.在 ...

  2. Expression Blend 的点滴(4)--创建类似iPhone屏幕锁控件(下)

    原文:Expression Blend 的点滴(4)--创建类似iPhone屏幕锁控件(下) 接着上篇... 接下去,将一步步演示如果创建当点击checkBox后,其中的按钮由左边滑动到右边,表示处于 ...

  3. Expression Blend 的点滴(3)--Templating的妙用,制作自己的ScrollBar控件

    原文:Expression Blend 的点滴(3)--Templating的妙用,制作自己的ScrollBar控件 在Blend中,有一个功能,Make into control---通过它可以方便 ...

  4. Expression Blend 的点滴(2)--利用可视化状态创建神奇翻转动画

    原文:Expression Blend 的点滴(2)--利用可视化状态创建神奇翻转动画 首先,来看下实现后的效果: 关于VisulaState VisualState 指定控件处于特定状态时的外观.例 ...

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

    原文:零元学Expression Blend 4 - Chapter 45 ListBox里的物件不能换行吗? ListBox里的排列不是垂直就是水平,觉得这样的排列很枯燥乏味吗? 想要它变聪明吗? ...

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

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

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

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

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

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

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

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

随机推荐

  1. 91.生成ini文件并写入和读取ini文件

    写入 WritePrivateProfileStringA("hello money", infx[i].name, money, "1.ini"); 按照字符 ...

  2. Android基于xmpp的即时通讯应用

    xmpp是一个通信协议.因为这是个开放的协议,为了节俭开发成本,很多即时应用都采用了这个协议.Android上最常用的组合asmack +openfire.Asmack是smack的android版, ...

  3. JS学习笔记 - fgm练习 - 鼠标移入/移出div样式改变

    思路: div的默认样式正常设置. 鼠标移入时,发生改变的样式有3个,即 边框颜色,div背景色,字体颜色. 把这三个css改变设置在一个类名下,再通过js给div动态 添加/去除这个类名,实现div ...

  4. 8、for 、emumrate、range、if

    1.for循环用户按照顺序循环可迭代对象中的内容,PS:break.continueli = [11,22,33,44]for item in li: print item 2.enumrate 为可 ...

  5. NSAttributeString创建各种文字效果

    NSDictionary *attributes =@{ NSForegroundColorAttributeName: [UIColorredColor], NSFontAttributeName: ...

  6. loadrunner--log的使用总结

    1.log的设置方式.在 runtime setting中可以设置log的生成方式:默认的log方式:Enable logging选中,log option是Send messages only wh ...

  7. element ui源码解析 -- button篇

    要看源码就得从最简单的开始,button够简单的了,就从他开始吧. 安装依赖后源码目录在:node_modules/element-ui/packages中,可以看到这里的文件夹命名是不是很熟悉,就是 ...

  8. [Angular HTML] Overwrite input value, String.fromCharCode & input.selectionStart

    @HostListener('keydown', ['$event', '$event.keyCode']) onKeyDown($event: KeyboardEvent, keyCode) { i ...

  9. [原]MFC中DIALOG(对话框)程序响应加速键(快捷键)

    [原]MFC中DIALOG(对话框)程序响应加速键(快捷键) 2014-8-6阅读266 评论0 新建一个对话框程序,项目名为Test,删除默认确定,取消和静态文本框控件.添加一个按钮,Caption ...

  10. MFC注册窗口类以及FindWindow按窗口类名查询(避免用#32770获取窗口句柄)

    呵呵,最近在研究SendMessage函数,其中需要用到m_hWnd,之后延伸着又尝试获得窗口的句柄,于是遇到了FindWindow函数,原型如下: HWND FindWindow ( LPCSTR ...