Search code examples
javajavafxvbox

JavaFX: move element on window (stage) resize


I have a simple application on JavaFX, it's actually consist of several panes and buttons. I can't figure out how to make a button move when the stage resize. So, I want the left bottom button will always be visible even when resize the window. enter image description here

here is nodes overview:

enter image description here

here is fxml:

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

<?import com.jfoenix.controls.JFXButton?>
<?import de.jensd.fx.glyphs.fontawesome.FontAwesomeIconView?>
<?import javafx.geometry.Insets?>
<?import javafx.geometry.Point3D?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.layout.BorderPane?>
<?import javafx.scene.layout.VBox?>


<AnchorPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="750.0" prefWidth="1000.0" xmlns="http://javafx.com/javafx/9.0.4" xmlns:fx="http://javafx.com/fxml/1">
   <children>
      <BorderPane layoutX="89.0" layoutY="64.0" prefHeight="400.0" prefWidth="600.0" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
         <left>
            <AnchorPane prefHeight="150.0" prefWidth="150.0" style="-fx-background-color: #4059a9 #4059a9;" BorderPane.alignment="CENTER">
               <children>
                  <AnchorPane prefHeight="750.0" prefWidth="75.0" style="-fx-background-color: #2b4496 #2b4496;" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="75.0" AnchorPane.topAnchor="0.0">
                     <children>
                        <VBox alignment="CENTER" prefHeight="750.0" prefWidth="75.0" spacing="35.0" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
                           <children>
                              <JFXButton contentDisplay="GRAPHIC_ONLY" prefWidth="82.0" VBox.vgrow="ALWAYS">
                                 <graphic>
                                    <FontAwesomeIconView fill="WHITE" glyphName="HOME" size="2em" />
                                 </graphic>
                                 <VBox.margin>
                                    <Insets top="25.0" />
                                 </VBox.margin>
                              </JFXButton>
                              <JFXButton contentDisplay="GRAPHIC_ONLY" prefWidth="75.0">
                                 <VBox.margin>
                                    <Insets bottom="10.0" top="600.0" />
                                 </VBox.margin>
                                 <graphic>
                                    <FontAwesomeIconView fill="WHITE" glyphName="SIGN_OUT" size="2em" />
                                 </graphic>
                                 <opaqueInsets>
                                    <Insets />
                                 </opaqueInsets>
                              </JFXButton>
                           </children>
                        </VBox>
                     </children>
                     <rotationAxis>
                        <Point3D />
                     </rotationAxis>
                  </AnchorPane>
               </children>
            </AnchorPane>
         </left>
      </BorderPane>
   </children>
</AnchorPane>


Solution

  • Looks like you could achieve the same effect by using a BorderPane and a VBox with overlayed background fills and a Region that always grows inserted between your buttons:

    <?xml version="1.0" encoding="UTF-8"?>
    
    <?import com.jfoenix.controls.JFXButton?>
    <?import de.jensd.fx.glyphs.fontawesome.FontAwesomeIconView?>
    <?import javafx.geometry.Insets?>
    <?import javafx.scene.layout.AnchorPane?>
    <?import javafx.scene.layout.BorderPane?>
    <?import javafx.scene.layout.VBox?>
    <?import javafx.scene.layout.Region?>
    
    <BorderPane prefHeight="750.0" prefWidth="1000.0"
        xmlns="http://javafx.com/javafx/9.0.4"
        xmlns:fx="http://javafx.com/fxml/1">
        <left>
            <VBox alignment="TOP_LEFT"
                spacing="35.0"
                style="-fx-background-color: #2b4496, #4059a9; -fx-background-insets: 0, 0 0 0 75;"> <!-- overlay 2 backgrounds produce rectangles -->
                <padding>
                    <Insets right="75.0" />
                </padding>
                <children>
                    <JFXButton contentDisplay="GRAPHIC_ONLY" prefWidth="82.0"  VBox.vgrow="NEVER">
                        <graphic>
                            <FontAwesomeIconView fill="WHITE" glyphName="HOME" size="2em" />
                         </graphic>
                         <VBox.margin>
                            <Insets top="25.0" />
                         </VBox.margin>
                      </JFXButton>
                      <Region VBox.vgrow="ALWAYS" /> <!-- filler -->
                      <JFXButton contentDisplay="GRAPHIC_ONLY" prefWidth="75.0" VBox.vgrow="NEVER">
                         <VBox.margin>
                            <Insets bottom="10.0" />
                         </VBox.margin>
                         <graphic>
                            <FontAwesomeIconView fill="WHITE" glyphName="SIGN_OUT" size="2em" />
                         </graphic>
                     </JFXButton>
                </children>
            </VBox>
        </left>
    </BorderPane>