JavaFX8 treeTableView 축소 루트 항목 사용자 정의

Question

트리 루트 항목의 축소 모양을 사용자 정의하려면 어떻게해야합니까? 커스터마이징이란 이미지를 설정하고 작은 삼각형 (/ 새로운 이미지)을 그 셀 안에 배치하는 것을 의미합니다.

미리 감사드립니다.

Answer 1

jre/lib/ext의 jfxrt.jar 파일 또는 find online에서 추출 할 수있는 기본 스타일 시트 modena.css를 살펴보십시오. 그래픽은 그곳의 경로로 정의됩니다.

.tree-cell > .tree-disclosure-node, 
.tree-table-row-cell > .tree-disclosure-node { 
    -fx-padding: 4 6 4 8; 
    -fx-background-color: transparent; 
} 
.tree-cell > .tree-disclosure-node > .arrow, 
.tree-table-row-cell > .tree-disclosure-node > .arrow { 
    -fx-background-color: -fx-text-background-color; 
    -fx-padding: 0.333333em 0.229em 0.333333em 0.229em; /* 4 */ 
    -fx-shape: "M 0 -3.5 L 4 0 L 0 3.5 z"; 
} 
.tree-cell:expanded > .tree-disclosure-node > .arrow, 
.tree-table-row-cell:expanded > .tree-disclosure-node > .arrow { 
    -fx-rotate: 90; 
} 

자신의 CSS에서이 규칙을 무시할 수 있습니다. CSS에서 언급 한 화살표는 지역이므로 원하는 경우 -fx-background-image을 정의 할 수 있습니다.

Answer 2

다음 샘플에서는 루트가 확장되었는지 여부에 따라 루트 노드의 그래픽을 사용자 지정합니다 (그래픽 이미지 뷰에서 뷰의 이미지와 트리 항목의 확장 속성간에 바인딩을 사용하여).

샘플은 화살표의 패딩 설정을 사용하여 그래픽 이미지에 대해 수직으로 작은 삼각형 (표시 화살표)을 중앙에 배치합니다. 센터링이 자동이 아니므로 샘플을 적절하게 조정해야합니다.

공개 화살표의 모양을 다른 것으로 변경하려면 Uluk의 답변 : JavaFX: Use custom Node as collapse/expand branch switch for TreeView을 참조하십시오.

CustomTree.java

import javafx.application.Application; 
import javafx.beans.binding.Bindings; 
import javafx.scene.Scene; 
import javafx.scene.control.*; 
import javafx.scene.image.*; 
import javafx.stage.Stage; 

public class CustomTree extends Application { 

    @SuppressWarnings("unchecked") 
    @Override 
    public void start(Stage stage) throws Exception { 
     Image expandedImage = new Image(
       "http://icons.iconarchive.com/icons/pelfusion/christmas-shadow-2/64/Tree-icon.png" 
     ); 
     Image collapsedImage = new Image(
       "http://icons.iconarchive.com/icons/pelfusion/christmas-shadow/64/Tree-icon.png" 
     ); 

     ImageView rootGraphic = new ImageView(expandedImage); 

     TreeItem<String> root = new TreeItem<>("Root Node"); 
     root.setGraphic(rootGraphic); 
     root.getChildren().setAll(
       new TreeItem<>("Item 1"), 
       new TreeItem<>("Item 2"), 
       new TreeItem<>("Item 3") 
     ); 

     rootGraphic.imageProperty().bind(Bindings 
       .when(root.expandedProperty()) 
        .then(expandedImage) 
        .otherwise(collapsedImage) 
     ); 
     root.setExpanded(true); 

     TreeView<String> treeView = new TreeView<>(root); 
     treeView.setPrefSize(300, 200); 

     Scene scene = new Scene(treeView); 
     scene.getStylesheets().add(
       getClass().getResource(
         "custom-tree.css" 
       ).toExternalForm() 
     ); 
     stage.setScene(scene); 
     stage.show(); 
    } 

    public static void main(String[] args) { launch(args); } 
} 

맞춤 tree.css

.root { 
    -fx-font-size: 30px; 
} 

.tree-cell > .tree-disclosure-node { 
    -fx-padding: 24 6 24 8; 
}