styling - 如何使用 css 设置 JavaFX ContextMenu 的样式？

Question

我正在尝试使用单独的 CSS 文件更改 ContextMenu 项的样式。我查看了 caspian.css 部分，发现了以下定义:

• .上下文菜单
• .context-menu .separator
• .上下文菜单.滚动箭头
• .context-menu .scroll-arrow:hover
• .context-menu:show-mnemonics .mnemonic-underline

我将它们完全复制到我的 css 文件中，并仅更改背景颜色值作为测试:

.context-menu {
    -fx-skin: "com.sun.javafx.scene.control.skin.ContextMenuSkin";
    -fx-background-color: #006699;
    -fx-background-insets: 0, 1, 2;
    -fx-background-radius: 0 6 6 6, 0 5 5 5, 0 4 4 4;
/*    -fx-padding: 0.666667em 0.083333em 0.666667em 0.083333em;  8 1 8 1 */
    -fx-padding: 0.333333em 0.083333em 0.666667em 0.083333em; /* 4 1 8 1 */
}

.context-menu .separator {
    -fx-padding: 0.0em 0.333333em 0.0em 0.333333em; /* 0 4 0 4 */
}

.context-menu .scroll-arrow {
    -fx-padding: 0.416667em 0.416667em 0.416667em 0.416667em; /* 5 */
    -fx-background-color: #006699;
}

.context-menu .scroll-arrow:hover {
    -fx-background: -fx-accent;
    -fx-background-color: #006699;
    -fx-text-fill: -fx-selection-bar-text;
}

.context-menu:show-mnemonics .mnemonic-underline {
    -fx-stroke: -fx-text-fill;
}

这显然行不通，否则我就不会在这里。无论我改变什么值似乎都没有效果。

我打开了 JavaFX Scene Builder 来看看(旁注，我将其用作最后的手段，因为我发现它使用起来非常笨拙)。我注意到上下文菜单的 css 部分的 Styleable Parts 下列出了 CSSBridge[context-menu] ，这看起来很奇怪。其他像标签这样的东西有Label[label]。

任何人都可以向我解释一下这里发生了什么，因为它似乎忽略了我的上下文菜单的 css 文件并使用 caspian.css 中的默认值？

<小时/>

附加要运行的示例 FXML 文件、css 和 java 代码。

示例.fxml

<?xml version="1.0" encoding="UTF-8"?>

<?import java.lang.*?>
<?import java.net.*?>
<?import javafx.scene.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.image.*?>
<?import javafx.scene.layout.*?>

<AnchorPane fx:id="myroot" xmlns:fx="http://javafx.com/fxml">
  <children>
    <Label text="Right click for options">
      <contextMenu>
        <ContextMenu>
          <items>
            <MenuItem text="Help" />
            <MenuItem text="Me" />
          </items>
        </ContextMenu>
      </contextMenu>
    </Label>
  </children>
  <stylesheets>
    <URL value="@contextcolor.css" />
  </stylesheets>
</AnchorPane>

contextcolor.css

.root {
  -fx-background-color: cornsilk; 
  -fx-padding: 10;
}

.context-menu {
  -fx-background-color: #006699;
  -fx-text-fill: white;
}

.menu-item .label {
  -fx-text-fill: yellow;
}

.menu-item:focused .label {
  -fx-text-fill: white;
}

测试.java

import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;

public class Test extends Application {

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

    @Override
    public void start(Stage stage) throws Exception {
        System.out.println(com.sun.javafx.runtime.VersionInfo.getVersion());

        Parent root = FXMLLoader.load(getClass().getResource("Sample.fxml"));

        stage.setScene(new Scene(root));
        stage.show();
    }
}

Answer 1

这是一个通过 CSS 设置 JavaFX 上下文菜单样式的简单示例。

在 WinXPsp3、Jdk7u6b14ea、JavaFX 2.2b12 上测试。

Java 应用程序

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.*;
import javafx.stage.Stage;

public class ContextColor extends Application {
  public static void main(String[] args) { launch(args); }
  @Override public void start(Stage stage) {
    Label label = new Label("Right click for options");
    label.setContextMenu(new ContextMenu(new MenuItem("Help"), new MenuItem("Me")));
    Scene scene = new Scene(label);
    scene.getStylesheets().add(ContextColor.class.getResource("contextcolor.css").toExternalForm());
    stage.setScene(scene);
    stage.show();
  }
}

CSS样式表

/** contextcolor.css
 *   place in same folder as ContextColor.java
 *   ensure your build system copies this file to the ContextColor.class output directory on build
 */
.root {
  -fx-background-color: cornsilk; 
  -fx-padding: 10;
}

.context-menu {
  -fx-background-color: #006699;
  -fx-text-fill: white;
}

.menu-item .label {
  -fx-text-fill: yellow;
}

.menu-item:focused .label {
  -fx-text-fill: white;
}

我无法告诉您 css 样式未按您预期运行的确切原因。一些可能的原因是:

1. 您没有正确加载它。
2. 您的 css 文件不会复制到您的输出路径。
3. 您的 css 文件已损坏或语法不正确。
4. 您使用的是早期版本的 JavaFX，它很难通过 CSS 设置上下文菜单样式。

更新

查看问题中通过 fxml 加载 css 文件的完整代码，我可以重现您的问题，其中上下文菜单未设置样式。如果我不是在 fxml 中设置样式表，而是在代码中设置场景上的样式表(如我的测试应用程序中所示)，那么一切都会正常工作。

通过 fxml 设置 css 的区别在于，fxml 不是在场景上设置样式表，而是在场景的父根节点上设置样式表。如果在代码中我将样式表添加到父级而不是场景中，那么我最终会得到与 fxml 相同的代码实现行为。因此，这实际上并不是 fxml 本身的问题，而是 JavaFX 2.2 css 处理的继承规则的问题。 IMO，CSS 处理是错误的 - 无论样式表是在场景上还是在场景的根节点上设置，样式都应该相同。

我建议在 http://javafx-jira.kenai.com 提交针对 JavaFX 运行时控件的错误提供您的测试用例以及返回此 StackOverflow 问题的链接，JavaFX 团队将在适当的时候解决该问题。

作为解决方法，现在只需在代码中的场景中设置样式表即可。

<小时/>

更新

此问题的根本原因似乎是 RT-19435: popup control not styled be parent's style sheet declarations .