Как я могу создать компонент ProgressBar в JavaFX

Я пытаюсь добавить пользовательский стиль CSS для компонента JavaFX ProgressBar, но я не мог найти никакой информации по этой теме. Я ищу имена classов css и команды css, которые необходимы для:

  • установить цвет самого индикатора выполнения
  • установите цвет фона индикатора выполнения (не то же самое, что установка цвета фона)
  • добавьте пользовательский текстовый узел поверх индикатора выполнения (чтобы показать разные состояния)

Я отметил этот ответ как сообщество wiki .

Если у вас есть идеи для стиля JavaFX ProgressBar за пределами первоначальных запросов на первоначальное стилирование, отредактируйте это сообщение, чтобы добавить свои идеи для стилизации (или ссылки на них).

установить цвет самого индикатора выполнения

Ответил:

  • JavaFX ProgressBar: как изменить цвет бара?

Ответ демонстрирует

  1. Динамический стиль индикатора выполнения, так что цвет панели изменяется в зависимости от достигнутого прогресса.
  2. Статический стиль индикатора выполнения, который навсегда устанавливает цвет бара на определенный цвет.

JavaFX 7 (caspian) на ПК с ОС Windows:

цветной индикатор выполнения

JavaFX 8 (modena) на Mac:

progress bar mac

Иногда людям нравятся gradleиенты стиля полюсов парикмахерской, например, стиль бутстрапа в полосатом стиле :

  • ProgressBar Animated Javafx

парикмахерская квартет

установите цвет фона индикатора выполнения (не то же самое, что установка цвета фона)

Определите подходящий стиль css для «дорожки» индикатора прогресса:

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

цвет фона хода выполнения

добавьте пользовательский текстовый узел поверх индикатора выполнения (чтобы показать разные состояния)

Ответил:

  • Нарисуйте строку на ProgressBar, например JProgressBar?

строка на индикаторе выполнения

как изменить высоту индикатора выполнения:

Ответил:

  • Как получить узкую панель progres в JavaFX?

Пример CSS:

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

Жозе Переда дает хорошее комплексное решение для узких баров прогресса в своем ответе на:

  • Как получить небольшой ProgressBar в JavaFX

небольшой прогресс

Я ищу имена classов css и команды css

Место для поиска находится в таблице стилей JavaFX по умолчанию.

  • modena.css для Java 8 .
  • caspian.css для Java 7.

Определения стиля ProgressBar для caspian (Java 7):

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

Определения стиля строки выполнения для modena (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 содержит общую информацию об использовании CSS в JavaFX (что несколько отличается от использования CSS в HTML).

  • Несколько FXML с controllerами, общий объект
  • Как подключить источник или JavaDoc в eclipse для любого файла jar, например JavaFX?
  • Полностью настроенные windows JavaFX?
  • Программно изменить внешний вид TableView
  • Автозаполнение ComboBox в JavaFX
  • Как написать текст по кривой Безье?
  • JavaFX запускает другое приложение
  • Использование JavaFX 2.2 Мнемоника (и ускорители)
  • Периодическая фоновая задача JavaFX
  • Воспроизведение аудио с использованием JavaFX MediaPlayer в обычном Java-приложении?
  • Доступ к classу controllerа FXML
  • Давайте будем гением компьютера.