¿Cómo puedo diseñar el componente ProgressBar en JavaFX?

Intento agregar estilos personalizados de css al componente JavaFX ProgressBar, pero no pude encontrar ninguna información sobre el tema. Estoy buscando los nombres de clase css y los comandos css que se requieren para:

  • establecer el color de la barra de progreso en sí
  • establecer el color de fondo de la barra de progreso (no es lo mismo que configurar el color de fondo)
  • agregue un nodo de texto personalizado en la parte superior de la barra de progreso (para mostrar los diferentes estados)

He marcado esta respuesta como wiki de la comunidad .

Si tiene ideas para el estilo de JavaFX ProgressBar fuera de las consultas de estilo iniciales originales, edite esta publicación para agregar sus ideas de estilo (o para vincularlas).

establecer el color de la barra de progreso en sí

Respondido en:

  • JavaFX ProgressBar: ¿cómo cambiar el color de la barra?

La respuesta demuestra

  1. Estilo dynamic de la barra de progreso, de modo que el color de la barra cambia según la cantidad de progreso realizado.
  2. Estilo estático de la barra de progreso, que simplemente establece el color de la barra para siempre en un color definido.

JavaFX 7 (caspio) en una PC con Windows:

barra de progreso coloreada

JavaFX 8 (modena) en una Mac:

Barra de progreso mac

A veces a las personas les gustan los gradientes de estilo de poste de barbería, como el estilo de rayas bootstrap :

  • ProgressBar Animated Javafx

cuarteto de barbería

establecer el color de fondo de la barra de progreso (no es lo mismo que configurar el color de fondo)

Defina un estilo CSS apropiado para la “pista” de la barra de progreso:

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

color de fondo de barra de progreso

agregue un nodo de texto personalizado en la parte superior de la barra de progreso (para mostrar los diferentes estados)

Respondido en:

  • Dibuja una cadena en una barra de progreso, como JProgressBar?

cadena en una barra de progreso

cómo cambiar la altura de una barra de progreso:

Respondido en:

  • ¿Cómo obtener una barra de progreso estrecha en JavaFX?

Ejemplo de CSS:

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

José Pereda ofrece una buena solución integral para barras de progreso estrechas en su respuesta a:

  • Cómo obtener una pequeña ProgressBar en JavaFX

pequeño progreso

Estoy buscando los nombres de clase css y los comandos css

El lugar para buscar está en la hoja de estilo predeterminada de JavaFX.

  • modena.css para Java 8 .
  • caspian.css para Java 7.

Las definiciones de estilo ProgressBar para caspian (Java 7) son:

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

Las definiciones de estilo de barra de progreso para modena (Java 8) son:

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

La guía de referencia CSS de JavaFX contiene información general sobre el uso de CSS en JavaFX (que difiere un tanto del uso de CSS en HTML).