Используя JavaFx, как изменить цвет фона панели только внутри отступов?

Question

У меня есть панель в JavaFx, я пытаюсь изменить цвет панели только внутри примененного отступа. Используя этот код ...

control_box.setStyle(
                "-fx-background-color: #f4f4f4;" + 
                "-fx-background-padding: 10;" +     
                "-fx-padding: 10;" + 
                "-fx-border-style: solid inside;" + 
                "-fx-border-width: 2;" +
                "-fx-border-insets: 5;" + 
                "-fx-border-radius: 5;" + 
                "-fx-border-color: lightgrey;"
               );

Я получаю этот результат ...

Я пытаюсь получить синийпройти весь путь до границы заполнения. Я новичок в использовании CSS, поэтому любая помощь будет оценена.

Answer 1

Во-первых, в JavaFX CSS отсутствует свойство css "-fx-background-padding".

Вы можете установить несколько фонов и расположить их, используя свойство css "-fx-background-insets". Это очень мощное / полезное свойство, которое используется почти всем предопределенным CSS (в modena.css) для стилизации элементов управления.

Сказав это, не будет единого конкретного решения, когда дело доходит до стиля. Вы можете получить один и тот же эффект несколькими способами (как указано в @ n247s & @jewelsea).
Помимо этих двух, другой способ получить желаемое поведение - использовать "-fx-background-insets".

Подход 1

Если вы очень специфичны в использовании "-fx-border-insets", вы можете добавить дополнительный цвет к фону и управлять двумя цветамииспользуя -fx-background-padding.

В приведенном ниже коде я включил «прозрачный» цвет и сумел отрисовать его для требуемого пространства, а затем начал отрисовывать нужный цвет (# f4f4f4) оттуда.

controlBox1.setStyle(
            "-fx-background-color: transparent, #f4f4f4;" +
                    "-fx-background-insets:0, 5;" +
                    "-fx-background-radius: 5;" +
                    //"-fx-background-padding: 10;" +
                    "-fx-padding: 10;" +
                    "-fx-border-style: solid inside;" +
                    "-fx-border-width: 2;" +
                    "-fx-border-insets: 5;" +
                    "-fx-border-radius: 5;" +
                    "-fx-border-color: lightgrey;"
    );

Подход 2

Я не рекомендую использовать "-fx-border-вставки", если у вас есть один цвет рамки. Если вам удалось установить поля (как упомянуто @jewelsea), вы можете просто удалить «-fx-border-insets».

HBox.setMargin(controlBox2, new Insets(5));
controlBox2.setStyle(
        "-fx-background-color: #f4f4f4;" +
                "-fx-background-radius: 5;" +
                //"-fx-background-padding: 10;" +
                "-fx-padding: 10;" +
                "-fx-border-style: solid inside;" +
                "-fx-border-width: 2;" +
                // "-fx-border-insets: 5;" +
                "-fx-border-radius: 5;" +
                "-fx-border-color: lightgrey;"
);

Обратите внимание, что я включил «-fx-background-radius»в обоих подходах, чтобы избежать заостренных углов фона.

Рабочий пример:

import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.geometry.Pos;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.layout.HBox;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;

public class BackgroundPadding_Demo extends Application {
    @Override
    public void start(Stage stage) throws Exception {
        StackPane root = new StackPane();
        root.setStyle("-fx-background-color:lightblue;");
        Scene scene = new Scene(root, 500, 200);
        stage.setScene(scene);
        stage.show();

        StackPane controlBox1 = new StackPane(new Label("Box1"));
        controlBox1.setAlignment(Pos.TOP_LEFT);
        controlBox1.setMinSize(200, 100);
        controlBox1.setMaxSize(200, 100);
        controlBox1.setStyle(
                "-fx-background-color: transparent, #f4f4f4;" +
                        "-fx-background-insets:0, 5;" +
                        "-fx-background-radius: 5;" +
                        //"-fx-background-padding: 10;" +
                        "-fx-padding: 10;" +
                        "-fx-border-style: solid inside;" +
                        "-fx-border-width: 2;" +
                        "-fx-border-insets: 5;" +
                        "-fx-border-radius: 5;" +
                        "-fx-border-color: lightgrey;"
        );

        StackPane controlBox2 = new StackPane(new Label("Box2"));
        controlBox2.setAlignment(Pos.TOP_LEFT);
        controlBox2.setMinSize(200, 100);
        controlBox2.setMaxSize(200, 100);
        HBox.setMargin(controlBox2, new Insets(5));
        controlBox2.setStyle(
                "-fx-background-color: #f4f4f4;" +
                        "-fx-background-radius: 5;" +
                        //"-fx-background-padding: 10;" +
                        "-fx-padding: 10;" +
                        "-fx-border-style: solid inside;" +
                        "-fx-border-width: 2;" +
                        // "-fx-border-insets: 5;" +
                        "-fx-border-radius: 5;" +
                        "-fx-border-color: lightgrey;"
        );

        HBox hBox = new HBox(controlBox1, controlBox2);
        hBox.setSpacing(15);
        hBox.setAlignment(Pos.CENTER);
        root.getChildren().add(new Group(hBox));
    }

    public static void main(String[] args) {
        Application.launch(args);
    }

}