lanying56123 发表于 2015-5-9 05:32:30

No. 8958 实现Windows 7样式Aero TreeView控件(三):样式绘制

  Windows 7 Aero TreeView的效果样式,不说废话,分析样式:
   
  
左图为Windows 7 资源管理器树型目录一部分的截图,当他放大到800%时就能看到右侧的清晰的像素级图片,可以看到音乐项的效果,放大的部分是鼠标划过树目录项的效果,简单的来分析一下效果,最外边是一个深色的单像素边框,在内侧仔细看有一层接近白色的一像素内边框,内部背景呢,则是由上而下的一个渐变颜色,用取色软件分析之后有了以下的色彩结构:
        

  开始的时候,我以为内边框只是一个简单单色边框,后来对比效果才发现,内边框原来也是由上而下的渐变颜色,TreeViewItem的控件模板结构如下:
























在模板里面设置了根节点StackPanel,上面分析了边框是两层,所以定义了两个嵌套的Border对象,由于某些列表项可能会有不相同的设置,所以我酌情绑定了一些相对的属性,比如说在内边框绑定Padding属性,如果真有需求比如像Margin的属性可能就要酌情绑定到外侧outBorder对象上去了,至于选中效果的布局问题我在上一篇博文里面有详细的说明,具体色彩的实现以及交互效果呢,都是通过Trigger来实现的,代码如下:


























































  
  上面代码可以看出来这里面定义了大概四种状态,分别是:
  

  笔刷代码就不重复帖出了,状态效果配色方案如上所示。

  此博文由Windows Live Writer 4 编辑完成,微软在前些天发布了Windows Live Essentials Wave 4 Beta 版本在线安装包,安装后甚是欣喜,启用了全新的Ribbon工具栏,Windows Live Mail的列表加载新添了淡入效果,而Windows Live Messanger的鼠标划入也添加了更多的动画元素,其中淡入和渐变的几个特殊效果单元与Apple新发布的iOS4操作系统的很多界面元素有重合,不知道是否最新的界面设计流行元素的前兆,待而观之。
  
  由这篇博文之后,高仿 Windows 7 Aero TreeView效果就基本上实现了,还有类似于鼠标移出TreeView所有Arrow全部消失得效果,我决定在有空的时候在添加,从代码的角度,这是我能实现的感觉上最优雅的写法,希望有高人高法,可以不吝赐教。
页: [1]
查看完整版本: No. 8958 实现Windows 7样式Aero TreeView控件(三):样式绘制