4

私のアプリケーションではMenuButton、アクションのドロップダウン リストを提供するために を使用しています。のデフォルトのドロップダウン インジケータは、MenuButton下向きの黒い三角形です。テキストの色に合わせて、下向きの白い三角形に変更したいと思います。

私が明確でない場合に備えて、これはそれを明確にするスクリーンショットです.

黒い三角形

次のように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>

しかし、それは私に黒と白の両方の三角形を与えます:

白と黒の三角形

なんとかして黒い三角形を隠すことができればうまくいきますが、代わりにメニューボタンのスタイルを白にする方法があるはずです。

支援したい人のための 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();
    }
}

では、黒い三角形を白い三角形にするにはどうすればよいでしょうか。

4

1 に答える 1

8

掘り下げた後、答えを見つけました。MenuButton はボタンに画像を使用しないことが判明しましたが、代わりに-fx-shapecss プロパティを使用してこれを行います。caspian.css ファイルでは、セクション.menu-button .arrowと.menu-button:openvertically .arrowセクションに適用されます。私はすでにtoolbar-buttonMenuButton に を適用していたので、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-20T16:58:02.350 に答える