CODEWITHSUNDEEP
javafxfxml
Meital
Meital

Reputation: 17

How to get an image to fit the size of a gridpane on columnSpan

I have a GridPane that contains data on a single video, and an ImageView inside it with a columnSpan="3". I want to get the video image to fit the entire first row perfectly when window size is changing. Any ideas?

This is what I've got so far:

Gridpane Image

Code:

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

<?import javafx.scene.control.*?>
<?import javafx.scene.text.*?>
<?import javafx.geometry.*?>
<?import javafx.scene.image.*?>
<?import javafx.scene.layout.*?>

<GridPane fx:id="videoGP" alignment="CENTER" gridLinesVisible="true" prefHeight="315.0" prefWidth="405.0" GridPane.columnIndex="1" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1">
    <columnConstraints>
        <ColumnConstraints fillWidth="false" halignment="CENTER" hgrow="ALWAYS" maxWidth="30.0" minWidth="10.0" prefWidth="20.0" />
        <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
        <ColumnConstraints hgrow="SOMETIMES" maxWidth="40.0" minWidth="10.0" prefWidth="100.0" />
    </columnConstraints>
    <rowConstraints>
        <RowConstraints maxHeight="1000.0" minHeight="10.0" percentHeight="80.0" prefHeight="94.0" valignment="CENTER" vgrow="ALWAYS" />
        <RowConstraints maxHeight="37.0" minHeight="0.0" percentHeight="10.0" prefHeight="17.0" vgrow="SOMETIMES" />
        <RowConstraints maxHeight="31.0" minHeight="10.0" percentHeight="10.0" prefHeight="20.0" vgrow="SOMETIMES" />
    </rowConstraints>
    <children>
        <ImageView fx:id="videoImage" fitHeight="181.0" fitWidth="364.0" pickOnBounds="true" preserveRatio="true" GridPane.columnSpan="3" GridPane.halignment="CENTER" GridPane.hgrow="ALWAYS" GridPane.valignment="CENTER" GridPane.vgrow="ALWAYS" StackPane.alignment="CENTER">
            <image>
                <Image url="@../ItTakesTimeToBecomeYoung.jpg" />
            </image>
            <GridPane.margin>
                <Insets />
            </GridPane.margin>
        </ImageView>
        <ImageView fitHeight="25.0" fitWidth="25.0" onMouseClicked="#clickInfo" pickOnBounds="true" preserveRatio="true" GridPane.rowIndex="1" GridPane.rowSpan="2">
            <image>
                <Image url="@../Views/Icons/bn_info_normal.png" />
            </image>
            <GridPane.margin>
                <Insets bottom="4.0" left="4.0" right="4.0" top="4.0" />
            </GridPane.margin>
        </ImageView>
        <Label fx:id="videoName" text="Video Name" GridPane.columnIndex="1" GridPane.rowIndex="1">
            <font>
                <Font name="System Bold Italic" size="12.0" />
            </font>
            <padding>
                <Insets bottom="4.0" left="4.0" right="4.0" top="4.0" />
            </padding>
        </Label>
        <Label fx:id="artistName" text="Artist Name" GridPane.columnIndex="1" GridPane.rowIndex="2">
            <padding>
                <Insets bottom="4.0" left="4.0" right="4.0" top="4.0" />
            </padding>
        </Label>
        <Label fx:id="videoDuration" alignment="CENTER_RIGHT" prefHeight="13.0" prefWidth="124.0" text="3:49" GridPane.columnIndex="2" GridPane.rowIndex="1">
            <padding>
                <Insets bottom="4.0" left="4.0" right="4.0" top="4.0" />
            </padding>
        </Label>
        <ImageView fitHeight="25.0" fitWidth="25.0" onMouseClicked="#clickPlay" pickOnBounds="true" preserveRatio="true" GridPane.columnIndex="1" GridPane.halignment="CENTER" GridPane.hgrow="ALWAYS" GridPane.valignment="CENTER" GridPane.vgrow="ALWAYS">
            <image>
                <Image url="@../Views/Icons/ic_play.png" />
            </image>
        </ImageView>
    </children>
</GridPane>

Upvotes: 0

Views: 2510

Answers (1)

fabian
fabian

Reputation: 82531

ImageViews are not resizeable, but you could use a parent that is resizeable and bind the fitWidth and fitHeight properties to the size of the parent using expression binding:

The following example is just a StackPane that could be used as root of a scene to observe the behaviour when resizing the Stage but the same effects would occur, if the StackPane is resized by a Parent, like GridPane:

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

<?import javafx.scene.image.*?>
<?import javafx.scene.layout.*?>

<StackPane fx:id="root" xmlns:fx="http://javafx.com/fxml/1">
    <children>
        <ImageView fitWidth="${root.width}" fitHeight="${root.height}" preserveRatio="true">
               <!--  ^^  bind to size of node with fx:id="root" ^^  -->
            <image>
                <Image url="http://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a"/>
            </image>
        </ImageView>
    </children>
</StackPane>

Upvotes: 1

Related Questions