CODEWITHSUNDEEP
javajavafx-2javafxfxmlscenebuilder
sifrenette
sifrenette

Reputation: 209

Center an unresizable pane in JavaFX-2

I'm trying to make a simple image viewing application in JavaFX-2, FXML and Scene Builder. It is my first JavaFX application and I'm having trouble playing with panes and layouts.

Basically, I want it to display an image in its original size (without being able to zoom/resize), in the absolute center of my application. Also, the window should be resizable, so if the image is bigger than the window's size, I want to have scrollbars appear to be able to see the entire image.

A good example of what I'm trying to create would be the Adobe Photoshop layout: https://i.sstatic.net/JamyP.jpg.

This is my current layout: https://i.sstatic.net/WHMIV.jpg. The image is represented by the black Stack Pane. The scrollbars are currently working, but I just can't find a way to put the Stack Pane in the center.

I feel like I am missing something important, can you please point me in the right direction?

Thanks!

edit: here is my fxml code: pastebin.com/CnxYEKF1

Upvotes: 3

Views: 3603

Answers (1)

zhujik
zhujik

Reputation: 6574

you used an AnchorPane as container for your ScrollPane. If you use a StackPane instead, it makes the content center on default. However, a StackPane, like any other Pane, uses as much space as it can get, so it will always take all space up and thus not being centered at all. To solve this, put your ScrollPane inside a Group. A Group is always as big as its children are, and you can control its width and height by setting the prefHeight and prefWidth of the Scrollpane. Heres your FXML with it (I removed the buttons onClick listeners for simplicity of my example):

<?xml version="1.0" encoding="UTF-8"?>

<?import java.lang.*?>
<?import java.util.*?>
<?import javafx.geometry.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.image.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.paint.*?>

<?import javafx.scene.Group?>
<AnchorPane id="AnchorPane" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="700.0" prefWidth="700.0" xmlns:fx="http://javafx.com/fxml" fx:controller="test.StackOverflowController">
  <children>
    <VBox prefHeight="687.0" prefWidth="710.0" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
      <children>
        <ToolBar prefWidth="600.0" style="-fx-base: firebrick">
          <items>
            <Button fx:id="btn_ImgFromFile" mnemonicParsing="false" style="-fx-base: firebrick" text="Load Image From File" />
            <Button fx:id="btn_ImgFromWindow" mnemonicParsing="false" style="-fx-base: firebrick" text="Load Image From Window" />
            <Separator orientation="VERTICAL" prefHeight="21.0" />
            <Button fx:id="btn_LoadInfo" mnemonicParsing="false" style="-fx-base: firebrick" text="Load Window Info" />
            <Button fx:id="btn_SaveInfo" mnemonicParsing="false" style="-fx-base: firebrick" text="Save Window Info" />
          </items>
        </ToolBar>
        <StackPane fx:id="pane_main" prefHeight="200.0" prefWidth="200.0" VBox.vgrow="ALWAYS">
          <children>
            <Group>
            <ScrollPane fx:id="scroll_pane" prefHeight="200.0" prefWidth="200.0" AnchorPane.bottomAnchor="-1.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="1.0">
              <content>
                <StackPane fx:id="stack_pane" prefHeight="230.0" prefWidth="333.0" style="-fx-background-color: #000000;" />
              </content>
            </ScrollPane>
            </Group>
          </children>
        </StackPane>
      </children>
    </VBox>
  </children>
</AnchorPane>

Result:

enter image description here

Upvotes: 2

Related Questions