JavaFX 8-在右侧的TitledPane中添加图形 [英] JavaFX 8 - Add a graphic to a TitledPane on the right side
问题描述
我想在TitledPane
的标题上添加一个小图标.因此,我设置了一个空标题,并添加了一个包含Label
和ImageView
的HBox
作为图形.这样,图标显示在文本结尾附近.我希望它始终显示在TitledPane
的右边框旁边.
我怎样才能做到这一点?
我还尝试使用BorderPane
并将Label
添加到中间,并在右侧添加ImageView
,但是BorderPane
没有获得TitledPane的最大大小.
所以我尝试将MaxWidth设置为Max-Value,但这没有帮助
I want to add a little icon to the title of a TitledPane
. Therefore I set an empty title and add a HBox
containing a Label
and a ImageView
as graphic. In this way the icon is shown close to the end of the text. I want it to be shown always next to the right border of the TitledPane
.
How can I do this?
I also tried to use a BorderPane
and add the Label
to the center and the ImageView
to the right, but the BorderPane
doesn't get the maximum size of the TitledPane.
So I tried to set MaxWidth to Max-Value, but this didn't help
有人知道该怎么做吗?
****我创建的自定义"控件将在stage.setOnShown中调用的方法中初始化.
** ** The "custom" control I created will be initialized within a method called in stage.setOnShown.
public class CustomTitledPane extends TitledPane {
private Image alert;
private Image registered;
private Image deleted;
private ImageView img;
public CustomTitledPane(String titleText, Node node) {
super(titleText, node);
setAnimated(true);
setCollapsible(true);
img = new ImageView();
img.setFitHeight(10d);
img.setPreserveRatio(true);
img.setSmooth(true);
setGraphic(img);
setContentDisplay(ContentDisplay.RIGHT);
// apply css and force layout of nodes
applyCss();
layout();
// title region
Node titleRegion = lookup(".title");
// padding
Insets padding = ((StackPane) titleRegion).getPadding();
// image width
double graphicWidth = img.getLayoutBounds().getWidth();
// arrow
double arrowWidth = titleRegion.lookup(".arrow-button")
.getLayoutBounds().getWidth();
// text
double labelWidth = titleRegion.lookup(".text").getLayoutBounds()
.getWidth();
double nodesWidth = graphicWidth + padding.getLeft()
+ padding.getRight() + arrowWidth + labelWidth;
System.out.println("w: " + graphicWidth + " " + arrowWidth + " "
+ labelWidth);
graphicTextGapProperty().bind(widthProperty().subtract(nodesWidth));
try {
alert = new Image(new FileInputStream("img/Alert.png"));
registered = new Image(new FileInputStream("img/Registered.png"));
deleted = new Image(new FileInputStream("img/Deleted.png"));
} catch (FileNotFoundException e) {
e.printStackTrace();
}
} }
这是TitledPane的CSS:
And here's the CSS for TitledPane:
.titled-pane {
-fx-text-fill: #006FD8;
}
.titled-pane > .title {
-fx-background-color: transparent;
-fx-border-color: linear-gradient(to right, white 0%, grey 30%, grey 70%, white 100%) transparent transparent transparent;
}
.titled-pane:expanded > .title {
-fx-border-color: grey transparent transparent transparent;
-fx-background-color: linear-gradient(to bottom, #DCE7F5, white);
}
.titled-pane:expanded > *.content {
-fx-border-width: 0;
}
推荐答案
基于OP在其已编辑问题上显示的代码,该代码解决了以下事实:在显示阶段之前,已在侦听器上创建了标题窗格,在自定义类上.
Based on the code shown by the OP on his edited question, this code addresses the fact that the titled pane is created on a listener before the stage is shown, on a custom class.
@Override
public void start(Stage primaryStage) {
Scene scene = new Scene(new StackPane(), 300, 250);
primaryStage.setScene(scene);
primaryStage.setOnShown(e -> {
CustomTitledPane customTitledPane = new CustomTitledPane("Title", new StackPane(new Label("Graphic to the Right")));
scene.setRoot(customTitledPane);
customTitledPane.applyCss();
customTitledPane.layout();
// title region
Node titleRegion=customTitledPane.lookup(".title");
// padding
Insets padding=((StackPane)titleRegion).getPadding();
// image width
double graphicWidth=customTitledPane.getGraphic().getLayoutBounds().getWidth();
// arrow
double arrowWidth=titleRegion.lookup(".arrow-button").getLayoutBounds().getWidth();
// text
double labelWidth=titleRegion.lookup(".text").getLayoutBounds().getWidth();
double nodesWidth = graphicWidth+padding.getLeft()+padding.getRight()+arrowWidth+labelWidth;
customTitledPane.graphicTextGapProperty().bind(customTitledPane.widthProperty().subtract(nodesWidth));
});
primaryStage.show();
}
class CustomTitledPane extends TitledPane {
public CustomTitledPane(String titleText, Node node) {
super(titleText, node);
setAnimated(true);
setCollapsible(true);
ImageView img = new ImageView(new Image(getClass().getResource("unlock24.png").toExternalForm()));
img.setFitHeight(10d);
img.setPreserveRatio(true);
img.setSmooth(true);
setGraphic(img);
setContentDisplay(ContentDisplay.RIGHT);
}
}
这篇关于JavaFX 8-在右侧的TitledPane中添加图形的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!