CODEWITHSUNDEEP
javafximageviewpane
JustMe
JustMe

Reputation: 455

JavaFX: How to center an ImageView in a Pane

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());
}
}

enter image description here

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());
}
}

enter image description here

Upvotes: 1

Views: 7112

Answers (1)

rochy_01
rochy_01

Reputation: 161

There is a similar discussion on another post. Have you tried using any of the solutions discussed there (in order of complexity)?

  1. Using a BorderPane as a parent of the image to center it Using the

  2. setX and setY methods to explicitly set the location of the image

Upvotes: 1

Related Questions