How can I make my StackPane take up the full vertical height of the window?

问题

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>

回答1:

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>

回答2:

Bind the corresponding values. If you want to have a child always fill the size of its parent, then you can bind the prefHeightProperty of the child to the heightProperty of its parent. That is possible in java code like

child.prefHeightProperty().bind(parent.heightProperty);

or in fxml like

<ListView fx:id="listView" prefHeight="${listView.parent.width}"/>

Check out Oracle's description about bindings…

回答3:

It sounds like you want to restructure your layout like so, but I think you may need to clarify exactly what you're after.

<BorderPane xmlns:fx="http://javafx.com/fxml">
    <left>
        <StackPane> ... </StackPane>
    </left>
    <right>
        <StackPane> ... </StackPane>
    </right>
    <top>
        <VBox>
            <ToolBar> ... </ToolBar>
            <MenuBar> ... </MenuBar>
        <VBox>
    </top>
</BorderPane>

来源：https://stackoverflow.com/questions/45592980/how-can-i-make-my-stackpane-take-up-the-full-vertical-height-of-the-window

标签

java

javafx

fxml

borderpane