Set stackPane size in JavaFX

Question

I want a stack pane to simulate a FullHD display, that is 1920x1080.

For that I am using 640x360 which follows the same proportion and then I scale the image nodes inside the stackPane (which is called "screen") using:

image.getWidth()/(fullWidth/screen.getWidth())), 

image.getHeight()/(fullHeight/screen.getHeight()))

This is working great only problem is I can't set the size for the "screen" therefore it keeps big black bars on the bottom and on the top of it.

As you can see in the image below the "screen" has a white border around it for making the black bars easier to notice.

screen snapshot

Here is the code that creates the stack pane and handles it:

DisplayPane constructor method

public DisplayPane(TemporalViewPane temporalViewPane, SteveMenuBar steveMenuBar, SpatialTemporalView spatialTemporalView){

        setId("display-pane");

        screen = new StackPane();
        screen.setId("screen-pane");


        controlButtonPane = new ControlButtonPane(screen, temporalViewPane, steveMenuBar, spatialTemporalView);


        setCenter(screen);
        setBottom(controlButtonPane);

    }

ControlButtonPane constructor class method:

public ControlButtonPane(StackPane screen, TemporalViewPane temporalViewPane,SteveMenuBar steveMenuBar, SpatialTemporalView spatialTemporalView){

    fullHDLabel = new Label("FullHD");
    fullHDLabel.setPadding(new Insets(5,5,5,5));   
    screen.getChildren().add(fullHDLabel);

    setId("control-button-pane");
    this.steveMenuBar = steveMenuBar;
    this.screen = screen;
    this.screen.setAlignment(Pos.TOP_LEFT);
    this.temporalViewPane = temporalViewPane;
    this.spatialTemporalView = spatialTemporalView;
    this.webView = new WebView();

    createButtons();
    setLeft(fullButtonPane);
    setLeft(fullHDLabel);
    setCenter(centerButtonPane);
    setRight(refreshButtonPane);

    createListeners();
    createButtonActions();


}

CreateButtons method:

public void createButtons(){


    run = new Button();
    run.setDisable(true);
    run.setId("run-button");
    run.setTooltip(new Tooltip(Language.translate("run")));

    play = new Button();
    play.setDisable(true);
    play.setId("play-button");
    play.setTooltip(new Tooltip(Language.translate("play")));

    pause = new Button();
    pause.setDisable(true);
    pause.setId("pause-button");
    pause.setTooltip(new Tooltip(Language.translate("pause")));

    stop = new Button();
    stop.setDisable(true);
    stop.setId("stop-button");
    stop.setTooltip(new Tooltip(Language.translate("stop")));       

    centerButtonPane = new HBox();
    centerButtonPane.setId("center-button-pane");
    centerButtonPane.getChildren().add(run);
    centerButtonPane.getChildren().add(play);
    centerButtonPane.getChildren().add(pause);
    centerButtonPane.getChildren().add(stop);


}

CreateListeners method:

private void createListeners(){


    screen.widthProperty().addListener((obs, oldVal, newVal) -> {
        if(newVal != oldVal){
            screen.minHeightProperty().bind(screen.widthProperty().multiply(0.565));
            screen.maxHeightProperty().bind(screen.widthProperty().multiply(0.565));
            System.out.println("NEW WIDTH OF SCREEN IS: "+newVal);
        }

    });

    screen.heightProperty().addListener((obs, oldVal, newVal) -> {
        if(newVal != oldVal){
            screen.minHeightProperty().bind(screen.widthProperty().multiply(0.565));
            screen.maxHeightProperty().bind(screen.widthProperty().multiply(0.565));
            System.out.println("NEW HEIGHT OF SCREEN IS: "+newVal);
        }

    });

And below is what I want to achieve. Currently, I have to run the application and then drag the side of the stack pane for resizing it as it should be.

how it should be snapshot

I've tried all set min/max/pref height/width and still haven't manage to achieve my goal. I don't know what else to do.

Any help would be great.

Answer 1

Problem was I was binding height to width when it should be the other way around since width can be resized much larger without wasting screen space.

So I changed the binding to:

private void createListeners(){


screen.widthProperty().addListener((obs, oldVal, newVal) -> {
    if(newVal != oldVal){
        screen.minWidthProperty().bind(screen.heightProperty().multiply(1.77778));
        screen.maxWidthProperty().bind(screen.heightProperty().multiply(1.77778));
        System.out.println("NEW WIDTH OF SCREEN IS: "+newVal);
    }

});

screen.heightProperty().addListener((obs, oldVal, newVal) -> {
    if(newVal != oldVal){
        screen.minWidthProperty().bind(screen.heightProperty().multiply(1.77778));
        screen.maxWidthProperty().bind(screen.heightProperty().multiply(1.77778));
        System.out.println("NEW HEIGHT OF SCREEN IS: "+newVal);
    }

});
}