问题 如何使用css为JavaFX ContextMenu设置样式？


我试图改变一种风格 ContextMenu 使用单独的CSS文件的项目。我查看了caspian.css部分，找到了以下定义：

  • 。上下文菜单
  • .context-menu .separator
  • .context-menu .scroll-arrow
  • .context-menu .scroll-arrow：悬停
  • .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场景生成器来看一下（旁注我把它作为最后的手段使用，因为我发现使用它非常笨拙）。我注意到在css部分的样式部分下面是列表的上下文菜单 CSSBridge[context-menu] 这看起来很奇怪。像Label这样的其他东西 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();
    }
}

10239
2018-06-20 20:50


起源
提供 这里有关于SceneBuilder的反馈 - jewelsea
本周末会这样做。谢谢你的链接。 - Jacob Schoen

答案:

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

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

java app

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处理是错误的 - 无论是在场景上还是在场景的根节点上设置样式表，样式都应该相同。

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

作为一种解决方法，现在只需在代码中在场景上设置样式表。

更新

这个问题的根本原因似乎是 RT-19435：未设置样式的弹出控件是父级的样式表声明。


14
2018-06-20 21:29


我运行的是2.1版，因此更新到2.2.0-beta版。我跑了你的样品，它的工作原理。由于我使用的是FXML文件，因此我将您的示例转换为FXML并再次运行。不幸的是，它不起作用。我打算用FXML更新我的问题，如果你不介意看看会很感激。 - Jacob Schoen
感谢您发布代码jschoen，我根据您发布的代码更新了我的答案。 - jewelsea
我创造了新问题 ＃RT-22871 如建议。谢谢您的帮助。 - Jacob Schoen
谢谢，这对我来说也是一个问题。 - Michael Scott

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

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


1
2017-07-08 06:44



热门问题

不使用eval / new函数的JavaScript模板库 当涉及内部类时，Java继承如何工作 .NET Windows服务的奇怪问题 在.ipa或.app下查找App ID 快速入门XSLT参考[关闭] 如何找出Android应用程序中未使用的资源 Ruby中并发的同步方法[重复] 将std :: chrono :: system_clock :: time_point转换为struct timeval并返回 Google Drive API V3（javascript）更新文件内容 Bootstrap 3.0 - 将元素推到底部 受密码保护的.NET ClickOnce部署？ 如何用postgresql安装wordpress coq Set或Type如何成为命题 硒滚动元素进入（中心）视图 在Spring Transaction JUnit测试中自动装配Hibernate会话的正确方法 Git的Dockerfile策略 如何在FOS_PICKFOLDER中使用IFileDialog，同时仍在对话框中显示文件名 在Firefox扩展中复制Google Chrome浏览器操作弹出效果 CakePHP找到MAX 芹菜 - 完成任务的召唤功能 从使用fmemopen创建的流中读取宽字符 .NET是否为每个程序集创建一个字符串实习池？ DefaultModelBinder不绑定嵌套模型 Navigator.MediaDevices.getUserMedia（）使用了哪些相机通信标准？ 选择命名空间名称时应该知道什么？ cout Swagger Codegen CLI Java客户端 - 如何正确使用它 一个很好的哈希函数用于采访整数，字符串？ Maven 3 ciManagement配置的目的是什么？ 如何通过语言文化获取代码页？
licensed under cc by-sa 3.0 with attribution.
隐私政策 往来