设置JavaFX-CSS改变TreeView节点图标

1.      实现以“+”、“-”表示节点图标

JavaFX中TreeView的默认节点图标如下图所示：

 

其中箭头向下表示展开，向右则表示合拢。

 

设置css就可以改变TreeView的样式。比如使用下面几行的css定义，就可以实现“+”表示合拢，“-”表示展开。

.tree-cell .tree-disclosure-node .arrow {    -fx-shape: "M 0 -1 L 3 -1 L 3 -4 L 5 -4 L 5 -1 L 8 -1 L 8 1 L 5 1 L 5 4 L 3 4 L 3 1 L 0 1 z";   }.tree-cell:expanded .tree-disclosure-node .arrow {    -fx-rotate: 0;　　-fx-scale-shape: false;    -fx-shape: "M 0 -1 L 7 -1 L 7 1 L 0 1 z";}

 

这是改变后的效果：

 

 

2.      JavaFX中默认TreeView样式定义

在JavaFX的com.sun.javafx.scene.control.skin.caspian的包中，有一个caspian.css文件，里面定义了JavaFX的默认样式。 

打开文件，搜索“Treeview”，可以找到如下内容：

/************************************************************************ *                                                                      * * TreeView and TreeCell                                                * *                                                                      * ************************************************************************/ .tree-view {    -fx-skin: "com.sun.javafx.scene.control.skin.TreeViewSkin";    -fx-background-color: -fx-box-border, -fx-control-inner-background;    -fx-background-insets: 0, 1;     /* There is some oddness if padding is in em values rather than pixels,       in particular, the left border of the control doesn't show. */    -fx-padding: 1; /* 0.083333em; */}…

 

其中跟节点图标有关的定义有：

.tree-cell.tree-disclosure-node.arrow {    -fx-background-color: -fx-mark-color;    -fx-padding: 0.333333em; /* 4 */    -fx-shape: "M 0 -4 L 8 0 L 0 4 z";}
.tree-cell:expanded.tree-disclosure-node.arrow {    -fx-rotate: 90;} .tree-cell:filled:hover .tree-disclosure-node .arrow {    -fx-background-color: -fx-mark-color;}.tree-cell:filled:selected .tree-disclosure-node .arrow {    -fx-background-color: -fx-selection-bar-text;}.tree-cell:filled:selected:hover .tree-disclosure-node .arrow {    -fx-background-color: -fx-selection-bar-text;}

 

3.      简单介绍SVG路径字符串

先注意其中前两个高亮显示的定义。“-fx-shape”是一个SVG的路径字符串，用来画图形。M代表moveTo，L代表lineTo，最后的z表示连接当前点到初始点，使形状闭合。如图：

 

由此可知，在这里使用“-fx-shape”绘制了一个向右的箭头，是TreeItem的关闭状态。后面的“.tree-cell:expanded .tree-disclosure-node .arrow”理所当然就是展开状态，这倒是很简单，“-fx-rotate: 90;”表示顺时针旋转90度，即箭头冲下。

 

默认样式就是这个原理。把前面写的两个选择器放在项目的css文件中，就可以覆盖默认样式。其中的：

-fx-shape: "M 0 -1 L 3 -1 L 3 -4 L 5 -4 L 5 -1 L 8 -1 L 8 1 L 5 1 L 5 4 L 3 4 L 3 1 L 0 1 z";

就是手工画了一个“+”号，如图：

 

在SVG路径字符串中，还可以用“H x”或者“V y”代替“L x y”。“H x”表示从当前位置画水平直线到位置“x”，“V y”则表示从当前位置画垂直线到位置“y”。

 

这样之前的两个选择器可以写成下面的样子，看上去精简了很多：

.tree-cell .tree-disclosure-node .arrow {    -fx-shape: "M 0 -1 H 3 V -4 H 5 V -1 H 8 V 1 H 5 V 4 H 3 V 1 H 0 z"} .tree-cell:expanded .tree-disclosure-node .arrow {    -fx-rotate: 0;    -fx-scale-shape: false;    -fx-shape: "M 0 -1 H 7 V 1 H 0 z";}

 

4.      CSS属性覆盖

注意，新的选择器仅仅覆盖了“-fx-shape”属性，其他两个属性，-fx-background-color和-fx-padding仍然原样保留。也是因此，在“.tree-cell:expanded”中一定要有 “-fx-rotate: 0;”，否则仍然会执行旋转90度，把画的“-”变成“|”。

 

还有，在“.tree-cell:expanded”中还多了属性“-fx-scale-shape: false”。该属性默认为“true”，会把画出的“-”号放大成一个矩形。

5.      Win7 Style

上面提到5个关于节点图标的选择器中，其他3个描述的是鼠标经过，以及节点被选择时的样式。比如下面的定义实现了Win7效果的TreeView样式：

.tree-cell .tree-disclosure-node .arrow {    -fx-scale-shape: false;    -fx-background-color: transparent;     -fx-shape: "M 0 4 L 0 -4 L 5 0 z";    -fx-border-color: grey;    -fx-border-width: 0.083333em;   }.tree-cell:expanded .tree-disclosure-node .arrow {    -fx-scale-shape: false;       -fx-background-color: -fx-mark-color;    -fx-rotate: 0;     -fx-shape: "M 0 3 L 6 -3 L 6 3 z";    -fx-border-width: 0.083333em; } .tree-cell:filled:hover .tree-disclosure-node .arrow {    -fx-background-color: transparent;    -fx-border-color: cyan;} .tree-cell:filled:selected .tree-disclosure-node .arrow {    -fx-border-color: cyan;}.tree-cell:filled:selected:hover .tree-disclosure-node .arrow {    -fx-border-color: cyan;}

 

效果如图：

 

不是太象，应该是有几个JavaFX-CSS还没掌握。

 

参考资料：

1. JavaFX CSS Reference Guide (http://docs.oracle.com/javafx/2/api/javafx/scene/doc-files/cssref.html)

2. SVG 1.1 (Second Edition) – 16 August 2011 (http://www.w3.org/TR/SVG/paths.html#PathDataClosePathCommand)