columnPanのグリッドパンのサイズに合わせて画像を取得する方法

Question

GridPaneには、1つのビデオのデータが含まれ、その内にImageViewがあり、columnSpan="3"が含まれています。 ウィンドウサイズが変化しているときにビデオ画像を完全に最初の行に合わせたいと思っています。何か案は？

この

は、私がこれまで持っているものです：

コード：

<?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> 

Answer 1

ImageView sがサイズ変更されていませんが、サイズ変更され、親を使用して結合することができますfitWidthおよびfitHeight親のサイズに対するプロパティexpression binding：

次の例では、StackPaneがGridPaneのように、Parentによってサイズが変更された場合、Stageのサイズを変更する際の挙動を観察するシーンのルートとして使用することができますが、同様の効果が発生するだけでStackPane次のとおりです。

<?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>