Borderpane with color gradient

Question

I would like to create background BorderPane with green gradient color like this example below. The question is how I have to do this with Java code?

For example:

.linear-grad2{
   -fx-background-color: linear-gradient(from 25% 25% to 100% 100%, #dc143c, #32cd32);
}

I would like to change the color with color picker. I'm not aware how I can do this with css code.

Answer 1

Hej Peter,

I did this some time ago like this:

package de.professional_webworkx.blog.colorgradient;

import javafx.application.Application;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.scene.Scene;
import javafx.scene.control.ColorPicker;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.Pane;
import javafx.scene.layout.VBox;
import javafx.scene.paint.Color;
import javafx.stage.Stage;

/**
 *
 * @author ottp
 */
public class ColorGradient extends Application {

    @Override
    public void start(Stage primaryStage) {

        final Pane pane = new BorderPane();
        pane.setPrefWidth(300);
        pane.setPrefHeight(200);
        pane.setStyle("-fx-background-color: linear-gradient(from 25% 25% to 100% 100%, #dc143c, #661a33)");


        final ColorPicker picker = new ColorPicker();
        picker.setOnAction(new EventHandler<ActionEvent>() {

            @Override
            public void handle(ActionEvent t) {
                Color value = picker.getValue();
                String colorString = value.toString();
                String substring = colorString.substring(2, colorString.length()-2);
                pane.setStyle("-fx-background-color: linear-gradient(from 25% 25% to 100% 100%, #" + substring + ", #661a33)");
            }
        });


        VBox vBox = new VBox();
        vBox.getChildren().add(pane);
        vBox.getChildren().add(picker);

        Scene scene = new Scene(vBox);
        primaryStage.setScene(scene);
        primaryStage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }

}

Take it as a starting point for your own solution.. It changes only the first color value.

Patrick