JAVAFX 2.0スライダのスライダアイコンをイメージに変更するにはどうすればよいですか？

Question

アイコンを画像に変更したいのですが、CSSリファレンスガイドを見てきましたが、関連するものが見つからないようです。それも可能ですか？メインJavaFXスクリプトからCSSを使用するか宣言的に使用するかは関係ありません。

Answer 1

AudioPlayerにカスタムスライダのレンダリングのサンプルコードとイメージを見てみましょう。

また、対話型のコントロールではなくフィードバックを求める場合は、JFXtras libraryに多数のゲージがあります。

不変式の答えによって指摘されたセレクタを使用したサンプルCSSです。画像全体を表示するには、画像サイズの半分に-fx-padding指定を追加する必要があることに注意してください。

/** slider.css 
place in same directory as SliderCss.java 
ensure build system copies the css file to the build output path */ 

.slider .thumb { 
    -fx-background-image :url("http://icons.iconarchive.com/icons/double-j-design/diagram-free/128/piggy-bank-icon.png"); 
    -fx-padding: 64; 
} 
/* Icon license: creative commons with attribution: http://www.doublejdesign.co.uk/products-page/icons/diagram */ 

サンプルアプリ：

import javafx.application.Application; 
import javafx.scene.Scene; 
import javafx.scene.control.*; 
import javafx.scene.layout.*; 
import javafx.stage.Stage; 

public class SliderCss extends Application { 
    public static void main(String[] args) { launch(args); } 
    @Override public void start(Stage stage) throws Exception { 
    VBox layout = new VBox(); 
    layout.setStyle("-fx-background-color: cornsilk; -fx-padding: 10px;"); 
    layout.getChildren().setAll(new Slider()); 
    layout.getStylesheets().add(getClass().getResource("slider.css").toExternalForm()); 
    stage.setScene(new Scene(layout)); 

    stage.show(); 
    } 
} 

サンプルプログラムの出力：

Answer 2

あなたはCSS

を使用して、スライダのつまみを変更することができます0

.slider .thumb{ 
-fx-background-image :url("your image"); 
...// more customization  
} 

Answer 3

親指の背景色を削除し、画像（丸いボタンのような半透明のもの）のみを使用する場合は、-fx-background-color：transparent;あなたが背景を持っていない限り、

.slider .thumb { 
    -fx-background-image :url("sider-round-thumb-image.png"); 
    -fx-padding: 16; /* My thumb image is 33x33 pixels,so padding is half */ 
    -fx-pref-height: 28; 
    -fx-pref-width: 28; 

    -fx-background-color:transparent; 
}