Как установить конкретное значение CSS для javaFX ProgressBar во время выполнения?

Question

У меня есть обычный CSS для моего ProgressBar:

.progress-bar > .track {
  -fx-background-color: transparent;
}
.progress-bar > .bar {
  -fx-background-color: transparent;
  -fx-background-image: url('/images/progress_bar.png');
  -fx-background-size: 1600px 50px;
  -fx-background-repeat: no-repeat;
}

Образ progress_bar.png 3-цветная полоса, которая меняет цвет с зеленого на красный, когда достигает своего конца. Хорошо работает, когда приложение запущено.

Моя проблема - те жестко закодированные значения для размера фона. Эта работа на Full HD дисплеях отлично, но на 1366x768 большинство желтых / красных частей вырезаны. Я хотел бы установить это свойство во время выполнения, чтобы соответствовать размеру экрана. Это возможно?

Я пытался использовать setStyle() метод в ProgressBar но без успеха. Может быть, я просто делаю это неправильно, поэтому если у кого-то есть рабочий пример...

Я также попытался установить ширину на 100% (вместо px), но это тоже не работает. Он просто показывает сжатый бар, а затем растягивает его до 100% ширины.

Вот изображение:

Answer 1

Я не думаю, что это возможно, используя только CSS. Однако индивидуальные Skin может быть использован, который заменяет barNode с ImageView и использует bar как клип вместо этого:

progress.BarBackgroundProgressBarSkin

public class BarBackgroundProgressBarSkin extends ProgressBarSkin {

    public BarBackgroundProgressBarSkin(ProgressBar control) {
        super(control);
    }

    private ImageView barBackground;

    @Override
    protected void initialize() {
        super.initialize();

        barBackground = new ImageView();

        barBackground.setManaged(false);

        barBackground.setPreserveRatio(false);
        barBackground.getStyleClass().setAll("bar-background");
        int barIndex;

        List<Node> children = getChildren();
        int size = children.size();

        for (barIndex = 0; barIndex < size && !children.get(barIndex).getStyleClass().contains("bar"); barIndex++) {
        }

        Region bar = (Region) children.set(barIndex, barBackground);
        barBackground.setClip(bar);

        // fill the bar for clipping
        bar.setBackground(new Background(new BackgroundFill(Color.WHITE, new CornerRadii(2), new Insets(3, 3, 4, 3))));
    }

    @Override
    protected void layoutChildren(double x, double y, double w, double h) {
        // set pos
        barBackground.setLayoutX(x);
        barBackground.setLayoutY(y);

        // set size
        barBackground.setFitHeight(h);
        barBackground.setFitWidth(w);

        super.layoutChildren(x, y, w, h);
    }

}

style.css

.progress-bar {
    -fx-skin: 'progress.BarBackgroundProgressBarSkin';
}

.progress-bar > .bar-background {
    /* your image goes here */
    -fx-image: url('https://stackru.com/images/0f9425d2830cd9bae70db236e28f94292fbb9648.png');
}

.progress-bar > .track {
    -fx-background-color: transparent;
}

демонстрация

@Override
public void start(Stage primaryStage) {

    ProgressBar progressBar = new ProgressBar();

    StackPane root = new StackPane();
    root.getChildren().add(progressBar);
    progressBar.setPrefSize(300, 18);

    Scene scene = new Scene(root, 200, 200);

    scene.getStylesheets().add(getClass().getResource("style.css").toExternalForm());

    Timeline tl = new Timeline(
            new KeyFrame(Duration.ZERO, new KeyValue(progressBar.progressProperty(), 0d)),
            new KeyFrame(Duration.seconds(10), new KeyValue(progressBar.progressProperty(), 1d, Interpolator.EASE_OUT))
    );

    tl.setCycleCount(Animation.INDEFINITE);
    tl.play();

    primaryStage.setScene(scene);
    primaryStage.show();
}