如何使我的StackPane占据窗口的整个垂直高度? [英] How can I make my StackPane take up the full vertical height of the window?

问题描述

我试图使位于我的主BorderPane的<left>元素中的StackPane占据窗口的整个垂直高度，即使调整了窗口的大小.我怎样才能做到这一点?这是到目前为止我得到的:

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>

推荐答案

堆栈窗格(以及ListView:因此，我不确定为什么需要将ListView包装在StackPane中))是填满边框窗格的整个高度.您可以看到此信息，例如通过更改边框窗格的背景颜色.问题在于边框窗格不会增长以填充周围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.

如果要让BorderPane填充剩余空间，请将其VBox.vgrow属性设置为ALWAYS:

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>

这篇关于如何使我的StackPane占据窗口的整个垂直高度?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！