1

So, I am trying to let the user upload pictures to a gridpane

So far I managed to get the pictures to be shown, but the problem is that if the window size is changed the pictures stay the same size.

I tried using computed sizes with margins but it doesn't work the way i want it.

Pic 1, the way I want it to be:

https://i.stack.imgur.com/2eDsP.jpg

Pic 2, how it gets displayed

https://i.stack.imgur.com/vYajA.jpg

EDIT: Here's the code of the tab for pictures:

 <Tab closable="false" text="Bilder">
     <content>
        <GridPane>
          <columnConstraints>
            <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
              <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
              <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
              <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
            <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
          </columnConstraints>
          <rowConstraints>
            <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
              <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
              <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
            <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
            <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
          </rowConstraints>
           <children>
              <Button fx:id="addPic" mnemonicParsing="false" onAction="#choseFile" text="Bild hinzuügen" GridPane.columnIndex="4" GridPane.halignment="RIGHT" GridPane.rowIndex="4">
                 <GridPane.margin>
                    <Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
                 </GridPane.margin>
              </Button>
              <ImageView fx:id="image1" fitHeight="110.0" fitWidth="141.0" pickOnBounds="true" preserveRatio="true" GridPane.hgrow="ALWAYS" GridPane.vgrow="ALWAYS">
                 <GridPane.margin>
                    <Insets />
                 </GridPane.margin></ImageView>
              <ImageView fx:id="image2" fitHeight="110.0" fitWidth="141.0" pickOnBounds="true" preserveRatio="true" GridPane.columnIndex="1" GridPane.hgrow="ALWAYS" GridPane.vgrow="ALWAYS">
                 <GridPane.margin>
                    <Insets />
                 </GridPane.margin></ImageView>
              <ImageView fx:id="image3" fitHeight="110.0" fitWidth="141.0" pickOnBounds="true" preserveRatio="true" GridPane.columnIndex="2" GridPane.hgrow="ALWAYS" GridPane.vgrow="ALWAYS">
                 <GridPane.margin>
                    <Insets />
                 </GridPane.margin></ImageView>
              <ImageView fx:id="image4" fitHeight="110.0" fitWidth="141.0" pickOnBounds="true" preserveRatio="true" GridPane.columnIndex="3" GridPane.hgrow="ALWAYS" GridPane.vgrow="ALWAYS">
                 <GridPane.margin>
                    <Insets />
                 </GridPane.margin></ImageView>
              <ImageView fx:id="image5" fitHeight="110.0" fitWidth="141.0" pickOnBounds="true" preserveRatio="true" GridPane.columnIndex="4" GridPane.hgrow="ALWAYS" GridPane.vgrow="ALWAYS">
                 <GridPane.margin>
                    <Insets />
                 </GridPane.margin></ImageView>
              <ImageView fx:id="image6" fitHeight="110.0" fitWidth="141.0" pickOnBounds="true" preserveRatio="true" GridPane.hgrow="ALWAYS" GridPane.rowIndex="1" GridPane.vgrow="ALWAYS">
                 <GridPane.margin>
                    <Insets />
                 </GridPane.margin></ImageView>
              <ImageView fx:id="image7" fitHeight="110.0" fitWidth="141.0" pickOnBounds="true" preserveRatio="true" GridPane.columnIndex="1" GridPane.hgrow="ALWAYS" GridPane.rowIndex="1" GridPane.vgrow="ALWAYS">
                 <GridPane.margin>
                    <Insets />
                 </GridPane.margin>
              </ImageView>
              <ImageView fx:id="image8" fitHeight="110.0" fitWidth="141.0" pickOnBounds="true" preserveRatio="true" GridPane.columnIndex="2" GridPane.hgrow="ALWAYS" GridPane.rowIndex="1" GridPane.vgrow="ALWAYS">
                 <GridPane.margin>
                    <Insets />
                 </GridPane.margin></ImageView>
              <ImageView fx:id="image9" fitHeight="110.0" fitWidth="141.0" pickOnBounds="true" preserveRatio="true" GridPane.columnIndex="3" GridPane.hgrow="ALWAYS" GridPane.rowIndex="1" GridPane.vgrow="ALWAYS">
                 <GridPane.margin>
                    <Insets />
                 </GridPane.margin></ImageView>
              <ImageView fx:id="image10" fitHeight="110.0" fitWidth="141.0" pickOnBounds="true" preserveRatio="true" GridPane.columnIndex="4" GridPane.hgrow="ALWAYS" GridPane.rowIndex="1" GridPane.vgrow="ALWAYS">
                 <GridPane.margin>
                    <Insets />
                 </GridPane.margin></ImageView>
              <ImageView fx:id="image11" fitHeight="110.0" fitWidth="141.0" pickOnBounds="true" preserveRatio="true" GridPane.hgrow="ALWAYS" GridPane.rowIndex="2" GridPane.vgrow="ALWAYS">
                 <GridPane.margin>
                    <Insets />
                 </GridPane.margin></ImageView>
              <ImageView fx:id="image12" fitHeight="110.0" fitWidth="141.0" pickOnBounds="true" preserveRatio="true" GridPane.columnIndex="1" GridPane.hgrow="ALWAYS" GridPane.rowIndex="2" GridPane.vgrow="ALWAYS">
                 <GridPane.margin>
                    <Insets />
                 </GridPane.margin></ImageView>
              <ImageView fx:id="image13" fitHeight="110.0" fitWidth="141.0" pickOnBounds="true" preserveRatio="true" GridPane.columnIndex="2" GridPane.hgrow="ALWAYS" GridPane.rowIndex="2" GridPane.vgrow="ALWAYS">
                 <GridPane.margin>
                    <Insets />
                 </GridPane.margin></ImageView>
              <ImageView fx:id="image14" fitHeight="110.0" fitWidth="141.0" pickOnBounds="true" preserveRatio="true" GridPane.columnIndex="3" GridPane.hgrow="ALWAYS" GridPane.rowIndex="2" GridPane.vgrow="ALWAYS">
                 <GridPane.margin>
                    <Insets />
                 </GridPane.margin></ImageView>
              <ImageView fx:id="image15" fitHeight="110.0" fitWidth="141.0" pickOnBounds="true" preserveRatio="true" GridPane.columnIndex="4" GridPane.hgrow="ALWAYS" GridPane.rowIndex="2" GridPane.vgrow="ALWAYS">
                 <GridPane.margin>
                    <Insets />
                 </GridPane.margin></ImageView>
              <ImageView fx:id="image16" fitHeight="110.0" fitWidth="141.0" pickOnBounds="true" preserveRatio="true" GridPane.hgrow="ALWAYS" GridPane.rowIndex="3" GridPane.vgrow="ALWAYS">
                 <GridPane.margin>
                    <Insets />
                 </GridPane.margin></ImageView>
              <ImageView fx:id="image17" fitHeight="110.0" fitWidth="141.0" pickOnBounds="true" preserveRatio="true" GridPane.columnIndex="1" GridPane.hgrow="ALWAYS" GridPane.rowIndex="3" GridPane.vgrow="ALWAYS">
                 <GridPane.margin>
                    <Insets />
                 </GridPane.margin></ImageView>
              <ImageView fx:id="image18" fitHeight="110.0" fitWidth="141.0" pickOnBounds="true" preserveRatio="true" GridPane.columnIndex="2" GridPane.hgrow="ALWAYS" GridPane.rowIndex="3" GridPane.vgrow="ALWAYS">
                 <GridPane.margin>
                    <Insets />
                 </GridPane.margin></ImageView>
              <ImageView fx:id="image19" fitHeight="110.0" fitWidth="141.0" pickOnBounds="true" preserveRatio="true" GridPane.columnIndex="3" GridPane.hgrow="ALWAYS" GridPane.rowIndex="3" GridPane.vgrow="ALWAYS">
                 <GridPane.margin>
                    <Insets />
                 </GridPane.margin></ImageView>
              <ImageView fx:id="image20" fitHeight="110.0" fitWidth="141.0" pickOnBounds="true" preserveRatio="true" GridPane.columnIndex="4" GridPane.hgrow="ALWAYS" GridPane.rowIndex="3" GridPane.vgrow="ALWAYS">
                 <GridPane.margin>
                    <Insets />
                 </GridPane.margin></ImageView>
           </children>
        </GridPane>
     </content>
