Accordéon JavaFX avec plusieurs volets ouverts

J'ai eu des exigences légèrement différentes

1. L'accordéon soit se dilate ou se gère l'affichage de l'espace pour l'embarqué vues
2. La vue d'ensemble peut être mis dans un défilement de vue
3. Chaque boîte entièrement étend à la taille de l'ensemble de la vue, si l'accordéon est de taille fixe, ou il s'étend à la taille du contenu, si elle n'est pas vue fixe.

Bien que dans mon cas, je n'étais pas en mesure de répondre à tous les 3. et le test 2., J'ai été en mesure de venir avec le correctif suivant:

1) l'Utilisation d'un composant ScrollPane, avec une VBox à l'intérieur, avec TitledWindows à l'intérieur.
2) assurez-vous que votre TitledPanes sont mis à VBox.grandir="PARFOIS" .
3) Ajouter une VBox comme le dernier élément et réglez VBox.vgrow="TOUJOURS" - ce qui pousse le TitledPanes jusqu'à leur taille minimale. Tout le monde a fourni des exemples de Code, si vous souhaitez utiliser le fxml, ou ne voulez pas utiliser de Java, en utilisant seulement les éléments directement fonctionne tout aussi bien (généré avec SceneBuilder):

<ScrollPane fitToHeight="true" fitToWidth="true" prefHeight="200.0" prefWidth="200.0" BorderPane.alignment="CENTER">
     <content>
        <VBox fx:id="leftVBox" maxHeight="1.7976931348623157E308" prefHeight="200.0" prefWidth="100.0">
           <children>
              <TitledPane fx:id="titledPanelOne" animated="false" expanded="false" style="-fx-background-color: red;" text="Pane One" VBox.vgrow="SOMETIMES">
                 <content>
                    <ListView fx:id="listViewOne" maxHeight="1.7976931348623157E308" prefHeight="200.0" prefWidth="200.0" />
                 </content>
              </TitledPane>
              <TitledPane fx:id="titledPanelTwo" animated="false" expanded="false" style="-fx-background-color: green;" text="Pane Two" VBox.vgrow="SOMETIMES">
                 <content>
                    <ListView fx:id="listViewTwo" maxHeight="1.7976931348623157E308" prefHeight="200.0" prefWidth="200.0" />
                 </content>
              </TitledPane>
              <VBox prefHeight="0.0" prefWidth="0.0" VBox.vgrow="ALWAYS" />
           </children>
        </VBox>
     </content>
 </ScrollPane>

4) Bien que cela ne vous obtenir des boîtes empilées qui agrandir/réduire de façon indépendante l'un de l'autre, cela ne résout pas le problème où vous avez des boîtes qui ne sont pas redimensionner correctement à leur contenu (par exemple si vous avez une Liste intégrés comme dans l'exemple ci-dessus), et vous avez donc maintenant pour faire défiler un peu quand il y a abondance de l'écran de l'immobilier à gauche. La solution? Un peu de Java est nécessaire.

Pour appliquer ce correctif, nous avons d'abord lier la TitledPane de maxHeightProperty() à l'extérieur VBox est heightProperty():

public class Controller implements Initializable {
  //... controller code
  @Override
  public void initialize(URL location, ResourceBundle resources) {
    //...
    variablesViewPane.maxHeightProperty().bind(leftVBox.heightProperty());
    historyViewPane.maxHeightProperty().bind(leftVBox.heightProperty());
  }
}

L'on attribue à chaque volet du expandedProperty()et dynamique de lier et de délier la prefHeighProperty():

private static void bindExpanded(TitledPane pane, ReadOnlyDoubleProperty prop) {
  pane.expandedProperty().addListener((observable, oldValue, newValue) -> {
    if(newValue) {
      pane.prefHeightProperty().bind(prop);
    } else {
      pane.prefHeightProperty().unbind();
      pane.prefHeightProperty().set(0);
    }
  });

}

Si on nous montre, nous demandons à être aussi grand que la VBox, si nous ne sommes pas, nous demandons à être aussi petite que possible. L'avantage de faire les choses de cette manière, c'est que la mise en page alors automatiquement calculé la hauteur disponible sur la base du nombre de actuellement affichée à l'TitledPanes - ce qui conduit à exactement le comportement que nous voulons.

Je aller plus dans les détails ici:

http://sebastianaudet.com/blog/playing-with-javafx/