水平JavaFX標題欄

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

也許了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 3

只需添加下面一行到手風琴和你做。

accordion.setRotate(270); 

Answer 4

你去：

@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(); 
}