详解如何打造Aero风格的TreeView

开发 后端
本文将为大家介绍的是如何打造Aero风格的TreeView,包括WPF和非WPF模式。希望本文能对大家有所帮助。

51CTO-.NET频道向您推荐《让你的代码“炫”起来——WPF开发教程》专题。我们来看看Windows系统中的Aero风格的Tree是什么样子的。

风格如何? 默认结构 结构对比

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

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

WPF中的TreeView在默认情况下的情况

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

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

三角模糊

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

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

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

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

clip_image006

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

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

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

默认三角实现

这个三角的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的哦。完整的代码可以http://files.cnblogs.com/nankezhishi/TreeView.Themes.Aero.zip下载到。

原文标题:Aero风格的TreeView

链接:http://www.cnblogs.com/nankezhishi/archive/2010/05/25/AeroTreeviewStyle.html

【编辑推荐】

  1. 详解TripleDES实现C# 加密操作
  2. 浅析C# WinForm控件开发前期准备
  3. 详解C# WinForm自定义控件的使用和调试
  4. C# Attribute的概念与使用浅析
  5. C# AttributeUsage的使用浅析
责任编辑:彭凡 来源: 博客园
相关推荐

2009-10-10 14:54:44

treeView1控件

2009-12-04 13:34:52

Windows Aer

2009-03-21 09:47:09

微软Windows 7Aero Snap

2016-12-08 11:49:03

APPRetrofitRxJava

2009-02-01 14:34:26

PythonUnix管道风格

2012-05-24 09:03:38

微软Windows 8

2021-02-19 19:02:53

Material ShGNOME桌面Linux

2009-12-08 16:47:23

Windows Aer

2013-08-27 09:40:34

Windows 9

2013-09-17 12:26:43

BYOD环境安全BYOD移动设备

2009-08-29 08:44:05

Windows 7Aero恢复

2019-03-28 10:20:09

容器镜像系统运维Linux

2021-06-18 12:13:01

Android开发者LayoutInspe

2023-06-09 00:11:57

ChatGPT写作风格GPT

2012-09-03 10:27:08

Windows 8Aero Glass

2009-07-27 13:01:28

TreeViewASP.NET

2009-08-31 15:34:45

常用操作C# TreeView

2009-12-31 09:11:07

MacWindows 7特效

2021-03-31 11:52:47

智能数字城市智慧城市物联网

2009-08-25 09:28:23

Windows 7Aero Peek优化
点赞
收藏

51CTO技术栈公众号