zoukankan      html  css  js  c++  java
  • Aero风格的TreeView

    我们来看看Windows系统中的Aero风格的Tree是什么样子的。

    clip_image001 clip_image002 clip_image003

    上面这样都是系统中非WPF实现的Tree。多数Item都有MouseOver,Selected和Selected and Focused三种附加状态。

    我们再来看看WPF中的TreeView在默认情况的是什么样子的。

    clip_image004

    相信大家一眼就可以看出来,这明明就是XP风格的嘛。和Aero风格的Tree差距实在是太大了。而且问题很严重。下面列举一二。

    1. 收起的三角箭头模糊。而且此模糊用SnapsToDevicePixel和UseLayoutRendering都无法解决。如下图所示。

    clip_image005

    下面的那个就是WPF的默认风格。而间三角与文本之间的间距也不一样。

    2. TreeViewItem只有Selected的效果,而且是XP风格的。

    3. WPF的TreeViewItem的三角在MouseOver时,只变色,而没有发光效果。而Win32的是有发光效果的。

    4. 展开的三角箭头与收起的三角箭头相比,水平位移过大。如下图所示。

    clip_image006

    右边是WPF的TreeView默认风格,与Win32的相差了将近两个像素。

    下面我们来解决问题1,2和3。

    WPF的TreeViewItem默认的三角实现方式比较复杂。如下图所示。

    clip_image007

    这个三角的Path可以描述为M0,0 L6,0 0,6Z。线宽为1个像素。这样,垂直的那条线,虽然是一个像素宽,但是不与Device Pixel重合。结果就是左右各是半个像素宽。最终显示在屏幕上了就成了两个像素宽的,50%的灰色的线。肉眼看上去就是模糊了。

    我也很奇怪为什么SnapsToDevicePixel和UseLayoutRedering 在这个问题上会失去效力。解决方案就是让Path的Data也对齐到像素就可以。如下。

    <StreamGeometry x:Key="TreeArrow" >M0.5,0L0.5,7 4.5,3.5z</StreamGeometry>

    这个看上去都是用小数,结果却是对齐到了屏幕像素点。显示结果就能很清晰了。

    再就是定义TreeViewItem的那三个状态。

    clip_image008

    从图中可以看出,这个Item是有两个Border的,背景和内Border都是渐变色。

    Item State

    Element

    Brush

    Mouse Over

    Border

    #FFB8D6FB

     

    Inner Border

    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

        <GradientStop Color="#FFFCFDFE" Offset="0"/>

        <GradientStop Color="#FFF2F7FE" Offset="1"/>

    </LinearGradientBrush>

     

    Background

    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

        <GradientStop Color="#FFFAFBFD" Offset="0"/>

        <GradientStop Color="#FFEBF3FD" Offset="1"/>

    </LinearGradientBrush>

    Selected

    IsActive

    Border

    #FF84ACDD

     

    Inner Border

    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

        <GradientStop Color="#FFF2F8FF" Offset="0"/>

        <GradientStop Color="#FFDFEEFF" Offset="1"/>

    </LinearGradientBrush>

     

    Background

    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

        <GradientStop Color="#FFECF5FF" Offset="0"/>

        <GradientStop Color="#FFD0E5FF" Offset="1"/>

    </LinearGradientBrush>

    Selected

    Not IsActive

    Border

    #FFDADADA

     

    Inner Border

    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

        <GradientStop Color="#FFFBFBFC" Offset="0"/>

        <GradientStop Color="#FFF1F1F1" Offset="1"/>

    </LinearGradientBrush>

     

    Background

    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

        <GradientStop Color="#FFF9F9F9" Offset="0"/>

        <GradientStop Color="#FFE6E6E6" Offset="1"/>

    </LinearGradientBrush>

    上面的值都是用Paint.NET从Win32实现的TreeView的截图中手工取出的值,仅供参考。

    最后优化完成的TreeViewItem的样式如下所示。

    clip_image009

    不要看错了,这个可是WPF的哦。完整的代码可以从这里下载到。

  • 相关阅读:
    bootstrap中的动态加载出来的图片轮播中的li标签中的class="active"的动态添加移除
    细碎的小定义的记录
    jQuery动态添加的元素中处理字符串溢出后在指定字符数后添加省略号
    ASP.NET中扩展FileUpload的上传文件的容量
    SVN错误:Attempted to lock an already-locked dir
    Eclipse中jsp、js文件编辑时,卡死现象解决汇总(转)
    修改weblogic端口的方法
    oracle 使用触发器实现id自增
    nui UI 具有右键属性的菜单树
    eclipse中 将java项目转换为web项目
  • 原文地址:https://www.cnblogs.com/nankezhishi/p/AeroTreeviewStyle.html
Copyright © 2011-2022 走看看