样式化JavaFX Popover

问题描述

我需要从ControlsFX设置Popover样式，但我没有这样做。

I need to style a Popover from ControlsFX, but am failing to do so.

我有自己的xxx.css样式表，我添加到场景中，我（显然）成功地设置了许多JavaFX控件的样式...

I have my own xxx.css stylesheet that I add to a scene, and I've (obviously) successfully styling many JavaFX Controls...

我在样式表中设置了这个（从ControlsFX中的popover.css复制和修改）：

I have set this in the stylesheet (copied and modified from popover.css in ControlsFX):

.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(30 , 30, 30, .95);
    -fx-effect: dropshadow(gaussian, rgba(0,0,0,.2), 10.0, 0.5, 2.0, 2.0);
}

但是Popover永远不会获得边框样式。如何让Popover选择样式？

But the Popover never gets the border style. How do I get the Popover to pick the style up?

推荐答案

由于 PopOver 显示在另一个窗口中，您不能在主场景上设置样式，而是在 PopOver 控件上设置。

Since the PopOver is displayed in a different window, you can't set your style on the primary scene, but on the PopOvercontrol.

如果你看一下样式如何应用于它的皮肤类中的控件 PopOverSkin ：

If you look at how the style is applied to the control in its skin class PopOverSkin:

stackPane = new StackPane();
stackPane.getStylesheets().add(
            PopOver.class.getResource("popover.css").toExternalForm());
stackPane.getStyleClass().add("popover");

其中 stackPane 可以通过以下方式访问：

where this stackPane can be accessed with:

@Override
public Node getNode() {
    return stackPane;
}

您只需将样式表添加到该堆栈窗格中，就在您之后可以访问皮肤，也就是说，当显示popOver时：

you just need to add your style sheets to that stack pane, right after you have access to the skin, that is, when the popOver is shown:

popOver.show(...);

((Parent)popOver.getSkin().getNode()).getStylesheets()
    .add(getClass().getResource("MyPopOver.css").toExternalForm());

这篇关于样式化JavaFX Popover的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！