为 ControlsFX PopOver 控件设置 JavaFX 的外观

Question

我想自定义 PopOver 控件 JavaFX 的外观。我有一个按钮，按下时 PopOver 出现。这是一个工作示例：

package pruebapopover;

import javafx.application.Application;
import javafx.event.ActionEvent;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.TextField;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;
import org.controlsfx.control.PopOver;

public class PruebaPopOver extends Application {

    @Override
    public void start(Stage primaryStage) {
        PopOver popover = new PopOver();     
        TextField campo = new TextField();      
        popover.setContentNode(campo);

        Button btn = new Button();
        btn.setText("Lanch PopOver");
        btn.setOnAction((ActionEvent event) -> {           
            popover.show(btn);

            ((Parent) popover.getSkin().getNode()).getStylesheets()
                .add(getClass().getResource("PopOver.css").toExternalForm());                   
        });         

        StackPane root = new StackPane();
        root.getChildren().add(btn);

        Scene scene = new Scene(root, 300, 250);            
        primaryStage.setScene(scene);
        primaryStage.show();
    }

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

}

和 PopOver.css:

.popover {       
    -fx-background-color: rgba(255,0,0, 0.1);  /* semi-transparent red */                                     
}
.popover > .content {
        -fx-padding: 10;                        
        -fx-background-color: transparent;                        
}

结果如下： Popover displayed incorrectly

但我期望的是： PopOver displayed correctly

如何去除PopOver控件的白色背景？，为什么不显示半透明？，如何绘制红色箭头？

Answer 1

我们在屏幕上看到的 popover 的视觉方面是 Path 添加了 class border 样式：

path = new Path();
        path.getStyleClass().add("border");

因此 .css 文件将显示为：

.popover > .border {
    -fx-stroke: linear-gradient(to bottom, rgba(0,0,0, .3), rgba(0, 0, 0, .7)) ;
    -fx-stroke-width: 0.5;
    -fx-fill: rgba(255,0,0, 0.5); /* instead -fx-background-color */
    -fx-effect: dropshadow(gaussian, rgba(0,0,0,.2), 10.0, 0.5, 2.0, 2.0);
}

为 ControlsFX PopOver 控件设置 JavaFX 的外观

Skining a ControlsFX PopOver control JavaFX

css

javafx

popover