How do you make an Imageview to resize itself when

Question

I have a GridPane with an arbitrary number of rows and columns, and fill each cell with an ImageView.

Now, this GridPane is contained in an AnchorPane, so when the Window gets resized the GridPane grows or shrinks fine, but the ImageViews does not change its size.

What do I have to do to make the ImageView take the size of its cell in the GridPane?

Answer 1

I'm a beginner to JavaFX and I had a similar problem. I had an AnchorPane which contained a BorderPane. The center of the BorderPane contained a GridPane (gridPaneMaze). This gridPaneMaze used an array ImageView[7][7] images to fill each cell of my gridpane with a square .png file.

I wanted my images to change with the height of the window. Because I used squares, the width of the column should change automatically.

At first, when I resized my window, my columns were broader than my images and the height of the images were to big for the rows.

After trial and error I found that this did the trick:

IMAGES I had for-loop traverse between the rows and columns and in each cell I set the Imageview with the corresponding image (which is always a square) and used this height-binding (I divided the height of the gridpane by the number of rows):

images[i][j].fitHeightProperty().bind(gridPaneMaze.heightProperty().divide(7));
images[i][j].setPreserveRatio(true);

I presume you could also use the widthProperty and divide by the number of columns. But because most monitors have a smaller height than width, I used the height.

GRIDPANE:

I made my gridPane with FXML but that makes no difference to the values.

<BorderPane AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
<center>
    <GridPane fx:id="gridPaneMaze" centerShape="false" minHeight="0.0" minWidth="0.0"   BorderPane.alignment="TOP_LEFT">
        <columnConstraints>
            <ColumnConstraints halignment="CENTER" />
            <ColumnConstraints halignment="CENTER" />
            <ColumnConstraints halignment="CENTER" />
            <ColumnConstraints halignment="CENTER" />
            <ColumnConstraints halignment="CENTER" />
            <ColumnConstraints halignment="CENTER" />
            <ColumnConstraints halignment="CENTER" />
        </columnConstraints>
        <rowConstraints>
            <RowConstraints valignment="CENTER" />
            <RowConstraints valignment="CENTER" />
            <RowConstraints valignment="CENTER" />
            <RowConstraints valignment="CENTER" />
            <RowConstraints valignment="CENTER" />
            <RowConstraints valignment="CENTER" />
            <RowConstraints valignment="CENTER" />
        </rowConstraints>
        <children>
            //...
        </children>
        <BorderPane.margin>
            <Insets left="10.0" top="10.0" />
        </BorderPane.margin>
    </GridPane>
</center>

BORDERPANE: I added a borderpane to my anchorpane, so I set all anchors to '0'.

GRIDPANE: had minWidth 0 and minHeight 0. I set no prefWidth, prefHeight, maxWidth or maxHeight.

ROWS: I set nothing but the vertical alignment to center (no minHeight, prefHeight of maxHeight)

COLUMNS: I set nothing but the horizontal alignment to center (no minWidth, prefWidth of maxWidth)

Hopefully this helps...

Answer 2

This may have two reasons.

1) you might have not defined row and column constraints for your grid pane. Even when a GridPane grows, it's cells will not necessarily go beyond their preferred size. The best way to achieve this is to define constraints with a percentage width/height, like so:

public class ImageGrid extends Application {
    @Override
    public void start(final Stage stage) throws Exception {
        final GridPane pane = new GridPane();
        for (int i = 0; i < 10; i++) {
            final ImageView imageView = new ImageView(new Image("..."));
            pane.getChildren().add(imageView);
            GridPane.setConstraints(imageView, i%5, i/5);
        }

        pane.getColumnConstraints().addAll(
             columnWithPercentage(20),
             columnWithPercentage(20),
             columnWithPercentage(20),
             columnWithPercentage(20),
             columnWithPercentage(20)
        );

        pane.getRowConstraints().addAll(
                rowWithPercentage(50),
                rowWithPercentage(50)
        );

        final Scene scene = new Scene(pane);
        stage.setScene(scene);
        stage.setWidth(800);
        stage.setHeight(600);
        stage.show();
    }

    private ColumnConstraints columnWithPercentage(final double percentage) {
        final ColumnConstraints constraints = new ColumnConstraints();
        constraints.setPercentWidth(percentage);
        return constraints;
    }

    private RowConstraints rowWithPercentage(final double percentage) {
        final RowConstraints constraints = new RowConstraints();
        constraints.setPercentHeight(percentage);
        return constraints;
    }
    public static void main(String[] args) {
        Application.launch(args);
    }
}

This will create a 5x2 grid of ImageViews wich will fill the entire space of the grid pane equally.

2) The solution above will grow your image views, but the ImageView class itself will not stretch an image beyond its normal size until told to. You'll probably have to bind ImageView#fitWidthProperty and ImageView#fitHeightProperty as well if you want the images to scale up when the grid expands.