I have a ScrollPane, which contains a GridPane, which contains an ImageView, which contains an Image. What I want is for the Image to be centered in the GridPane.
W
What's happening is that while the grid pane is centering the scroll pane, the image view is sitting at the top left of the scroll pane.
One fix is to wrap the image view in a stack pane (which centers by default), and make sure the stack pane is at least as wide as the scroll pane's viewport:
SSCCE:
import javafx.application.Application;
import javafx.beans.binding.Bindings;
import javafx.geometry.HPos;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.ScrollPane;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.GridPane;
import javafx.scene.layout.Priority;
import javafx.scene.layout.StackPane;
import javafx.scene.paint.Color;
import javafx.scene.shape.Rectangle;
import javafx.stage.Stage;
public class ImageDB extends Application
{
@Override
public void start(Stage root)
{
// Image image = new Image("0.jpg");
Image image = createImage();
ImageView view = new ImageView();
view.setImage(image);
StackPane imageHolder = new StackPane(view);
ScrollPane scroll = new ScrollPane();
scroll.setContent(imageHolder);
GridPane grid = new GridPane();
imageHolder.minWidthProperty().bind(Bindings.createDoubleBinding(() ->
scroll.getViewportBounds().getWidth(), scroll.viewportBoundsProperty()));
grid.getChildren().add(imageHolder);
// grid.setAlignment(Pos.TOP_CENTER);
BorderPane border = new BorderPane();
border.setCenter(scroll);
root.setScene(new Scene(border));
root.setMaximized(true);
root.show();
}
private Image createImage() {
return new Rectangle(400, 200, Color.CORNFLOWERBLUE).snapshot(null, null);
}
public static void main(String[] args) {
launch(args);
}
}
Better solution via viewportBoundsProperty:
import javafx.application.Application;
import javafx.geometry.Bounds;
import javafx.scene.Node;
import javafx.scene.Scene;
import javafx.scene.control.ScrollPane;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.GridPane;
import javafx.scene.paint.Color;
import javafx.scene.shape.Rectangle;
import javafx.stage.Stage;
public class ImageDB extends Application {
final static int WIDTH = 400;
final static int HEIGHT = 200;
@Override
public void start(Stage root) {
// Image image = new Image("0.jpg");
Image image = this.createImage();
ImageView view = new ImageView();
view.setImage(image);
GridPane grid = new GridPane();
grid.getChildren().add(view);
ScrollPane scroll = new ScrollPane();
scroll.setContent(grid);
BorderPane border = new BorderPane();
border.setCenter(scroll);
this.center(scroll.getViewportBounds(), grid);
scroll.viewportBoundsProperty().addListener((observable, oldValue, newValue) -> {
this.center(newValue, grid);
});
root.setScene(new Scene(border));
root.setMaximized(true);
root.show();
}
private Image createImage() {
return new Rectangle(ImageDB.WIDTH, ImageDB.HEIGHT, Color.CORNFLOWERBLUE).snapshot(null, null);
}
public static void main(String[] args) {
Application.launch(args);
}
private void center(Bounds viewPortBounds, Node centeredNode) {
double width = viewPortBounds.getWidth();
double height = viewPortBounds.getHeight();
if (width > ImageDB.WIDTH) {
centeredNode.setTranslateX((width - ImageDB.WIDTH) / 2);
} else {
centeredNode.setTranslateX(0);
}
if (height > ImageDB.HEIGHT) {
centeredNode.setTranslateY((height - ImageDB.HEIGHT) / 2);
} else {
centeredNode.setTranslateY(0);
}
}
}
This could help in some cases:
<ScrollPane fitToWidth="true" fitToHeight="true">
While imageHolder.minWidthProperty().bind(Bindings.createDoubleBinding(() -> scroll.getViewportBounds().getWidth(), scroll.viewportBoundsProperty()));
indeed does the trick, there seem to be some issues with it (e.g., sometimes showing erroneous scrollbars/flickering content, etc.).
I since found that a simple scroll.setFitToWidth(true);
(and/or scroll.setFitToHeight(true);
) also keeps the content sized with the scroll pane, but without the aforementioned issues!