水平JavaFX TitledPane

Question

我想知道JavaFX是否包含了一种使手风琴或标题窗格水平的方法。我找不到任何东西，但我想我应该问。从本质上讲，最终目标是拥有一个可以展开以显示树视图的侧边栏。以下是我的意图：

Collapsed

Expanded

Answer 1

JavaFX 2.2中没有标准的水平方向TitledPane。

您可以在JavaFX issue tracker中为其中一个创建功能请求。

实现自己的水平TitledPane非常简单。

这是demo of a similar thing只是在标准窗格上使用动画。

所涉及技术的进一步解释见Sai的博客文章：Sliding in JavaFX (It’s all about clipping)。

/** Animates a node on and off screen to the left. */
class SideBar extends VBox {
  /** @return a control button to hide and show the sidebar */
  public Button getControlButton() { return controlButton; }
  private final Button controlButton;

  /** creates a sidebar containing a vertical alignment of the given nodes */
  SideBar(final double expandedWidth, Node... nodes) {
    getStyleClass().add("sidebar");
    this.setPrefWidth(expandedWidth);

    // create a bar to hide and show.
    setAlignment(Pos.CENTER);
    getChildren().addAll(nodes);

    // create a button to hide and show the sidebar.
    controlButton = new Button("Collapse");
    controlButton.getStyleClass().add("hide-left");

    // apply the animations when the button is pressed.
    controlButton.setOnAction(new EventHandler<ActionEvent>() {
      @Override public void handle(ActionEvent actionEvent) {
        // create an animation to hide sidebar.
        final Animation hideSidebar = new Transition() {
          { setCycleDuration(Duration.millis(250)); }
          protected void interpolate(double frac) {
            final double curWidth = expandedWidth * (1.0 - frac);
            setPrefWidth(curWidth);
            setTranslateX(-expandedWidth + curWidth);
          }
        };
        hideSidebar.onFinishedProperty().set(new EventHandler<ActionEvent>() {
          @Override public void handle(ActionEvent actionEvent) {
            setVisible(false);
            controlButton.setText("Show");
            controlButton.getStyleClass().remove("hide-left");
            controlButton.getStyleClass().add("show-right");
          }
        });

        // create an animation to show a sidebar.
        final Animation showSidebar = new Transition() {
          { setCycleDuration(Duration.millis(250)); }
          protected void interpolate(double frac) {
            final double curWidth = expandedWidth * frac;
            setPrefWidth(curWidth);
            setTranslateX(-expandedWidth + curWidth);
          }
        };
        showSidebar.onFinishedProperty().set(new EventHandler<ActionEvent>() {
          @Override public void handle(ActionEvent actionEvent) {
            controlButton.setText("Collapse");
            controlButton.getStyleClass().add("hide-left");
            controlButton.getStyleClass().remove("show-right");
          }
        });

        if (showSidebar.statusProperty().get() == Animation.Status.STOPPED && hideSidebar.statusProperty().get() == Animation.Status.STOPPED) {
          if (isVisible()) {
            hideSidebar.play();
          } else {
            setVisible(true);
            showSidebar.play();
          }
        }
      }
    });
  }
}

Answer 2

你去吧：

@Override
public void start(Stage stage) throws Exception {       

    Label label1 = new Label("label 1");
    label1.setRotate(90);

    TitledPane pane1 = new TitledPane("titled pane 1", label1);
    pane1.setAlignment(Pos.CENTER);

    Label label2 = new Label("label 2");
    label2.setRotate(90);

    TitledPane pane2 = new TitledPane("titled pane 2", label2);
    pane2.setAlignment(Pos.CENTER);

    Accordion accordion = new Accordion();
    accordion.setRotate(270);
    accordion.getPanes().add(pane1);
    accordion.getPanes().add(pane2);

    HBox mainPane = new HBox(accordion);
    accordion.prefWidthProperty().bind(mainPane.heightProperty());
    accordion.prefHeightProperty().bind(mainPane.widthProperty());

    stage.setTitle("Horizontal Accordion");
    stage.setScene(new Scene(mainPane, 800, 600));
    stage.show();
}

Answer 3

也许JavaFx不提供水平TitledPane，但你可以做的是将你的TitledPane旋转到90度，并将要设置在其内容中的节点旋转到270度，然后就完成了。

以下是您的代码示例。

TitledPane titledPane = new TitledPane();

BorderPane borderPane = new BorderPane();
borderPane.setCenter(new Label("My Label")); //Or your tree view

borderPane.setRotate(270);

titledPane .setContent(borderPane);

Answer 4

只需在手风琴和完成后添加以下一行。

 accordion.setRotate(270);