样式化默认 JavaFX 对话框 [英] Styling default JavaFX Dialogs

问题描述

我正在寻找一种设置默认 JavaFX 对话框样式的方法 (javafx.scene.control.Dialog).

I'm looking for a way to style the default JavaFX Dialog (javafx.scene.control.Dialog).

我尝试获取 DialogPane 并添加一个样式表，但它只覆盖了对话框的一小部分.我更喜欢仅使用外部 css 文件进行样式设置，而不在代码上添加 styleClasses.这会看起来很乱(标题、内容、内容上的自己的内容等等..)

I tried to get the DialogPane and add a stylesheet, but it covers only a small piece of the dialog. I would prefer to style only with an external css file and without to add styleClasses over the code. This would look messy (header, content, own content on the content and more..)

我已经在谷歌上搜索了很多，只找到了 ControlsFX 的示例，但由于 jdk8_40 JavaFX 有它自己的对话框，我现在使用它们.

I googled already alot and only found examples for ControlsFX, but since jdk8_40 JavaFX has it's own Dialogs i use them now.

有什么建议吗?

自从 José Pereda 发布解决方案后，我创建了自己的 dialog.css.我会在这里发布它，因为它涵盖了整个对话框，也许有人想要复制和粘贴它.注意 .dialog-pane 已经是给定的 styleClass 名称，因此您无需应用自己的名称.当然，Josés 更详细.

Since José Pereda posted the solution i created my own dialog.css. I'll post it here because it covers the whole dialog and maybe someone want's to copy&paste it. Note .dialog-pane is already a given styleClass name so you don't need to apply your own. Of course, Josés is more fine detailed.

.dialog-pane {
    -fx-background-color: black;
}

.dialog-pane .label {
    -fx-text-fill: white;
}

.dialog-pane:header .header-panel {
    -fx-background-color: black;
}

.dialog-pane:header .header-panel .label {
    -fx-font-style: italic;
    -fx-font-size: 2em;
}

推荐答案

您可以使用自己的 css 文件设置对话框的样式，但为此您需要考虑到对话框实际上是一个新阶段，具有新的场景，根节点是一个 DialogPane 实例.

You can style your dialogs with your own css file, but for that you need to take into consideration that the dialog is in fact a new stage, with a new scene, and the root node is a DialogPane instance.

所以一旦你创建了一些对话框实例:

So once you create some dialog instance:

@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");
    ...
}

您可以访问其对话框窗格并添加您自己的样式表和您自己的类选择器:

you can access to its dialog pane and add your own style sheet and your own class selector:

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

现在的诀窍是了解 Dialog 样式表默认实现的所有规则.

Now the trick is knowing all the rules a Dialog style sheet has implemented by default.

这是一项艰巨的任务...因为它们不在 modena.css 文件中，就像所有常规控件一样.相反，它们位于 modena.bss 文件中，该文件位于私有包下的 jfxrt.jar 中.

And that's a difficult task... since they are not in the modena.css file, as for all the regular controls. On the contrary, they are found in the modena.bss file, a binary file located in the jfxrt.jar under private packages.

经过一番挖掘，我设法获得了这些规则，因此您的自定义 myDialogs.css 文件将如下所示:

After some digging I've managed to get those rules, so your custom myDialogs.css file will look something like this:

.myDialog{
    -fx-background-color: #f9d900;
}
.myDialog > *.button-bar > *.container{
    -fx-background-color: #a9e200;
}
.myDialog > *.label.content{
    -fx-font-size: 14px;
    -fx-font-weight: bold;
}
.myDialog:header *.header-panel{
    -fx-background-color: #a59c31;
}
.myDialog:header *.header-panel *.label{
    -fx-font-size: 18px;
    -fx-font-style: italic;
    -fx-fill: #292929;
}

您将拥有样式化的对话框:

And you will have your styled dialog:

请注意，作为私有包下的 bss 文件，这些选择器可能会在未来版本中更改，恕不另行通知.

编辑

我刚刚发现 .dialog-pane 选择器已经是 modena.css 在最后 8u40 早期版本，因此您可以在那里找到应用于对话框的所有选择器和规则.

I've just found that the .dialog-pane selector is already part of modena.css in the last 8u40 early versions, so you can find all the selectors and rules applied to the dialog pane there.

这篇关于样式化默认 JavaFX 对话框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！