MrSandman MrSandman - 11 months ago 82
Java Question

How to add two panes to titledpane header?

I want to add two panes to TitledPane header just like in the image where there is a green and blue box.

enter image description here

But when I try to do it like that, it only allows me to add one pane as ImageView when using scene builder.

Answer Source

Since your question is concerned about how to get this done in SceneBuilder, I will keep my answer restricted to it.

You can add a HBox as a Graphic to TitledPane and then add the required nodes in it.

<?import javafx.geometry.Insets?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.TitledPane?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.shape.Rectangle?>

<TitledPane animated="false" contentDisplay="GRAPHIC_ONLY" prefHeight="227.0" prefWidth="392.0" xmlns="" xmlns:fx="">
      <HBox alignment="CENTER_LEFT" prefHeight="18.0" prefWidth="605.0" spacing="10.0">
            <Rectangle arcHeight="5.0" arcWidth="5.0" fill="#1be440" height="15.0" stroke="BLACK" strokeType="INSIDE" width="13.0" />
            <Label maxWidth="1.7976931348623157E308" text="title" HBox.hgrow="ALWAYS" />
            <Rectangle arcHeight="5.0" arcWidth="5.0" fill="DODGERBLUE" height="15.0" stroke="BLACK" strokeType="INSIDE" width="13.0" />
            <Insets right="5.0" />

This will create a window like the following :

enter image description here

You will note that the arrow is still on the left of the HBox. To avoid this you can hide the default arrow and add an arrow in the HBox. Then add the default arrow styling to the new arrow you just added. For more information have a look at this post - How to change header component in TitledPane in JavaFX.