java - JavaFX で ProgressBar コンポーネントのスタイルを設定するにはどうすればよいですか

Question

JavaFX ProgressBar コンポーネントにカスタム CSS スタイルを追加しようとしていますが、トピックに関する情報が見つかりませんでした。以下に必要な css クラス名と css コマンドを探しています。

• プログレスバー自体の色を設定する
• プログレスバーの背景色を設定します (背景色の設定とは異なります)
• プログレスバーの上にカスタムテキストノードを追加します（さまざまな状態を表示するため）

Answer 1

この回答をコミュニティ wikiとしてマークしました。

元の初期スタイリング クエリ以外の JavaFX ProgressBar スタイリングのアイデアがある場合は、この投稿を編集して、スタイリングのアイデアを追加 (またはそれらにリンク) してください。

プログレスバー自体の色を設定する

回答:

• JavaFX ProgressBar:バーの色を変更するには?

答えは

1. プログレス バーの動的なスタイル設定。進行状況に応じてバーの色が変化します。
2. プログレス バーの静的なスタイル。バーの色を定義済みの色に永久に設定します。

Windows PC 上の JavaFX 7 (caspian):

Mac 上の JavaFX 8 (モデナ):

ブートストラップ ストライプ スタイルのようなバーバー ポール スタイルのグラデーションが好きな人もいます。

• ProgressBar アニメーション化された Javafx

プログレスバーの背景色を設定します (背景色の設定とは異なります)

プログレス バーの「トラック」に適切な CSS スタイルを定義します。

.progress-bar > .track {
  -fx-text-box-border: forestgreen;
  -fx-control-inner-background: palegreen;
}

プログレスバーの上にカスタムテキストノードを追加します（さまざまな状態を表示するため）

回答:

• JProgressBar のように、文字列を ProgressBar に描画しますか?

プログレスバーの高さを変更する方法:

回答:

• JavaFXで狭いプログレスバーを取得するには?

サンプル CSS:

.progress-bar .bar { 
    -fx-padding: 1px; 
    -fx-background-insets: 0; 
}

José Pereda は、次の質問への回答で、プログレス バーが狭い場合の優れた包括的なソリューションを提供しています。

• JavaFX で小さな ProgressBar を取得する方法

css クラス名と css コマンドを探しています

確認する場所は、デフォルトの JavaFX スタイル シートです。

• Java 8のmodena.css。
• Java 7 のcaspian.css 。

カスピアン (Java 7) の ProgressBar スタイル定義は次のとおりです。

.progress-bar {
    -fx-skin: "com.sun.javafx.scene.control.skin.ProgressBarSkin";
    -fx-background-color:
        -fx-box-border,
        linear-gradient(to bottom, derive(-fx-color,30%) 5%, derive(-fx-color,-17%));
    -fx-background-insets: 0, 1;
    -fx-indeterminate-bar-length: 60;
    -fx-indeterminate-bar-escape: true;
    -fx-indeterminate-bar-flip: true;
    -fx-indeterminate-bar-animation-time: 2;
}

.progress-bar .bar {
    -fx-background-color:
        -fx-box-border,
        linear-gradient(to bottom, derive(-fx-accent,95%), derive(-fx-accent,10%)),
        linear-gradient(to bottom, derive(-fx-accent,38%), -fx-accent);
    -fx-background-insets: 0, 1, 2;
    -fx-padding: 0.416667em; /* 5 */
}

.progress-bar:indeterminate .bar {
    -fx-background-color: linear-gradient(to left, transparent, -fx-accent);
}

.progress-bar .track {
     -fx-background-color:
        -fx-box-border,
        linear-gradient(to bottom, derive(-fx-color,-15%), derive(-fx-color,2.2%) 20%, derive(-fx-color,60%));
    -fx-background-insets:  0, 1;
}

.progress-bar:disabled {
    -fx-opacity: -fx-disabled-opacity;
}

モデナ (Java 8) のプログレス バー スタイルの定義は次のとおりです。

.progress-bar {
    -fx-indeterminate-bar-length: 60;
    -fx-indeterminate-bar-escape: true;
    -fx-indeterminate-bar-flip: true;
    -fx-indeterminate-bar-animation-time: 2;
}
.progress-bar > .bar {
    -fx-background-color: linear-gradient(to bottom, derive(-fx-accent, -7%), derive(-fx-accent, 0%), derive(-fx-accent, -3%), derive(-fx-accent, -9%) );
    -fx-background-insets: 3 3 4 3;
    -fx-background-radius: 2;
    -fx-padding: 0.75em;
}
.progress-bar:indeterminate > .bar {
    -fx-background-color: linear-gradient(to left, transparent, -fx-accent);
}
.progress-bar > .track {
      -fx-background-color: 
          -fx-shadow-highlight-color,
          linear-gradient(to bottom, derive(-fx-text-box-border, -10%), -fx-text-box-border),
          linear-gradient(to bottom, 
            derive(-fx-control-inner-background, -7%),
            derive(-fx-control-inner-background, 0%),
            derive(-fx-control-inner-background, -3%),
            derive(-fx-control-inner-background, -9%)
          );
    -fx-background-insets: 0, 0 0 1 0, 1 1 2 1;
    -fx-background-radius: 4, 3, 2; /* 10, 9, 8 */
}

JavaFX CSS リファレンス ガイドには、JavaFX での CSS の使用に関する一般的な情報が含まれています (HTML での CSS の使用とは多少異なります)。