JavaFX: как добавить CSS в элемент Image в FXML - PullRequest
Новая
       15

JavaFX: как добавить CSS в элемент Image в FXML

2 голосов
/ 07 июня 2019

У меня есть следующий FXML: 

<VBox id="customerFormPane" styleClass="customerForm" xmlns:fx="http://javafx.com/fxml/1" fx:controller="com.example.customer.CustomerFormController" >
    <stylesheets>
        <URL value="@customerform.css"/>
    </stylesheets>

    <GridPane>
        <columnConstraints>
            <ColumnConstraints hgrow="ALWAYS" percentWidth="50.0"/>
            <ColumnConstraints hgrow="ALWAYS" percentWidth="50.0"/>
        </columnConstraints>

        <ImageView id="boxImage" fitWidth="100" fitHeight="100">
            <image>
                <Image url="@/com/exmaple/resources/icons/office.png" />
            </image>            
        </ImageView>
    </GridPane>

</VBox>

Я хотел бы определить границу в CSS для изображения. Я пробовал это в файле customerform.css: 

.customerForm Image, .customerForm ImageView, .customerForm image {

    -fx-background-color: white;
    -fx-border-style: solid;
    -fx-border-color: red;

}

Но ничего не происходит, есть советы о том, как выбрать ImageView? (Примечание: изображение отображается правильно)

1 Ответ

3 голосов
/ 07 июня 2019

Свойства CSS, которые не поддерживаются узлом, просто игнорируются. В вашем случае это все те свойства. Region предоставляет свойства -fx-background-color, -fx-border-style и -fx-border-color, но ImageView не является подклассом Region.

Чтобы это работало, вам нужно обернуть изображение в подходящий тип Region.

Пример: 

<GridPane>
    <columnConstraints>
        <ColumnConstraints hgrow="ALWAYS" percentWidth="50.0"/>
        <ColumnConstraints hgrow="ALWAYS" percentWidth="50.0"/>
    </columnConstraints>
    <!-- container using pref size as max size to not grow larger than the image -->
    <Pane styleClass="image-container" maxWidth="-Infinity" maxHeight="-Infinity">
        <children>
            <ImageView id="boxImage" fitWidth="100" fitHeight="100">
                <image>
                    <Image url="@/com/exmaple/resources/icons/office.png" />
                </image>            
            </ImageView>
       </children>
    </Pane>
</GridPane>

.image-container {
    -fx-background-color: white;
    -fx-border-style: solid;
    -fx-border-color: red;
}

Кстати: вы, кажется, не уверены, какие селекторы являются правильными здесь. Вам необходимо использовать тип узла в селекторе. .customerForm ImageView или #boxImage будут работать как селекторы.

...