如何在JavaFX中更改TitledPane中的标题组件
我无法在互联网上的任何地方找到答案。
我有一个必须具有可折叠面板的应用程序，因此Java FX中的TitledPane和Accordion设置是一个自然的候选者。
在应用程序中，我需要在容器折叠时拥有自定义标头。 我在css文档中看到TitledPane，标题实际上是HBox和各种其他组件。
http://docs.oracle.com/javafx/2/api/javafx/scene/doc-files/cssref.html#titledpane
我想访问此组件并将其替换为自定义组件。
我一直在使用TitledPane api的setGraphic函数和setContentDisplay到GraphicOnly。 使用自定义组件。 但是，我无法正确渲染它。 我在移除箭头和移除箭头占用的空间方面遇到了问题。
请参阅下面的链接，了解所需外观的屏幕截图及其实际外观。
http://tinypic.com/r/s1pxfn/6
如何删除箭头并删除填充？
TitledPane是Labeled，因此您可以在侦听器中设置图形或绑定到展开的属性。
更改背景颜色等（包括重写伪类的覆盖样式）可以通过css完成（例如，请参阅jfxrt.jar中caspian.css样式表的TitledPane部分）。
如果您需要基于代码访问TitledPane的子组件，则可以在将TitledPane添加到舞台上显示的场景后使用查找function。
adminPane.lookup(".arrow").setVisible(false); 在尝试查找之前，我建议尝试使用基于图形/ css样式表的方法。
如果您不需要Labeled显示文本，则将其设置为仅显示图形 。
titledPane.setContentDisplay(ContentDisplay.GRAPHIC_ONLY);
下面是一些示例代码，它显示TitledPane，其中TitledPane旁边有一个自定义标题，没有自定义标题。
import javafx.application.Application; import javafx.beans.binding.Bindings; import javafx.geometry.Pos; import javafx.scene.*; import javafx.scene.control.*; import javafx.scene.image.*; import javafx.scene.layout.*; import javafx.scene.paint.Color; import javafx.scene.shape.Circle; import javafx.scene.shape.Rectangle; import javafx.stage.Stage; /** http://stackoverflow.com/questions/11765436/how-to-change-header-component-in-titledpane-in-javafx */ public class TitledPaneCustomization extends Application { public static void main(String[] args) { launch(args); } @Override public void start(Stage primaryStage) { TitledPane adminPane = new TitledPane("Administration", VBoxBuilder.create().style("-fx-padding: 10").spacing(10).children( ButtonBuilder.create().text("Admin Client").maxWidth(Double.MAX_VALUE).build(), ButtonBuilder.create().text("Admin User").maxWidth(Double.MAX_VALUE).build() ).build() ); adminPane.setAnimated(false); adminPane.getStyleClass().add("admin"); Node open = HBoxBuilder.create().spacing(5).children( new Circle(4, 4, 8, Color.FORESTGREEN), new Rectangle(50, 16, Color.AQUAMARINE) ).build(); Node closed = HBoxBuilder.create().spacing(5).children( new Circle(4, 4, 8, Color.GOLDENROD), new Rectangle(50, 16, Color.AQUAMARINE) ).build(); adminPane.graphicProperty().bind( Bindings .when(adminPane.expandedProperty()) .then(open) .otherwise(closed) ); adminPane.setContentDisplay(ContentDisplay.GRAPHIC_ONLY); TitledPane viewPane = new TitledPane("View", VBoxBuilder.create().style("-fx-padding: 10").spacing(10).children( ButtonBuilder.create().text("View Client").maxWidth(Double.MAX_VALUE).build(), ButtonBuilder.create().text("View User").maxWidth(Double.MAX_VALUE).build() ).build() ); viewPane.setAnimated(false); VBox errorPane = VBoxBuilder.create().style("-fx-padding: 10").spacing(10).children( new Label("500: Aug 8, 12:15pm"), new Label("404: Aug 7, 3:27am") ).build(); Label nErrors = new Label(); nErrors.getStyleClass().add("nerrors"); nErrors.textProperty().bind(Bindings.size(errorPane.getChildren()).asString()); TitledPane connectivityPane = new TitledPane( "", errorPane ); Label connectivityErrorLabel = new Label("CONNECTIVITY ERROR"); connectivityErrorLabel.getStyleClass().add("connectivityErrorLabel"); connectivityPane.getStyleClass().add("connectivity"); connectivityPane.setAnimated(false); connectivityPane.setGraphic( HBoxBuilder.create().spacing(2).alignment(Pos.CENTER).styleClass("header").children( nErrors, new ImageView( new Image( "http://openiconlibrary.sourceforge.net/gallery2/open_icon_library-full/icons/png/48x48/actions/network-disconnect-2.png", 0, 24, true, true ) ), connectivityErrorLabel ).build() ); HBox layout = new HBox(10); layout.setStyle("-fx-padding: 10; -fx-background-color: cornsilk;"); layout.getChildren().addAll(adminPane, viewPane, connectivityPane); layout.setPrefHeight(150); layout.getStylesheets().add(this.getClass().getResource("titledpanecustomization.css").toExternalForm()); primaryStage.setScene(new Scene(layout)); primaryStage.show(); Node arrow = adminPane.lookup(".arrow"); arrow.setVisible(false); arrow.setManaged(false); // translate the titledpane arrow and header so that the arrow is displayed to right of the header. Pane connectivityArrow = (Pane) connectivityPane.lookup(".arrow"); connectivityArrow.translateXProperty().bind( connectivityPane.widthProperty().subtract(connectivityArrow.widthProperty().multiply(2)) ); Pane connectivityTitle = (Pane) connectivityPane.lookup(".header"); connectivityTitle.translateXProperty().bind( connectivityArrow.widthProperty().negate() ); } }
还有一些css可以用它：
/** titledpanecustomization.css place in same build directory as TitledPaneCustomization.java and ensure build system copies it to the output classpath. */ .admin .titled-pane > .title { -fx-background-color: blue, yellow, linear-gradient(to bottom, derive(coral, +50%), coral); } .connectivity { -fx-text-fill: white; } .nerrors { -fx-background-color: derive(-fx-focus-color, -15%); -fx-padding: 5 8 5 8; -fx-text-fill: white; } .connectivityErrorLabel { -fx-text-fill: white; -fx-padding: 0 40 0 3; } .connectivity .titled-pane > .title { -fx-background-color: -fx-box-border, -fx-inner-border, -fx-body-color; -fx-background-insets: 0, 1, 2; -fx-background-radius: 0 0 0 0, 0 0 0 0, 0 0 0 0; -fx-padding: 0.166667em 1.166667em 0.25em 0; /* 2 14 3 0 */ -fx-color: -fx-focus-color; } .connectivity .titled-pane > .title > .arrow-button .arrow { -fx-background-color: white; }
（移动回答问题）
这就是答案：
要删除箭头，请添加此CSS声明：
.titled-pane > .title > .arrow-button .arrow{ -fx-shape: ""; }
上面的CSS片段将删除箭头，但箭头的空间仍然被占用。 这真的很棘手，我无法在互联网上的任何地方找到它，但我应用了这个CSS声明，它从箭头中删除了差距。
.titled-pane > .title{ -fx-padding: 0 0 0 -4; }
这可能不是最好的解决方案，但它是一个满足我需求的解决方案。
这是你删除箭头的方法：
.titled-pane > .title > .arrow-button > .arrow{ -fx-shape: null; }