java - Change style of progressbar javaFX -
the default appearance of progressbar
blue bar moves across control progress increases:
i have image (of train) resource in application. possible, using css (or technique) have image progress across control instead of default blue bar? should like:
just use external css file , set background image on bar. bar represented region
style class bar
(see docs), need like
.progress-bar > .bar { -fx-background-image: url("http://upload.wikimedia.org/wikipedia/commons/c/ce/train_icon_small.png"); -fx-background-position: right ; -fx-background-color: transparent ; -fx-background-repeat: repeat-x ; }
complete example:
import javafx.application.application; import javafx.concurrent.task; import javafx.scene.scene; import javafx.scene.control.button; import javafx.scene.control.progressbar; import javafx.scene.layout.vbox; import javafx.stage.stage; public class trainprogressbar extends application { @override public void start(stage primarystage) { progressbar progressbar = new progressbar(); progressbar.setprogress(0); button startbutton = new button("start"); startbutton.setonaction(e -> { startbutton.setdisable(true); task<void> task = new task<void>() { @override public void call() throws exception { (int = 0; < 100; i++) { thread.sleep(20); updateprogress(i, 100); } updateprogress(100, 100); return null ; } }; progressbar.progressproperty().bind(task.progressproperty()); task.setonsucceeded(evt -> startbutton.setdisable(false)); new thread(task){{setdaemon(true);}}.start(); }); vbox root = new vbox(15, progressbar, startbutton); scene scene = new scene(root, 250, 100); scene.getstylesheets().add("train-progress-bar.css"); primarystage.setscene(scene); primarystage.show(); } public static void main(string[] args) { launch(args); } }
with train-progress-bar.css:
.root { -fx-padding: 10 ; -fx-alignment: center ; } .progress-bar > .bar { -fx-background-image: url(http://upload.wikimedia.org/wikipedia/commons/c/ce/train_icon_small.png); -fx-background-position: right ; -fx-background-color: transparent ; -fx-background-repeat: repeat-x ; }
Comments
Post a Comment