Changing the drop down indicator image on a JavaFX MenuButton?

javafx-2, styling

Solution

After some digging I found the answer. Turns out MenuButton does not use an image for the button but instead us `-fx-shape` css property to do this. In the caspian.css file it is applied in the `.menu-button .arrow` and `.menu-button:openvertically .arrow` sections. Since I was already applying the `toolbar-button` to my MenuButton, I simply added the following to the my css file:

.toolbar-button .arrow {
    -fx-background-insets: 1 0 -1 0, 0;
    -fx-background-color: -fx-mark-color, #FFFFFF;
    -fx-padding: 0.25em; /* 3 */
    -fx-shape: "M 0 -3.5 v 7 l 4 -3.5 z";
}

.toolbar-button:hover .arrow {
    -fx-background-insets: 1 0 -1 0, 0;
    -fx-background-color: -fx-mark-highlight-color, -fx-mark-color;
    -fx-padding: 0.25em; /* 3 */
    -fx-shape: "M 0 -3.5 v 7 l 4 -3.5 z";
}

.toolbar-button:openvertically .arrow {
    -fx-padding: 0.166667em 0.333333em 0.166667em 0.333333em; /* 2 4 2 4 */
    -fx-shape: "M 0 0 h 7 l -3.5 4 z";
}

Which even allows me to change the color of the arrow back to black on hover.

Problem

In my application I am using a `MenuButton` to provide a drop down list of actions. The default drop down indicator on a `MenuButton` is a black triangle pointing down. I want to change that to a white triangle pointing down to match the color of my text. Just in case I am not being clear, here is a screen shot that should clear it up. I have tried placing a graphic in the fxml file like so: ``` <MenuButton contentDisplay="RIGHT" graphicTextGap="10.0" layoutX="92.0" layoutY="73.0" mnemonicParsing="false" styleClass="toolbar-button" text="MenuButton"> <graphic> <ImageView fitHeight="4.0" fitWidth="7.0" mouseTransparent="true" preserveRatio="true"> <image> <Image url="@Arrow_Down.png" preserveRatio="true" smooth="false" /> </image> </ImageView> </graphic> <items> <MenuItem mnemonicParsing="false" text="Action 1" /> <MenuItem mnemonicParsing="false" text="Action 2" /> </items> </MenuButton> ``` but that gives me both a black and white triangle: If I could somehow hide the black triangle that would work, but it sure seems like there should be a way to style the menu button for it to be white instead. Here is Sample.fxml for those wanting to help: ``` <?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 id="AnchorPane" prefHeight="200.0" prefWidth="320.0" xmlns:fx="http://javafx.com/fxml"> <children> <MenuButton contentDisplay="RIGHT" graphicTextGap="10.0" layoutX="92.0" layoutY="73.0" mnemonicParsing="false" styleClass="toolbar-button" text="MenuButton"> <graphic> <ImageView fitHeight="4.0" fitWidth="7.0" mouseTransparent="true" preserveRatio="true"> <image> <Image url="@Arrow_Down.png" preserveRatio="true" smooth="false" /> </image> </ImageView> </graphic> <items> <MenuItem mnemonicParsing="false" text="Action 1" /> <MenuItem mnemonicParsing="false" text="Action 2" /> </items> </MenuButton> </children> <stylesheets> <URL value="@test.css" /> </stylesheets> </AnchorPane> ``` The test.css: ``` root { display: block; } .toolbar-button { -fx-background-color: #006699; -fx-padding: 2 4 4 4; -fx-text-base-color: #FFFFFF; -fx-font-weight: bold; -fx-font-size: 12px; } .toolbar-button:hover { -fx-background-color: #B2E1FF; -fx-padding: 2 4 4 4; -fx-text-base-color: #000000; -fx-font-weight: bold; -fx-font-size: 12px; } ``` And the Test.java to run it: ``` package test; 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 { Parent root = FXMLLoader.load(getClass().getResource("Sample.fxml")); stage.setScene(new Scene(root)); stage.show(); } } ``` So how do I make the black triangle a white triangle?

Original source