Изменение отображаемого индикатора выпадающего меню в меню 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

Если Я мог бы как-то скрыть черный треугольник, который сработает, но, похоже, должен быть способ стилизовать кнопку меню для i 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 к моей кнопке MENU, я просто добавил следующее в своем файл 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?

ответ

Смежные вопросы