如何在 JavaFX 中的 TitledPane 中更改标题组件

本文介绍了如何在 JavaFX 中的 TitledPane 中更改标题组件的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我无法在互联网上的任何地方找到有关此问题的答案.

I cannot find an answer about this anywhere on the internet.

我有一个应用程序必须具有可折叠面板，因此 Java FX 中的 TitledPane 和 Accordion 设置是一个自然的选择.

I have an application that has to have collapsable panels, so the TitledPane and Accordion set-up in Java FX is a natural candidate.

在应用程序中，我需要在容器折叠时为其自定义标头.我在 TitledPane 的 css 文档中看到，标题实际上是一个 HBox 和各种其他组件.

In the application, I need to have custom headers for the container when it's collapsed. I see in the css document for the TitledPane that the header is really an HBox and a variety of other components.

http://docs.oracle.com/javafx/2/api/javafx/scene/doc-files/cssref.html#titledpane

我想访问此组件并将其替换为自定义组件.

I would like to access this component and replace it with a custom component.

我一直在使用 TitledPane api 的 setGraphic 函数和 setContentDisplay 到 GraphicOnly.带有自定义组件.但是，我无法正确渲染它.我在移除箭头和移除箭头所占据的空间时遇到了问题.

I have been using the TitledPane api's setGraphic function and setContentDisplay to GraphicOnly. with a custom component. However, I cannot get it to render correctly. I've had issues with removing the arrow, and removing the space occupied by the arrow.

有关所需外观及其实际外观的屏幕截图，请参阅下面的链接.

See the link below for screenshots of the desired look and how it actually looks.

http://tinypic.com/r/s1pxfn/6

如何去除箭头并去除填充?

How does one remove the arrow and remove the padding?

推荐答案

TitledPane 是一个 Labeled，因此您可以在侦听器或扩展属性.

TitledPane is a Labeled, so you can set a graphic on it in a listener or a binding to the expanded property.

更改背景颜色等(包括覆盖 :focused 伪类的样式)可以通过 css 完成(请参阅里海.css 样式表在 jfxrt.jar 中作为示例).

Changing background colors etc (including overriding styling of the :focused pseudo-class) is something that can be accomplished via css (refer to the TitledPane section of the caspian.css stylesheet in jfxrt.jar for examples).

如果您需要基于代码访问 TitledPane 的子组件，您可以使用 lookup 函数.

If you need code based access to sub-components of the TitledPane, you can use the lookup function after the TitledPane has been added to a Scene shown on a Stage.

adminPane.lookup(".arrow").setVisible(false);

我建议在尝试查找之前先尝试基于图形/css 样式表的方法.

I'd advise trying the graphic/css stylesheet based approaches before trying a lookup.

如果您不需要 Labeled 来显示文本，则将其设置为显示仅限图形.

If you don't need the Labeled to display text then set it display a graphic only.

titledPane.setContentDisplay(ContentDisplay.GRAPHIC_ONLY);

下面是一些示例代码，它在没有自定义标题的 TitledPane 旁边显示一个带有自定义标题的 TitledPane.

Here is some sample code which displays a TitledPane with a customized header next to a TitledPane without a customized header.

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;
}

这篇关于如何在 JavaFX 中的 TitledPane 中更改标题组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！