I'm trying to make the StackPane located in the <left>
element of my main BorderPane take up the full vertical height of the window, even when its resized. How can I do this? This is what I've got so far:
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.control.ListView?>
<?import javafx.scene.control.MenuBar?>
<?import javafx.scene.control.ScrollPane?>
<?import javafx.scene.control.ToolBar?>
<?import javafx.scene.Group?>
<?import javafx.scene.image.Image?>
<?import javafx.scene.image.ImageView?>
<?import javafx.scene.layout.*?>
<VBox prefWidth="800.0" prefHeight="600.0" xmlns="http://javafx.com/javafx/8.0.112" xmlns:fx="http://javafx.com/fxml/1">
<VBox alignment="TOP_CENTER">
<ToolBar minHeight="50.0" prefHeight="50.0" prefWidth="800.0" stylesheets="@style.css" GridPane.rowIndex="1">
<ImageView fitHeight="35.0" fitWidth="200.0" pickOnBounds="true" preserveRatio="true">
<Image url="@react-toolbar-logo.png"/>
</ImageView>
</ToolBar>
<MenuBar fx:id="menuBar" prefHeight="0.0" prefWidth="0.0"/>
</VBox>
<BorderPane xmlns:fx="http://javafx.com/fxml">
<left>
<StackPane prefWidth="230">
<ListView fx:id="listView"/>
</StackPane>
</left>
<right>
<StackPane>
<ScrollPane>
<Group fx:id="selectionGroup">
<ImageView fx:id="mainImageView"/>
</Group>
</ScrollPane>
</StackPane>
</right>
</BorderPane>
</VBox>
The stack pane (and consequently the ListView
: I'm not sure why you need to wrap the ListView
in a StackPane
) already is filling the full height of the border pane. You can see this, e.g. by changing the background color of the border pane. The issue is that the border pane is not growing to fill all the available space in the surrounding VBox
.
If you want to let the BorderPane
fill the remaining space, set its VBox.vgrow
property to ALWAYS
:
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.control.ListView?>
<?import javafx.scene.control.MenuBar?>
<?import javafx.scene.control.ScrollPane?>
<?import javafx.scene.control.ToolBar?>
<?import javafx.scene.Group?>
<?import javafx.scene.image.Image?>
<?import javafx.scene.image.ImageView?>
<?import javafx.scene.layout.*?>
<?import java.lang.Double?>
<VBox prefWidth="800.0" prefHeight="600.0" xmlns="http://javafx.com/javafx/8.0.112" xmlns:fx="http://javafx.com/fxml/1">
<VBox alignment="TOP_CENTER">
<ToolBar minHeight="50.0" prefHeight="50.0" prefWidth="800.0" GridPane.rowIndex="1">
<ImageView fitHeight="35.0" fitWidth="200.0" pickOnBounds="true" preserveRatio="true">
<Image url="@react-toolbar-logo.png"/>
</ImageView>
</ToolBar>
<MenuBar fx:id="menuBar" prefHeight="0.0" prefWidth="0.0"/>
</VBox>
<BorderPane VBox.vgrow="ALWAYS">
<left>
<StackPane prefWidth="230">
<ListView fx:id="listView" />
</StackPane>
</left>
<right>
<StackPane>
<ScrollPane>
<Group fx:id="selectionGroup">
<ImageView fx:id="mainImageView"/>
</Group>
</ScrollPane>
</StackPane>
</right>
</BorderPane>
</VBox>