JavaFX ControlsFX 对话框中的操作按钮 css 样式

Question

我一直在使用 ControlsFX 对话框来显示信息，但是我的应用程序的样式不是蓝色的，并且与对话框样式（颜色、边框）不匹配 有没有办法更改按钮颜色或样式？

Answer 1

由于您没有提供您正在使用的版本，我将使用新的 OpenJFX-Dialogs 项目（source，从 8.20.7 version 开始），顺便说一下，我们使用相同的对话框'将与JDK8u40。

首先，让我们添加一些警告对话框：

@Override
public void start(Stage primaryStage) {
    Alert alert = new Alert(AlertType.CONFIRMATION);
    alert.setTitle("Confirmation Dialog");
    alert.setHeaderText("This is a Regular Confirmation Dialog");
    alert.setContentText("This is the message");

    Button button = new Button("Click to display an alert");
    button.setOnAction(e->{
        Optional<ButtonType> result = alert.showAndWait();
        result.ifPresent(System.out::println);
    });

    Scene scene = new Scene(new StackPane(button), 300, 200);
    primaryStage.setScene(scene);
    primaryStage.show();
}

现在，要设置此对话框的样式，我们需要一个 DialogPane 的实例，它是对话框中的根节点，其中显示标题、内容和按钮。

通过查找或通过getChildren()，很容易找到这些组件。

这是自定义对话框所有组件的示例：

@Override
public void start(Stage primaryStage) {
    Alert alert = new Alert(AlertType.CONFIRMATION);
    alert.setTitle("Confirmation Dialog");
    alert.setHeaderText("This is a Custom Confirmation Dialog");
    alert.setContentText("We override the style classes of dialog.css");

    Button button = new Button("Click to display an alert");
    button.setOnAction(e->{
        Optional<ButtonType> result = alert.showAndWait();
        result.ifPresent(System.out::println);
    });

    Scene scene = new Scene(new StackPane(button), 300, 200);
    primaryStage.setScene(scene);
    primaryStage.show();

    DialogPane dialogPane = alert.getDialogPane();
// root
    dialogPane.setStyle("-fx-background-color: greenyellow;");

// 1. Grid
    // remove style to customize header
    dialogPane.getStyleClass().remove("alert");

    GridPane grid = (GridPane)dialogPane.lookup(".header-panel"); 
    grid.setStyle("-fx-background-color: cadetblue; "
            + "-fx-font-style: italic;");

    // custom icon
    StackPane stackPane = new StackPane(new ImageView(
            new Image(getClass().getResourceAsStream("lock24.png"))));
    stackPane.setPrefSize(24, 24);
    stackPane.setAlignment(Pos.CENTER);
    dialogPane.setGraphic(stackPane);

// 2. ContentText with just a Label
    dialogPane.lookup(".content.label").setStyle("-fx-font-size: 16px; "
            + "-fx-font-weight: bold; -fx-fill: blue;");

// 3- ButtonBar
    ButtonBar buttonBar = (ButtonBar)alert.getDialogPane().lookup(".button-bar");
    buttonBar.setStyle("-fx-font-size: 24px;"
            + "-fx-background-color: indianred;");
    buttonBar.getButtons().forEach(b->b.setStyle("-fx-font-family: \"Andalus\";"));

}

这就是它的样子：

Answer 2

注意

在最近的question 中，这次是关于与 JDK8u40 早期版本捆绑在一起的新的Dialog API，我提出了一个更简洁、更简洁的解决方案，使用样式表而不是内联样式和查找。

所以我更新了这个问题，因为openjfx-dialogs 仍然是官方版本 8u20、8u25 和 8u31 的对话方式。

新的解决方案

要使用我们自己的css文件自定义对话框的默认样式，我们需要考虑到对话框实际上是一个新阶段，有一个新场景，根节点是一个DialogPane实例。

所以一旦我们有了一些对话框实例：

@Override
public void start(Stage primaryStage) {        
    Alert alert = new Alert(AlertType.CONFIRMATION);
    alert.setTitle("Confirmation Dialog");
    alert.setHeaderText("This is a Custom Confirmation Dialog");
    alert.setContentText("We override the style classes of the dialog");
    ...
}

我们可以访问它的对话框并添加我们自己的样式表：

DialogPane dialogPane = alert.getDialogPane();
dialogPane.getStylesheets().add(
   getClass().getResource("myDialogs.css").toExternalForm());

为了定义我们的规则，我们需要知道已经使用的描述符。为此，我们只需要在openjfx-dialogs.jar（com.sun.javafx.scene.control.skin.modena 包下）中查找dialog.css 文件，或前往repository 的源代码。

现在我们需要提供自定义规则来覆盖 dialog 和 alert 类选择器的默认规则。以下规则将与我的第一个 answer 中的内联样式具有完全相同的效果。

.dialog > .dialog-pane {
    -fx-background-color: greenyellow;
}

.dialog > .dialog-pane > .button-bar {
    -fx-font-size: 24px;
    -fx-background-color: indianred;
    -fx-font-family: "Andalus";
}

.dialog > .dialog-pane > .content.label {
    -fx-font-size: 16px;
    -fx-font-weight: bold; 
    -fx-fill: blue;
}

.dialog:header > .dialog-pane .header-panel {
    -fx-background-color: cadetblue;
    -fx-font-style: italic;
}

.alert.confirmation.dialog-pane {
    -fx-graphic: url("lock24.png");
}

Answer 3

另一种解决方案：

dialog.getDialogPane().getScene().getStylesheets().add("css_name.css");

https://bitbucket.org/controlsfx/openjfx-dialogs/src/7273358fd294d486b4959f0c89b24b76c49bec89/src/main/resources/com/sun/javafx/scene/control/skin/modena/dialog.css?at=default