JavaFX的2.0我怎样才能改变一个滑块的滑动图标的形象吗？(JAVAFX 2.0 How can

我想要的图标改变我的形象，我已经通过CSS参考指南看了，但我似乎无法找到任何有关。它甚至有可能？如果是使用CSS或声明的主要的JavaFX脚本也无所谓。

Answer 1:

看看示例代码和图片的自定义滑块如何在此呈现AudioPlayer 。

另外， JFXtras库有许多计，如果你只是想反馈，而不是一个交互式的控制。

下面是使用选择一些示例CSS指出了不变的回答。请注意，我需要在图像尺寸的一半，以便添加一个-fx-填充规范整个图像显示量。

/** 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改变滑块的拇指

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

Answer 3:

我知道这是一个老问题，但我觉得我有这个解决方案的贡献。

如果我们想用一个独特的滑盖或者我们要修改所有的滑块的外观以前的解决方案是绰绰有余。但是，如果我们只需要修改只有一个滑块，我们需要另一种方法的出现。

我们该怎么办是想象，我们应用了基于风格的主要scene 。但我们不希望添加其他的css文件只是修改滑块的行为。所以，问题是： 我们如何可以使用我们的基地修改滑盖造型css文件？

该解决方案是简单setId()的所有控件具有此特性。现在让我们来看看主类：

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

/**
 * Created by teocci.
 *
 * @author teocci@yandex.com on 2018-Jul-06
 */
public class CustomSliderThumb extends Application
{
    public static void main(String[] args) { launch(args); }

    @Override
    public void start(Stage stage) throws Exception
    {
        Slider slider = new Slider();
        slider.setId("custom-slider");

        VBox layout = new VBox();
        layout.setId("base-layout");
        layout.getChildren().setAll(slider);

        Scene scene = new Scene(layout);
        scene.getStylesheets().add("css/style.css");

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

在这个例子中，我们创建了一个slider ，并设置其ID为"custom-slider" 。然后，我们添加了这个滑块VBox中的布局，最后，我们添加了布局到现场具有style.css

现在，让我们检查style.css以及如何使用id选择应用自定义样式。记住指定-fx-pref-height和-fx-pref-width与图像的尺寸，或者如果是正方形-fx-padding一半的图像边尺寸，用于显示整个图像。

#custom-slider .thumb {
    -fx-background-image :url("https://i.imgur.com/SwDjIg7.png");
    -fx-background-color: transparent;

    -fx-padding: 24;

    /*-fx-pref-height: 48;*/
    /*-fx-pref-width: 48;*/
}

#custom-slider .track {
    -fx-background-color: #2F2F2F;
}

#base-layout {
    -fx-background-color: lightgray;
    -fx-padding: 10px;
}

示例程序的输出：

Answer 4:

如果要删除拇指背景颜色和只有图像（半透明的像圆形按钮），那么你也应该-fx背景颜色：透明; 除非你将有背景

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

文章来源: JAVAFX 2.0 How can i change the slider icon in a slider to an image?