In my application, I use MenuButton to provide a drop down list of actions. The default drop indicator on the MenuButton is a black triangle pointing down. I want to change this to a white triangle pointing down to match the color of my text.
Just in case, I don’t understand, here is a screenshot that should clear it.
I tried to place the graphics in the fxml file as follows:
<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 it gives me a black and white triangle:
If I could somehow hide the black triangle that would work, but there seems to be a way to stylize the menu button so that it is white.
Here is an example of Sample.fxml for those who want 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>
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 Test.java to run:
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(); } }
How can I make a black triangle a white triangle?
source share