5

Is it possible to replace the expand and collapse arrow of a TreeView with a custom Node / shape (instead of an image)?

Community
  • 1
  • 1
Jens Piegsa
  • 7,399
  • 5
  • 58
  • 106
  • 1
    Specifically, what kind of node do you want? The `-fx-shape` css property of the arrows will provide basic svg shapes. – Uluk Biy Nov 19 '13 at 22:28
  • @UlukBiy: Shame on me, you're absolutely right. Thanks! The default even consists of two styleable nodes. The only thing I will however have to deal with, is the "arrow" rotation. – Jens Piegsa Nov 19 '13 at 22:39
  • 1
    There is a default solution for rotation also in there (caspian): `-fx-rotate: 90;` :), See .tree-cell:expanded .tree-disclosure-node .arrow – Uluk Biy Nov 19 '13 at 22:48
  • @UlukBiy: Great, I already thought about that there had to be something like this. If you like, you can enhance your comment to a short "acceptable" answer, of course. :-) – Jens Piegsa Nov 19 '13 at 22:53

1 Answers1

4

The -fx-shape css property of the arrows provides basic SVG shapes.

.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";    // <-- change this default triangle shape
}

.tree-cell:expanded .tree-disclosure-node .arrow {
    -fx-rotate: 90;                      // maybe another svg shape instead
}
Uluk Biy
  • 48,655
  • 13
  • 146
  • 153