样式 – 如何使用CSS设置JavaFX ContextMenu的样式?

前端之家收集整理的这篇文章主要介绍了样式 – 如何使用CSS设置JavaFX ContextMenu的样式?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在尝试使用单独的CSS文件来更改ContextMenu项目的样式.我查看了caspian.css部分,发现了以下定义:

> .context-menu
> .context-menu .separator
> .context-menu .scroll-arrow
> .context-menu .scroll-arrow:hover
> .context-menu:show-mnemonics .mnemonic-underline

我把这些完全复制到了我的css文件,并且只是改变了背景颜色值作为测试:

  1. .context-menu {
  2. -fx-skin: "com.sun.javafx.scene.control.skin.ContextMenuSkin";
  3. -fx-background-color: #006699;
  4. -fx-background-insets: 0,1,2;
  5. -fx-background-radius: 0 6 6 6,0 5 5 5,0 4 4 4;
  6. /* -fx-padding: 0.666667em 0.083333em 0.666667em 0.083333em; 8 1 8 1 */
  7. -fx-padding: 0.333333em 0.083333em 0.666667em 0.083333em; /* 4 1 8 1 */
  8. }
  9.  
  10. .context-menu .separator {
  11. -fx-padding: 0.0em 0.333333em 0.0em 0.333333em; /* 0 4 0 4 */
  12. }
  13.  
  14. .context-menu .scroll-arrow {
  15. -fx-padding: 0.416667em 0.416667em 0.416667em 0.416667em; /* 5 */
  16. -fx-background-color: #006699;
  17. }
  18.  
  19. .context-menu .scroll-arrow:hover {
  20. -fx-background: -fx-accent;
  21. -fx-background-color: #006699;
  22. -fx-text-fill: -fx-selection-bar-text;
  23. }
  24.  
  25. .context-menu:show-mnemonics .mnemonic-underline {
  26. -fx-stroke: -fx-text-fill;
  27. }

这显然不行,否则我不会在这里.似乎没有任何影响,无论我改变什么价值.

我打开了JavaFX Scene Builder来看看(旁注,我用这个作为最后的手段,因为我发现它很笨拙的使用).我注意到在CSS列表的上下文菜单的CSS样式部分,列出了CSSBridge [上下文菜单],这似乎是奇怪的. Label等标签标签.

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

附加样品FXML文件,css和java代码运行.

Sample.fxml

  1. <?xml version="1.0" encoding="UTF-8"?>
  2.  
  3. <?import java.lang.*?>
  4. <?import java.net.*?>
  5. <?import javafx.scene.*?>
  6. <?import javafx.scene.control.*?>
  7. <?import javafx.scene.image.*?>
  8. <?import javafx.scene.layout.*?>
  9.  
  10. <AnchorPane fx:id="myroot" xmlns:fx="http://javafx.com/fxml">
  11. <children>
  12. <Label text="Right click for options">
  13. <contextMenu>
  14. <ContextMenu>
  15. <items>
  16. <MenuItem text="Help" />
  17. <MenuItem text="Me" />
  18. </items>
  19. </ContextMenu>
  20. </contextMenu>
  21. </Label>
  22. </children>
  23. <stylesheets>
  24. <URL value="@contextcolor.css" />
  25. </stylesheets>
  26. </AnchorPane>

contextcolor.css

  1. .root {
  2. -fx-background-color: cornsilk;
  3. -fx-padding: 10;
  4. }
  5.  
  6. .context-menu {
  7. -fx-background-color: #006699;
  8. -fx-text-fill: white;
  9. }
  10.  
  11. .menu-item .label {
  12. -fx-text-fill: yellow;
  13. }
  14.  
  15. .menu-item:focused .label {
  16. -fx-text-fill: white;
  17. }

Test.java

  1. import javafx.application.Application;
  2. import javafx.fxml.FXMLLoader;
  3. import javafx.scene.Parent;
  4. import javafx.scene.Scene;
  5. import javafx.stage.Stage;
  6.  
  7. public class Test extends Application {
  8.  
  9. public static void main(String[] args) {
  10. Application.launch(Test.class,args);
  11. }
  12.  
  13. @Override
  14. public void start(Stage stage) throws Exception {
  15. System.out.println(com.sun.javafx.runtime.VersionInfo.getVersion());
  16.  
  17. Parent root = FXMLLoader.load(getClass().getResource("Sample.fxml"));
  18.  
  19. stage.setScene(new Scene(root));
  20. stage.show();
  21. }
  22. }

解决方法

这是一个简单的例子,通过CSS来设计JavaFX上下文菜单.

测试在WinXPsp3,Jdk7u6b14ea,JavaFX 2.2b12.

java应用程序

  1. import javafx.application.Application;
  2. import javafx.scene.Scene;
  3. import javafx.scene.control.*;
  4. import javafx.stage.Stage;
  5.  
  6. public class ContextColor extends Application {
  7. public static void main(String[] args) { launch(args); }
  8. @Override public void start(Stage stage) {
  9. Label label = new Label("Right click for options");
  10. label.setContextMenu(new ContextMenu(new MenuItem("Help"),new MenuItem("Me")));
  11. Scene scene = new Scene(label);
  12. scene.getStylesheets().add(ContextColor.class.getResource("contextcolor.css").toExternalForm());
  13. stage.setScene(scene);
  14. stage.show();
  15. }
  16. }

css样式表

  1. /** contextcolor.css
  2. * place in same folder as ContextColor.java
  3. * ensure your build system copies this file to the ContextColor.class output directory on build
  4. */
  5. .root {
  6. -fx-background-color: cornsilk;
  7. -fx-padding: 10;
  8. }
  9.  
  10. .context-menu {
  11. -fx-background-color: #006699;
  12. -fx-text-fill: white;
  13. }
  14.  
  15. .menu-item .label {
  16. -fx-text-fill: yellow;
  17. }
  18.  
  19. .menu-item:focused .label {
  20. -fx-text-fill: white;
  21. }

我无法告诉你为什么你的CSS样式没有按你所期望的功能的确切原因.
一些可能的原因是:

>您没有正确加载它.
>您的css文件不会复制到您的输出路径.
>您的css文件被破坏或语法错误.
>您正在使用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.

猜你在找的CSS相关文章