JavaFX:设置上下文菜单的子菜单样式

时间:2018-01-19 21:32:49

标签: java javafx javafx-8 javafx-2 javafx-css

我正在尝试为ContextMenu的子菜单设置ContextMenu的样式。我希望子菜单的背景颜色为黑色。

我的代码:

Menu fileMenu = new Menu("File", null,
                     new MenuItem("Open"),
                     new MenuItem("Import"));

myContextMenu.getItems.add(fileMenu);

我试过了:

1 - 将样式类添加到文件菜单:

fileMenu.getStyleClass().add("sub-menu");

但是它设置了文件菜单项而不是文件弹出上下文菜单

2 - 以这种方式获取fileMenu的上下文菜单,并为其添加样式类:

ContextMenu parentPopup = fileMenu.getItems().get(0).getParentPopup();
parentPopup.getStyleClass().add("sub-menu");

但是它设置了myContextMenu而不是fileMenu的上下文菜单。

ORIGINAL STYLE

enter image description here

WITH METHOD 1

enter image description here

WITH METHOD 2

enter image description here

===============================================

可验证的例子:

View.fxml

<AnchorPane fx:id="root" maxWidth="300.0" minWidth="300.0" prefHeight="545.0" prefWidth="300.0" style="-fx-background-color: #fff;" xmlns="http://javafx.com/javafx/8.0.60" xmlns:fx="http://javafx.com/fxml/1" fx:controller="sample.Controller">
<children>
  <TabPane fx:id="_tabPane" maxHeight="1.7976931348623157E308" prefWidth="300.0" tabClosingPolicy="UNAVAILABLE" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
     <tabs>
        <Tab text="Files Tab">
           <contextMenu>
              <ContextMenu>
                <items>
                    <Menu mnemonicParsing="false" text="File">
                      <items>
                        <MenuItem mnemonicParsing="false" text="Open" />
                          <MenuItem mnemonicParsing="false" text="Save" />
                      </items>
                    </Menu>
                  <MenuItem mnemonicParsing="false" text="Copy">
                    </MenuItem>
                    <MenuItem mnemonicParsing="false" text="Paste" />
                    <MenuItem mnemonicParsing="false" styleClass="danger" text="Delete" />
                </items>
              </ContextMenu>
           </contextMenu>
        </Tab>
     </tabs></TabPane>
</children>

的style.css

.context-menu {
-fx-background-color: rgba(40, 43, 48, 1);
-fx-background-insets: 0;
-fx-padding: 5px;
-fx-background-radius: 5px;
-fx-border-radius: 5px;
-fx-border-color: rgba(245, 245, 245, 0.1);
-fx-effect: dropshadow( one-pass-box , rgba(0,0,0,0.6) , 6, 0.0 , 0 , 0);
}
/********** Menu Iten ***********/
.menu-item {
-fx-background-radius: 5px;
}
.menu-item:hover, .menu-item:focused {
-fx-background-color: derive(rgba(37, 40, 45, 1), -20%);
}
.menu-item > .graphic-container {
-fx-padding: 0em 0.333em 0em 0em;
}
/********** LABEL ***********/
.menu-item >.label {
-fx-background-color:transparent;
-fx-padding: 0.2em 0.1em 0.2em 0.1em;
-fx-text-fill: rgba(255, 255, 255, 0.6);
-fx-effect: null;
-fx-font-size: 13px;
-fx-font-family: 'Open Sans';
}
.menu-item:focused > .label {
-fx-text-fill: #fff;
}
/******* Critical Item *******/
.danger > .label {
-fx-text-fill: #f04747;
}
.danger:focused > .label {
-fx-text-fill: derive(#ff3434, 25%);
}
/***Menu***/
.menu {
-fx-background-color: #000;
}

0 个答案:

没有答案