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

问题描述

我正在寻找一种方法来设置默认的JavaFX Dialog（ 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..)

我已经很多googled已经很多，只找到了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");

现在的诀窍是知道所有的规则，一个对话框样式表默认实现。

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文件，这些选择器可能会在未来版本中更改，恕不另行通知。

Note that being a bss file under private packages, these selectors can change without notice in future releases.

编辑

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

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屋！