更改JavaFX MenuButton上的下拉指示符圖像？

在我的應用程序中，我使用了一個MenuButton來提供操作的下拉列表。 MenuButton上的默認下拉指示符是朝下的黑色三角形。我想將它改爲一個白色的三角形，以便與我的文字顏色相匹配。更改JavaFX MenuButton上的下拉指示符圖像？

以防萬一我不清楚，這裏是一個屏幕截圖，應該清除它。

black triangle

我試圖放置圖形在FXML文件像這樣：

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

但是這給了我兩個黑色和白色的三角：

white and black triangle

如果我可以以某種方式隱藏可以工作的黑色三角形，但它確實似乎應該有一種方法來爲我設計菜單按鈕t代替白色。

這裏是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 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; 
}

而且Test.java運行它

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

那麼如何讓黑色三角形變成白色三角形呢？

來源

2012-06-20 Jacob Schoen

經過一番挖掘，我找到了答案。原來，MenuButton不使用圖片作爲按鈕，而是使用我們的-fx-shape css屬性來完成此操作。在caspian.css文件中，它應用於.menu-button .arrow和.menu-button:openvertically .arrow部分。既然我已經應用toolbar-button我的菜單按鈕，我只是簡單地添加以下到我的CSS文件：

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

這甚至讓我改變箭頭的顏色返黑懸停。

來源

2012-06-20 16:58:02

更改JavaFX MenuButton上的下拉指示符圖像？

回答

相關問題