[JavaFX] Jak skalować okno w FXMLu aby przy każdym jego rozmiarze były zachowane te same proporcje?

Question

Witam. Uczę się programowa w javaFX i napotkałem pewien problem. Potrzebuję zrobić aby zależnie od rozdzielczości monitora okienko miało odpowiednią wielkość. Problem polega na tym, że mam w pliku FXML okienko i chciałbym aby wszystko się dobrze skalowało tzn. jeśli okienko się zmniejszy aby wszystkie proporcje były takie jak w oryginalnym rozmiarze. W załączniku daję zdjęcie okienka i jego kod. Z góry dzięki  za pomoc.

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.control.Button?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.PasswordField?>
<?import javafx.scene.control.Separator?>
<?import javafx.scene.control.TextField?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.text.Font?>


<AnchorPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="720.0" prefWidth="1280.0" style="-fx-background-color: #15171A#15171A;" xmlns="http://javafx.com/javafx/10.0.1" xmlns:fx="http://javafx.com/fxml/1" fx:controller="res.loginWindow.LoginController">
   <children>
      <AnchorPane layoutX="900.0" layoutY="190.0" style="-fx-background-color: #9F3325#9F3325;" AnchorPane.bottomAnchor="80.0" AnchorPane.leftAnchor="720.0" AnchorPane.rightAnchor="100.0" AnchorPane.topAnchor="80.0">
         <children>
            <Button fx:id="signInButton" layoutX="90.0" layoutY="337.0" mnemonicParsing="false" onMouseClicked="#signInButtonAction" prefHeight="31.0" prefWidth="261.0" style="-fx-background-color: #F26350;" text="Sign In" textFill="#f2f2f2">
               <font>
                  <Font size="15.0" />
               </font>
            </Button>
            <Label layoutX="195.0" layoutY="40.0" prefHeight="49.0" prefWidth="71.0" text="Sign In" textAlignment="CENTER" textFill="#f2f2f2">
               <font>
                  <Font size="20.0" />
               </font>
            </Label>
            <Label layoutX="26.0" layoutY="108.0" prefHeight="31.0" prefWidth="45.0" text="Login" textFill="#f2f2f2">
               <font>
                  <Font size="15.0" />
               </font>
            </Label>
            <Label layoutX="26.0" layoutY="228.0" prefHeight="31.0" prefWidth="71.0" text="Password" textFill="#f2f2f2">
               <font>
                  <Font size="15.0" />
               </font>
            </Label>
            <TextField fx:id="loginTextField" layoutX="26.0" layoutY="138.0" maxHeight="-Infinity" maxWidth="-Infinity" prefHeight="29.0" prefWidth="394.0" style="-fx-background-color: #9F3325#9F3325;">
               <font>
                  <Font size="14.0" />
               </font>
            </TextField>
            <Separator layoutX="31.0" layoutY="288.0" prefHeight="0.0" prefWidth="394.0" />
            <Separator layoutX="31.0" layoutY="168.0" prefHeight="0.0" prefWidth="394.0" />
            <PasswordField fx:id="passwordTextField" layoutX="26.0" layoutY="258.0" prefHeight="29.0" prefWidth="394.0" style="-fx-background-color: #9F3325#9F3325;" />
            <Label layoutX="172.0" layoutY="529.0" prefHeight="17.0" prefWidth="112.0" text="Forgot Password?" textFill="WHITE" underline="true" />
         </children>
      </AnchorPane>
   </children>
</AnchorPane>

Answer 1

<?xml version="1.0" encoding="UTF-8"?>


