web-dev-qa-db-fra.com

Comment styliser le composant ProgressBar dans JavaFX

J'essaie d'ajouter un style CSS personnalisé au composant JavaFX ProgressBar mais je n'ai trouvé aucune information sur le sujet. Je cherche les noms de classe css et les commandes css nécessaires pour: 

  • définir la couleur de la barre de progression elle-même 
  • définir la couleur de fond de la barre de progression (différent de la définition de la couleur de fond) 
  • ajouter un nœud de texte personnalisé en haut de la barre de progression (pour afficher les différents états)
javacssjavafx-2
9
Yoav Kadosh

J'ai marqué cette réponse comme community wiki . 

Si vous avez des idées concernant le style de JavaFX ProgressBar en dehors des requêtes de style initiales, modifiez ce message pour ajouter vos idées de style (ou pour les lier).

définir la couleur de la barre de progression elle-même

Répondu en:

La réponse démontre

  1. Style dynamique de la barre de progression, de sorte que la couleur de la barre change en fonction de la progression.
  2. Style statique de la barre de progression, qui définit simplement la couleur de la barre pour toujours à une couleur définie.

JavaFX 7 (caspienne) sur un PC Windows:

colored progress bar

JavaFX 8 (modène) sur un Mac:

progress bar mac

Parfois, les gens aiment les dégradés de style barbershop, comme le style rayé bootstrap :

barbershop quartet

définir la couleur d'arrière-plan de la barre de progression (différent de la définition de la couleur d'arrière-plan)

Définissez un style css approprié pour la "piste" de la barre de progression:

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

progress-bar background color

ajouter un nœud de texte personnalisé en haut de la barre de progression (pour afficher les différents états)

Répondu en:

string on a progress bar

comment changer la hauteur d'une barre de progression:

Répondu en: 

Exemple de CSS: 

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

José Pereda donne une solution complète de Nice pour les barres de progression étroites dans sa réponse à:

small progress

Je cherche les noms de classe css et les commandes css 

L'endroit à regarder se trouve dans la feuille de style JavaFX par défaut.

Les définitions de style ProgressBar pour la caspienne (Java 7) sont les suivantes:

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

Les définitions de style de barre de progression pour modena (Java 8) sont les suivantes:

.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 */
}

Le Guide de référence CSS JavaFX contient des informations générales sur l’utilisation de CSS dans JavaFX (qui diffère quelque peu de l’utilisation de CSS en HTML).

44
jewelsea

fichier css:

.green-bar {
    -fx-accent: #27BB9A;
}

assigner cette classe à la barre de progression 

0
Ion Scorobogaci