1

I'm having trouble with layout in JavaFX SceneBuilder.

I have a GridPane, one cell of which contains an ImageView inside an AnchorPane, and want the image to resize to the anchor.

I tried this, but it doesn't work. Just shows the image at full size.

        <AnchorPane fx:id="imageAnchor" GridPane.columnIndex="4" GridPane.rowIndex="1">
            <ImageView pickOnBounds="true" fitHeight="${imageAnchor.height}">
            <image>
                <Image url="https: / /www.mydomain.com/path/image.png" />
            </image>
            </ImageView>
        </AnchorPane>

I also tried

        <AnchorPane fx:id="imageAnchor" GridPane.columnIndex="4" GridPane.rowIndex="1">
            <ImageView pickOnBounds="true" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
            <image>
                <Image url="https: / /www.mydomain.com/path/image.png" />
            </image>
            </ImageView>
        </AnchorPane>

... but neither work. Any ideas what the problem might be?

I'd like to achieve this via SceneBuilder / XML.

  • 1
    Min `AnchorPane` size = `ImageView` size. The pane is never resized below this size and it never shrinks. Set `managed` to `false` for the `ImageView`. To not consider it for size calculation of it's parent. – fabian Apr 16 '18 at 10:55
  • Thank you @fabian. `managed="false"` solved the problem. –  Apr 16 '18 at 11:10

1 Answers1

1

I eventually solved this using:

         <AnchorPane fx:id="imageAnchor" GridPane.columnIndex="1" GridPane.rowIndex="1">
             <ImageView fitHeight="${imageAnchor.height}" managed="false" pickOnBounds="true" preserveRatio="true" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
                 <image>
                     <Image url="image.png" />
                 </image>
             </ImageView>
         </AnchorPane>