<?import javafx.geometry.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.text.*?>
<VBox alignment="CENTER" fillWidth="false" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity"
      minWidth="-Infinity" style="-fx-background-color: #000000;" xmlns="http://javafx.com/javafx/8.0.111"
      xmlns:fx="http://javafx.com/fxml/1">
    <children>
        <VBox alignment="TOP_CENTER" maxHeight="-Infinity" spacing="10.0" style="-fx-background-color: #9F3325#9F3325;"
              VBox.vgrow="ALWAYS">
            <children>
                <Label text="Sign In" textAlignment="CENTER" textFill="#f2f2f2" VBox.vgrow="ALWAYS">
                    <font>
                        <Font size="20.0"/>
                    </font>
                </Label>
                <VBox alignment="TOP_CENTER" fillWidth="false" spacing="20.0" VBox.vgrow="ALWAYS">
                    <children>
                        <VBox alignment="CENTER_LEFT" VBox.vgrow="ALWAYS">
                            <children>
                                <Label prefHeight="31.0" prefWidth="45.0" text="Login" textFill="#f2f2f2"
                                       VBox.vgrow="ALWAYS">
                                    <font>
                                        <Font size="15.0"/>
                                    </font>
                                </Label>
                                <TextField fx:id="loginTextField" style="-fx-background-color: #9F3325#9F3325;"
                                           VBox.vgrow="NEVER">
                                    <font>
                                        <Font size="14.0"/>
                                    </font>
                                    <VBox.margin>
                                        <Insets left="10.0"/>
                                    </VBox.margin>
                                </TextField>
                                <Separator prefHeight="0.0" prefWidth="394.0">
                                    <VBox.margin>
                                        <Insets left="10.0"/>
                                    </VBox.margin>
                                </Separator>
                            </children>
                        </VBox>
                        <VBox alignment="CENTER_LEFT" VBox.vgrow="ALWAYS">
                            <children>
                                <Label prefHeight="31.0" prefWidth="71.0" text="Password" textFill="#f2f2f2"
                                       VBox.vgrow="ALWAYS">
                                    <font>
                                        <Font size="15.0"/>
                                    </font>
                                </Label>
                                <PasswordField fx:id="passwordTextField" style="-fx-background-color: #9F3325#9F3325;"
                                               VBox.vgrow="NEVER">
                                    <VBox.margin>
                                        <Insets left="10.0"/>
                                    </VBox.margin>
                                </PasswordField>
                                <Separator prefHeight="0.0" prefWidth="394.0" VBox.vgrow="NEVER">
                                    <VBox.margin>
                                        <Insets left="10.0"/>
                                    </VBox.margin>
                                </Separator>
                            </children>
                            <VBox.margin>
                                <Insets bottom="20.0"/>
                            </VBox.margin>
                        </VBox>
                    </children>
                </VBox>
                <Button fx:id="signInButton" maxWidth="261.0" minWidth="50.0" mnemonicParsing="false"
                        onMouseClicked="#signInButtonAction" prefWidth="261.0" style="-fx-background-color: #F26350;"
                        text="Sign In" textFill="#f2f2f2" VBox.vgrow="ALWAYS">
                    <font>
                        <Font size="15.0"/>
                    </font>
                    <VBox.margin>
                        <Insets/>
                    </VBox.margin>
                </Button>
                <Label text="Forgot Password?" textFill="WHITE" underline="true" VBox.vgrow="ALWAYS">
                    <VBox.margin>
                        <Insets bottom="10.0" top="100.0"/>
                    </VBox.margin>
                </Label>
            </children>
            <padding>
                <Insets left="10.0" right="10.0" top="20.0"/>
            </padding>
        </VBox>
    </children>
</VBox>

Trochę też zależy co chcesz dokładnie osiągnąć, w powyższym przykładzie jest tak, że całość przy powiększaniu nie zmienia rozmiaru - nie rozjeżdża się. Natomiast, przy zmniejszaniu wszystko się zmniejsza. I też nie jestem jakimś mistrzem w tworzeniu layoutów w JavaFX więc na 100% da się to zrobić lepiej.

Jak coś to pobaw się jeszcze kontenerem GridPane i zobacz też do czego dokładniej służy AnchornPane - bo z nim też można się zabawić w takie coś: https://www.youtube.com/watch?v=dgScLKk1txE