是否可以在 JavaFX 中为子窗格设置规则只为父窗格制作圆角？

Question

I have the following fxml:

<?xml version="1.0" encoding="UTF-8"?>
<?import java.lang.*?>
<?import javafx.scene.layout.*?>
<StackPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="600.0" xmlns="http://javafx.com/javafx/8.0.141" xmlns:fx="http://javafx.com/fxml/1">
   <children>
      <AnchorPane maxHeight="200.0" maxWidth="200.0" prefHeight="200.0" prefWidth="200.0">
         <children>
            <VBox style="-fx-border-radius: 10; -fx-border-color: black; -fx-border-width: 1;" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
               <children>
                  <Pane maxWidth="200.0" prefHeight="200.0" prefWidth="200.0" style="-fx-background-color: red;" />
                  <Pane prefHeight="200.0" prefWidth="200.0" style="-fx-background-color: cyan;" />
                  <Pane prefHeight="200.0" prefWidth="200.0" style="-fx-background-color: green;" />
               </children>
            </VBox>
         </children>
      </AnchorPane>
   </children>
</StackPane>

And this is the result:

VBox has the following css rule:

-fx-border-radius: 10; 
-fx-border-color: black; 
-fx-border-width: 1;

The problem is that child corners (total 4 corners) are outside parent - I mean that 4 child corners are not round according to parent radius. Is it possible to fix it without setting rules to child panes? If yes, then how? I am asking it because in real application I have in parent many different children and order of these children can change and I don't want to control child radius.

Answer 1

You might use shape clipping with a round rectangle. Bind its coordinates and dimensions to the source pane and it should work flawlessly.

import javafx.scene.shape.*;

VBox box = ...;
Rectangle r = new Rectangle();
r.widthProperty().bind(box.widthProperty());
r.heightProperty().bind(box.heightProperty());
r.setArcWidth(10);
r.setArcHeight(10);

box.setClip(r);

Answer 2

a bit late as I can see, but you could achieve this without having to do any extra work. You only have to use css : In your css file, simply select the AnchorPanes using css. For an instance, let's think that your root's id is #rootPane, you can use #rootPane to style the rest of the Anchor Panes using the following way,

#rootPane AnchorPane{
    -fx-background-radius:200; /* a value of your preference*/
}

will get exactly what you want. The output is here : The Output

I've added colours to the Anchor Panes externally, just for visual purposes