JavaFX: How to center an ImageView in a Pane - javafx

Question

JavaFX: How to center an ImageView in a Pane
Hi,
I am trying to center and resize an ImageView according to the current Window size.
If I am putting the ImageView into a Pane, I cannot Center it.
If I am putting it into a StackPane instead, resizing of the Image doesn't work.
Any idea, what I am doing wrong?
Google couldn't help me.
Extract of FXML with Pane
<HBox prefHeight="100.0" prefWidth="200.0" VBox.vgrow="ALWAYS">
<children>
<Button maxWidth="-Infinity" minWidth="-Infinity" mnemonicParsing="false" prefHeight="2000.0" prefWidth="100.0" text="Button" HBox.hgrow="ALWAYS" />
<Pane fx:id="paneMainImage" prefHeight="200.0" prefWidth="200.0" HBox.hgrow="ALWAYS">
<children>
<ImageView fx:id="imageMainImage" fitHeight="10.0" fitWidth="10.0" pickOnBounds="true" preserveRatio="true" />
</children>
<HBox.margin>
<Insets />
</HBox.margin>
</Pane>
<Button maxWidth="-Infinity" minWidth="-Infinity" mnemonicParsing="false" prefHeight="2000.0" prefWidth="100.0" text="Button" HBox.hgrow="ALWAYS" />
</children>
</HBox>
And here the Java code
public class FXMLDocumentController implements Initializable {
#FXML
Pane paneMainImage;
#FXML
ImageView imageMainImage;
#Override
public void initialize(URL url, ResourceBundle rb) {
Image i = new Image(getClass().getResource("resources/DSC_0168.JPG").toString());
paneMainImage.getWidth();
paneMainImage.getHeight();
imageMainImage.setImage(i);
imageMainImage.fitWidthProperty().bind(paneMainImage.widthProperty());
imageMainImage.fitHeightProperty().bind(paneMainImage.heightProperty());
}
}
Similar code with StackPane
<HBox prefHeight="100.0" prefWidth="200.0" VBox.vgrow="ALWAYS">
<children>
<Button maxWidth="-Infinity" minWidth="-Infinity" mnemonicParsing="false" prefHeight="2000.0" prefWidth="100.0" text="Button" HBox.hgrow="ALWAYS" />
<StackPane fx:id="paneMainImage" prefHeight="150.0" prefWidth="200.0" HBox.hgrow="ALWAYS">
<children>
<ImageView fx:id="imageMainImage" fitHeight="10.0" fitWidth="10.0" pickOnBounds="true" preserveRatio="true" />
</children>
</StackPane>
<Button maxWidth="-Infinity" minWidth="-Infinity" mnemonicParsing="false" prefHeight="2000.0" prefWidth="100.0" text="Button" HBox.hgrow="ALWAYS" />
</children>
</HBox>
Java
public class FXMLDocumentController implements Initializable {
#FXML
StackPane paneMainImage;
#FXML
ImageView imageMainImage;
#Override
public void initialize(URL url, ResourceBundle rb) {
Image i = new Image(getClass().getResource("resources/DSC_0168.JPG").toString());
paneMainImage.getWidth();
paneMainImage.getHeight();
imageMainImage.setImage(i);
imageMainImage.fitWidthProperty().bind(paneMainImage.widthProperty());
imageMainImage.fitHeightProperty().bind(paneMainImage.heightProperty());
}
}

Answer 1

There is a similar discussion on another post. Have you tried using any of the solutions discussed there (in order of complexity)?
Using a BorderPane as a parent of the image to center it Using the
setX and setY methods to explicitly set the location of the image