web-dev-qa-db-ja.com

CSSでJavaFXメニューとそのアイテムのスタイルを設定するにはどうすればよいですか？

FXMLで次のように設定されたMenuBarがあります。

<MenuBar VBox.vgrow="NEVER">
    <menus>
        <Menu mnemonicParsing="true" text="_File">
            <items>
                <MenuItem mnemonicParsing="true" text="_New Project"/>
                <MenuItem mnemonicParsing="true" text="_Open…"/>
                <MenuItem mnemonicParsing="false" text="Quit"/>
            </items>
        </Menu>
    </menus>
</MenuBar>

これにより、次のようなメニューが生成されます。

enter image description here

次のCSSを使用して、MenuBarとMenuFileのスタイルを設定しました。

.menu-bar { /* The menu bar itself */ }
.menu { /* The File menu item */ }
.menu:showing { /* menu when it's being shown (activated) */ }
.menu .label { /* Styles the text on a menu item */ }
.menu:showing .label { /* Styles the text on a menu item when activated */ }

ただし、表示されるメニューのスタイルを設定できませんでした。

私はそれをContextMenuとして扱ってみました：

.context-menu {
    -fx-background-color: red;
}

何もしません（ContextMenuではないので、ここで大きな驚きはありません）。

menu-itemとmenu-buttonのスタイリングを試しました。

.menu-button,
.menu-item {
    -fx-background-color: red;
}

これにより、メニュー（File）は変更されますが、表示されるメニュー項目やメニューは変更されません。

substructure.itemsと呼ばれるものを選択しようとしましたが、存在しないようです。

質問

  1. メニュー（/New Project、Open ...、Quitを保持しているコンテナ）をどのように選択/スタイルしますか？
  2. メニュー内の個々のMenuItemを選択/スタイル設定するにはどうすればよいですか？

明確化

スタイリングしようとしている要素を明確にするために、スタイリングしたいコンポーネントの概要を示すこの画像を追加しました。

enter image description here

cssjavafxmenujavafx-2javafx-8
11
crush

-fx-skinの.context-menuプロパティを忘れたと思います。
メニューボタンとメニュー項目のスタイルを設定する方法 に従ってください。

6
Uluk Biy
.menu-bar {
    -fx-background-color: black ;
    -fx-opacity: 0.5;
    -fx-border-width: 2.0;

}
.menu-bar .label {
    -fx-font-size: 14.0 pt;
    -fx-font-family: "Bookman Old Style";
    -fx-text-fill: white;
    -fx-font-weight: bold; 
    -fx-padding: 10.0px;

}
.menu-bar .menu-button:hover, .menu-bar .menu-button:focused, .menu-bar .menu-button:showing {
    -fx-background: black ;
    -fx-opacity: 0.5;
    -fx-text-fill: white;
}

.menu-item {
    -fx-padding: 0.0em 0.0em 0.0em 0.0em;
    -fx-text-fill: black;
    -fx-background: darkgray ;
}
.menu-item .label{
    -fx-font-size: 14.0 pt;
    -fx-text-fill: black;
}
.menu-item .label:hover{
    -fx-font-size: 14.0 pt;
    -fx-background: black ;
    -fx-text-fill: white;
}
.context-menu {
    -fx-skin: "com.Sun.javafx.scene.control.skin.ContextMenuSkin";
    -fx-background-color:white ;
    -fx-border-width: 0.2px;
    -fx-border-color: black;
    /** -fx-background-insets: 0.0, 1.0, 2.0;
    -fx-background-radius: 0.0 6.0 6.0 6.0, 0.0 5.0 5.0 5.0, 0.0 4.0 4.0 4.0;
    -fx-padding: 0.333333em 0.083333em 0.666667em 0.083333em; 
    -fx-opacity: 0.9;*/
}
0
Rashmin Mevada