JavaFx, FXML, how to auto resize content: Button, StackPane, Field, Scrollpane according to their parents
Question
I am trying to design a Java application using Fxml (SceneBuilder), the problem I am facing right now is that, I am not able to auto resize contents, ScrollPane according to GridPane (1,2) row 1, StackPane according to GridPane row 2 and Button and Textfield according to pane. Is there any property which can help me or any alternative solution?
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.ScrollPane?>
<?import javafx.scene.control.TableColumn?>
<?import javafx.scene.control.TableView?>
<?import javafx.scene.control.TextField?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.layout.ColumnConstraints?>
<?import javafx.scene.layout.GridPane?>
<?import javafx.scene.layout.Pane?>
<?import javafx.scene.layout.RowConstraints?>
<?import javafx.scene.layout.StackPane?>
<AnchorPane id="ClientItemMainAnchorPane" fx:id="ClientItem_anchorPane1" prefHeight="600.0" prefWidth="800.0" xmlns="http://javafx.com/javafx/8.0.60" xmlns:fx="http://javafx.com/fxml/1">
<children>
<StackPane fx:id="ClientItem_stackPane1" prefHeight="600.0" prefWidth="800.0" AnchorPane.topAnchor="0.0" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0">
<children>
<GridPane fx:id="ClientItem_gridPane" >
<columnConstraints>
<ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
</columnConstraints>
<rowConstraints>
<RowConstraints maxHeight="517.0" minHeight="10.0" prefHeight="435.0" vgrow="SOMETIMES" />
<RowConstraints maxHeight="294.0" minHeight="10.0" prefHeight="165.0" vgrow="SOMETIMES" />
</rowConstraints>
<children>
<ScrollPane fx:id="ClientItem_scrollPane" prefHeight="417.0" prefWidth="800.0">
<content>
<AnchorPane fx:id="ClientItem_AnchorPane2" prefHeight="396.0" prefWidth="736.0">
<children>
<TableView fx:id="ClientItem_tableView" layoutX="14.0" layoutY="14.0" prefHeight="382.0" prefWidth="768.0">
<columns>
<TableColumn fx:id="ClientItem_tableCol_ClientNo" prefWidth="66.0" text="Client No." />
<TableColumn fx:id="ClientItem_tableCol_Name" prefWidth="188.0" text="Name" />
<TableColumn fx:id="ClientItem_tableCol_Address" minWidth="0.0" prefWidth="220.0" text="Address" />
<TableColumn fx:id="ClientItem_tableCol_Phone" minWidth="0.0" prefWidth="108.0" text="Phone" />
<TableColumn fx:id="ClientItem_tableCol_Remaing" minWidth="0.0" prefWidth="95.0" text="Remaining" />
<TableColumn fx:id="ClientItem_tableCol_Type" prefWidth="87.0" text="Type" />
</columns>
</TableView>
</children>
</AnchorPane>
</content>
</ScrollPane>
<StackPane fx:id="ClientItem_StackPane2" prefHeight="150.0" prefWidth="200.0" GridPane.rowIndex="1">
<children>
<Pane fx:id="ClientItem_Pane" prefHeight="200.0" prefWidth="200.0">
<children>
<TextField fx:id="ClientItem_textField_ClientNo" layoutX="14.0" layoutY="42.0" prefHeight="25.0" prefWidth="69.0" />
<TextField fx:id="ClientItem_textField_Name" layoutX="80.0" layoutY="42.0" prefHeight="25.0" prefWidth="188.0" />
<TextField fx:id="ClientItem_textField_Remaining" layoutX="596.0" layoutY="42.0" prefHeight="25.0" prefWidth="95.0" />
<TextField fx:id="ClientItem_textField_Type" layoutX="691.0" layoutY="42.0" prefHeight="25.0" prefWidth="87.0" />
<TextField fx:id="ClientItem_textField_Address" layoutX="268.0" layoutY="42.0" prefHeight="25.0" prefWidth="220.0" />
<TextField fx:id="ClientItem_textField_Phone" layoutX="488.0" layoutY="42.0" prefHeight="25.0" prefWidth="108.0" />
<Label alignment="CENTER" layoutX="22.0" layoutY="14.0" text="Client No." />
<Label alignment="CENTER" contentDisplay="TOP" layoutX="158.0" layoutY="14.0" text="Name" />
<Label alignment="CENTER" layoutX="357.0" layoutY="14.0" text="Address" />
<Label alignment="CENTER" layoutX="525.0" layoutY="14.0" text="Phone" />
<Label alignment="CENTER" layoutX="615.0" layoutY="14.0" text="Remaining" />
<Label alignment="CENTER" layoutX="722.0" layoutY="14.0" text="Type" />
<Button fx:id="ClientItem_btn_Add" layoutX="307.0" layoutY="84.0" mnemonicParsing="false" prefHeight="50.0" prefWidth="100.0" text="Add" />
<Button fx:id="ClientItem_btn_Delete" layoutX="425.0" layoutY="84.0" mnemonicParsing="false" prefHeight="50.0" prefWidth="100.0" text="Delete" />
</children>
</Pane>
</children>
</StackPane>
</children>
</GridPane>
</children>
</StackPane>
</children>
</AnchorPane>
1 answers
solution1
1 ACCPTED 2016-11-01 15:17:55
I'm not sure if you're intentionally wrapping your content into multiple panes, but it is unnecessary. Panes will not autoresize its content and AnchorPanes will only resize content if you call AnchorPane.setTopAnchor(Node) , AnchorPane.setRightAnchor(Node) , AnchorPane.setBottomAnchor(Node) , or AnchorPane.setLeftAnchor(Node) .
First, the GridPane. You can set the VGrow and HGrow properties of the RowConstraints and ColumnConstraints , respectively, to resize the content in relation to the GridPane's size. Setting the percentHeight and percentWidth of the RowConstraints and ColumnConstraints will also aid in keeping the rows and columns at their preferred proportions.
On the ScrollPane, set the fitToWidth and fitToHeight properties to keep its children resized to match the size of the ScrollPane.
For your input area, an HBox would be much better suited than a Pane so that you can more easily resize the textfields and buttons. Setting each Label's graphic to its corresponding textfield will also help keep the two together.
Here is your fxml code cleaned up to give you a better idea.
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.geometry.Insets?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<GridPane fx:id="ClientItem_gridPane" prefHeight="600.0" prefWidth="800.0" xmlns="http://javafx.com/javafx/8.0.65"
xmlns:fx="http://javafx.com/fxml/1">
<columnConstraints>
<ColumnConstraints hgrow="ALWAYS" minWidth="10.0" prefWidth="100.0" />
</columnConstraints>
<rowConstraints>
<RowConstraints maxHeight="1.7976931348623157E308" minHeight="10.0" percentHeight="73.0" prefHeight="435.0"
vgrow="ALWAYS" />
<RowConstraints fillHeight="false" maxHeight="1.7976931348623157E308" minHeight="10.0" percentHeight="10.0"
prefHeight="65.0" />
<RowConstraints fillHeight="false" maxHeight="1.7976931348623157E308" minHeight="10.0" percentHeight="17.0"
prefHeight="100.0" />
</rowConstraints>
<children>
<ScrollPane fx:id="ClientItem_scrollPane" fitToHeight="true" fitToWidth="true" prefHeight="417.0"
prefWidth="800.0" GridPane.halignment="CENTER" GridPane.hgrow="ALWAYS" GridPane.valignment="CENTER"
GridPane.vgrow="ALWAYS">
<content>
<TableView fx:id="ClientItem_tableView" prefHeight="409.0" prefWidth="778.0">
<columns>
<TableColumn fx:id="ClientItem_tableCol_ClientNo" prefWidth="103.0" text="Client No." />
<TableColumn fx:id="ClientItem_tableCol_Name" prefWidth="151.0" text="Name" />
<TableColumn fx:id="ClientItem_tableCol_Address" minWidth="0.0" prefWidth="220.0"
text="Address" />
<TableColumn fx:id="ClientItem_tableCol_Phone" minWidth="0.0" prefWidth="108.0" text="Phone" />
<TableColumn fx:id="ClientItem_tableCol_Remaing" minWidth="0.0" prefWidth="95.0"
text="Remaining" />
<TableColumn fx:id="ClientItem_tableCol_Type" prefWidth="102.0" text="Type" />
</columns>
</TableView>
</content>
<padding>
<Insets bottom="10.0" left="10.0" right="10.0" top="10.0" />
</padding>
</ScrollPane>
<HBox alignment="CENTER" prefHeight="77.0" prefWidth="800.0" GridPane.hgrow="ALWAYS" GridPane.rowIndex="1"
GridPane.vgrow="ALWAYS">
<children>
<Label alignment="CENTER" contentDisplay="BOTTOM" text="Client No.">
<graphic>
<TextField fx:id="ClientItem_textField_ClientNo" prefHeight="25.0" prefWidth="69.0" />
</graphic>
</Label>
<Label alignment="CENTER" contentDisplay="BOTTOM" text="Name">
<graphic>
<TextField fx:id="ClientItem_textField_Name" prefHeight="25.0" prefWidth="188.0" />
</graphic>
</Label>
<Label alignment="CENTER" contentDisplay="BOTTOM" text="Address">
<graphic>
<TextField fx:id="ClientItem_textField_Address" prefHeight="25.0" prefWidth="220.0" />
</graphic>
</Label>
<Label alignment="CENTER" contentDisplay="BOTTOM" text="Phone">
<graphic>
<TextField fx:id="ClientItem_textField_Phone" prefHeight="25.0" prefWidth="108.0" />
</graphic>
</Label>
<Label alignment="CENTER" contentDisplay="BOTTOM" text="Remaining">
<graphic>
<TextField fx:id="ClientItem_textField_Remaining" prefHeight="25.0" prefWidth="95.0" />
</graphic>
</Label>
<Label alignment="CENTER" contentDisplay="BOTTOM" text="Type">
<graphic>
<TextField fx:id="ClientItem_textField_Type" prefHeight="25.0" prefWidth="87.0" />
</graphic>
</Label>
</children>
<padding>
<Insets bottom="10.0" left="10.0" right="10.0" top="10.0" />
</padding>
</HBox>
<HBox alignment="CENTER" prefHeight="100.0" prefWidth="200.0" spacing="20.0" GridPane.hgrow="ALWAYS"
GridPane.rowIndex="2" GridPane.vgrow="ALWAYS">
<children>
<Button fx:id="ClientItem_btn_Add" mnemonicParsing="false" prefHeight="50.0" prefWidth="100.0"
text="Add" />
<Button fx:id="ClientItem_btn_Delete" mnemonicParsing="false" prefHeight="50.0" prefWidth="100.0"
text="Delete" />
</children>
<padding>
<Insets bottom="10.0" left="10.0" right="10.0" top="10.0" />
</padding>
</HBox>
</children>
</GridPane>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Resize content with window in FXML (JavaFX)
JavaFX resize button in HBox FXML
resize stackpane in javafx with css
javafx.fxml.LoadException: StackPane is not a valid type
How to make JavaFX ScrollPane keep scrolling if a button inside ScrollPane is dragged?
JavaFX resize canvas in fxml
JavaFX FXML: Expand ScrollPane to Fit height of its Content Pane Until it reahces its MaxHeight property
Javafx load a new fxml file into a scrollpane
JavaFX, how to prevent Label text resize during ScrollPane focus?
(JavaFX)(FXML) Does anyone know how I can make the background of a ScrollPane completely transparent?
Related Tags