</Tab>
Aginu
  • 156
  • 2
  • 17
  • could you show us the fxml code? – ALSTRA Jul 30 '15 at 09:28
  • @ALSTRA i added the code for the picture tab now – Aginu Jul 30 '15 at 09:31
  • try to set hgrow/vgrow="ALWAYS" ,.. – ALSTRA Jul 30 '15 at 09:38
  • Just tried it, it didn't change anything sadly – Aginu Jul 30 '15 at 09:52
  • You've hard-coded the `fitWidth` and `fitHeight` properties of the image views. You need those to change to the size of the cells. You probably need to wrap each `ImageView` in a `Pane`, make sure those panes grow to fill their cells, and bind the `fitWidth` and `fitHeight` properties of the `ImageView`s to the `width` and `height` properties of the `Pane`s. – James_D Jul 30 '15 at 12:13
  • Ah, thank you very much! I will try it this solution asap. – Aginu Jul 30 '15 at 12:17
  • @James_D So, I tried your solution but unfortunately, it doesn't work (or I'm too stupid to get it correctly done), anyways, I've found a few solutions on this website which seemed promising. I tried them out but they also don't work. I used the `.fitWidthProperty.bind(pane1.getWidt())` but `pane1.getWidth()` returns a double value and bind needs an observable number list – Aginu Jul 31 '15 at 09:42
  • `.fitWidthProperty().bind(pane1.widthProperty())`? – James_D Jul 31 '15 at 11:58
  • @James_D Thank you so much! This finally worked and I'm embarrased that I didn't try that, I guess I'm workng a bit too much – Aginu Jul 31 '15 at 13:52

0 Answers0