如何让图像适合columnSpan

适合的格子大小我有一个GridPane包含单个视频上的数据，并在其中与columnSpan="3"其中ImageView。当窗口大小发生变化时，我想让视频图像完美地适合整个第一行。有任何想法吗？如何让图像适合columnSpan

这是我到目前为止有：

代码：

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

来源

2016-09-22 Meital

ImageView s为不能调整大小，但您可以使用父母是调整大小和绑定fitWidth和fitHeight属性以父母的大小使用expression binding：

下面的例子仅仅是可以用作根场景的大小调整的Stage但是不会发生同样的效果时，观察行为，如果StackPane由Parent调整，像GridPane一个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>

来源

2016-09-22 09:34:23 fabian

如何让图像适合columnSpan

回答

相关问题