添加一个标签上的ImageView是在TilePane的顶部(Add a label on top

我正在一个应用程序，允许用户从一个游戏创建自定义商店图形，但我有麻烦，因为我想添加一个标签，它展示了如何在项目中有多少是在商店，但由于ImageView的是已经在瓷砖窗格中，它创建它旁边的标签，但我想创造在它上面的标签。

你可以让你的物品标签和应用映像，以标签的图形节点。当选择的项目，你可以调用label.setText("text string")标签上需要改变标签的文本或CSS样式。如果项目需要互动的，你可能想使按钮，而不是标签。

下面的方法有一个位它弄虚作假通过使用的组合contentDisplay="TOP" graphicTextGap="-40.0"和-fx-padding: 0 0 20 0; 定位的文字，这是一个有点违反直觉。

<?import java.lang.*?>
<?import java.util.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.image.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.paint.*?>

<StackPane id="StackPane" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="-1.0" prefWidth="-1.0" xmlns:fx="http://javafx.com/fxml/1" xmlns="http://javafx.com/javafx/2.2">
  <children>
    <TilePane hgap="10.0" prefColumns="3" prefHeight="-1.0" prefRows="1" prefWidth="-1.0" style="-fx-background-color: linear-gradient(palegreen, forestgreen);&#10;-fx-padding: 20px;" vgap="10.0">
      <children>
        <Label contentDisplay="TOP" graphicTextGap="-40.0" style="-fx-font-size: 20px;&#10;-fx-text-fill: gold;&#10;-fx-padding: 0 0 20 0;" text="Roast Beef">
          <graphic>
            <ImageView fitHeight="0.0" fitWidth="0.0" mouseTransparent="true" pickOnBounds="true" preserveRatio="true">
              <image>
                <Image url="http://icons.iconarchive.com/icons/rockettheme/ecommerce/256/piggy-bank-icon.png" backgroundLoading="true" />
              </image>
            </ImageView>
          </graphic>
        </Label>
        <Label contentDisplay="TOP" graphicTextGap="-40.0" style="-fx-font-size: 20px;&#10;-fx-text-fill: gold;&#10;-fx-padding: 0 0 20 0;&#10;-fx-border-color: palegoldenrod;&#10;-fx-border-width: 5px;&#10;-fx-border-radius: 10px;&#10;-fx-border-insets: -5px;&#10;" text="Bag 'o' Love">
          <graphic>
            <ImageView fitHeight="0.0" fitWidth="0.0" mouseTransparent="true" pickOnBounds="true" preserveRatio="true">
              <image>
                <Image url="http://icons.iconarchive.com/icons/rockettheme/ecommerce/256/bag-icon.png" backgroundLoading="false" />
              </image>
            </ImageView>
          </graphic>
        </Label>
        <Label contentDisplay="TOP" graphicTextGap="-40.0" style="-fx-font-size: 20px;&#10;-fx-text-fill: gold;&#10;-fx-padding: 0 0 20 0;" text="Show Me">
          <graphic>
            <ImageView fitHeight="0.0" fitWidth="0.0" mouseTransparent="true" pickOnBounds="true" preserveRatio="true">
              <image>
                <Image url="http://icons.iconarchive.com/icons/rockettheme/ecommerce/256/wallet-icon.png" backgroundLoading="true" />
              </image>
            </ImageView>
          </graphic>
        </Label>
      </children>
    </TilePane>
  </children>
</StackPane>
<!-- icon usage license: 
     Creative Commons with attribution,
     back link to http://www.rockettheme.com required -->

这也许不是达到你想要什么，你可以创建一个从地区派生的自定义组件ShopItem最好的方式。与自定义组件，您将提供布局逻辑在内部层的在你的物品图像的顶部的文本（和其他图形的需要）。这种布局逻辑应该比上面提供的机制更直观一点。

另一种方法是使每个商铺项目含有图片和文字标签的AnchorPane。

自定义组件的方法，虽然更灵活，更复杂一点，所以我只是提供了简单的标签基础的解决方案在这里。