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

Question

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

• .context菜单
• .context菜单.separator
• .context菜单.scroll箭头
• .context-菜单.scroll箭头：悬停
• .context菜单：显示-助记符.mnemonic下划线

我复制了那些恰好到我的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部分的S​​tyleable部分下面的列表CSSBridge[context-menu]的上下文菜单看起来很奇怪。其他东西，如标签有Label[label]。

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

---

附加示例FXML文件，css和java代码来运行。

Sample.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; 
} 

Test.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

这里是一个SI通过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中难以定义上下文菜单。

更新

望着这里的CSS文件通过FXML装在你的问题的完整代码，我可以重现你的问题，即上下文菜单没有风格。如果不是在fxml中设置样式表，我在代码中设置样式表在场景（如我的测试应用程序），然后它一切正常。

当通过fxml设置css时的区别在于，fxml不是在场景中设置样式表，而是在场景的父根节点上设置。如果在代码中将样式表添加到父级而不是场景中，那么我最终会从代​​码实现中得到与fxml相同的行为。所以这对fxml本身并不是一个问题，而是它与JavaFX 2.2 css处理的继承规则有关。国际海事组织，CSS处理是错误的 - 风格应该是相同的样式表已设置在场景或场景的根节点上。

我建议在你的测试用例和一个返回到这个StackOverflow问题的链接上提交一个针对JavaFX运行时控件的错误http://javafx-jira.kenai.com，并且JavaFX团队将在适当的时候解决问题。

作为一种解决方法，只需在代码中设置样式表即可。

---

更新

针对此问题根源似乎是RT-19435: popup control not styled be parent's style sheet declarations。

Answer 2

import javafx.application.Application; 
import javafx.fxml.FXMLLoader; 
import javafx.scene.Group; 
import javafx.scene.Node; 
import javafx.scene.Parent; 
import javafx.scene.Scene; 
import javafx.scene.control.ContextMenu; 
import javafx.scene.control.Label; 
import javafx.scene.control.MenuItem; 
import javafx.scene.control.TextArea; 
import javafx.scene.image.Image; 
import javafx.scene.image.ImageView; 
import javafx.scene.layout.GridPane; 
import javafx.stage.Stage; 
import javafx.geometry.Insets; 

/** 
* 
* @author nidhi.a.agrawal 
*/ 
public class Context extends Application { 

    @Override 
    public void start(Stage stage) throws Exception { 
     // Parent root = FXMLLoader.load(getClass().getResource("Sample.fxml")); 

     TextArea notification = new TextArea(); 
     ContextMenu contextMenu = new ContextMenu(); 

     Node itemIcon = new ImageView(new Image(getClass().getResourceAsStream("icon_createnew.png"))); 
     Node con_test_hierIcon = new ImageView(new Image(getClass().getResourceAsStream("icon_Configure_Test _Hierachy.png"))); 
     Node cutIcon = new ImageView(new Image(getClass().getResourceAsStream("icon_cut.png"))); 
     Node copyIcon = new ImageView(new Image(getClass().getResourceAsStream("icon_copy.png"))); 
     Node pasteIcon = new ImageView(new Image(getClass().getResourceAsStream("icon_paste.png"))); 
     Node insertIcon = new ImageView(new Image(getClass().getResourceAsStream("icon_insert.png"))); 
     Node editIcon = new ImageView(new Image(getClass().getResourceAsStream("icon_edit.png"))); 
     Node renameIcon = new ImageView(new Image(getClass().getResourceAsStream("icon_rename.png"))); 
     Node deleteIcon = new ImageView(new Image(getClass().getResourceAsStream("icon_delete.png"))); 
     Node tagIcon = new ImageView(new Image(getClass().getResourceAsStream("icon_tag.png"))); 
     Node refreshIcon = new ImageView(new Image(getClass().getResourceAsStream("icon_refresh.png"))); 


     MenuItem sap_new = new MenuItem("Create New Sap System", itemIcon); 
     MenuItem con_test_hier = new MenuItem("Configure Test Hierarchy", con_test_hierIcon); 
     MenuItem cut = new MenuItem("Cut", cutIcon); 
     MenuItem copy = new MenuItem("Copy", copyIcon); 
     MenuItem paste = new MenuItem("Paste", pasteIcon); 
     MenuItem insert = new MenuItem("Insert", insertIcon); 
     MenuItem edit = new MenuItem("Edit", editIcon); 
     MenuItem rename = new MenuItem("Rename", renameIcon); 
     MenuItem delete = new MenuItem("Delete", deleteIcon); 
     MenuItem tag = new MenuItem("Tag", tagIcon); 
     MenuItem refresh = new MenuItem("Refresh", refreshIcon); 

     contextMenu.getItems().addAll(sap_new,con_test_hier,cut,copy,paste,insert,edit,rename,delete,tag,refresh); 
notification.setContextMenu(contextMenu); 
Group root = new Group(); 
     root.getChildren().add(notification); 
     Scene scene = new Scene(root); 
      scene.getStylesheets().add(Context.class.getResource("contextcolor.css").toExternalForm()); 
     stage.setScene(scene); 
     stage.show(); 

     } 
public static void main(String[] args) { 
     launch(args); 
    } 
} 

对于这些菜单我已syles这样的：---

。

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

.context-menu { 
    -fx-background-color: #C8CFD7; 
    -fx-border-color: #BBC2CC; 
    -fx-text-fill: white; 
} 


.menu-item .label { 
    -fx-fill:red; 
    -fx-font-family:tahoma; 
    -fx-font-size: 12px;; 
    -fx-stroke:#C8CFD7; 
    -fx-strok-width:.25; 
} 

.menu-item:focused .label { 
    -fx-text-fill: white; 
} 
.menu-item{ 
    -fx-border-color: #DDDEE2 transparent #B9C0C8 transparent; 

    -fx-border-width:0.50px; 

} 
.menu-item:focused { 
    -fx-background: -fx-accent; 
    -fx-background-color: #7092BE; 
    -fx-text-fill: -fx-selection-bar-text; 
} 

它运行良好，我能够改变背景颜色，边框颜色，设置图标等