Repositionieren Sie den Akkordearpfeil in JavaFX

Question

Ich möchte ein Akkordeon-Steuerelement in ein anderes verschachteln und obwohl dies wie erwartet funktioniert, möchte ich es so anpassen, dass die Pfeile des verschachtelten Akkordeons relativ zur obersten Ebene eingerückt sind. Dieser Link zeigt, wie es ist zur Zeit: - The bottom level arrows need to move in 20px

Ich kann nicht einen Weg finden, dies zu setzen im Code oder in scenebuilder. Allerdings, wenn ich die laufende App in scenicview öffne, scheint es anders zu zeigen und ich kann sehen, dass der TitledPane wie folgt zusammengesetzt ist: TitelRegion> StackPane arrowRegion> StackPane Pfeil. Wenn ich fx-translateX 20.0 dazu hinzufüge, tut es was ich will.

Gibt es eine gute Lösung in Code oder fxml? Oder kann ich css tun, was Scenicview tun kann (ich kann auch keinen Export von Scenicview finden).

Ich habe gerade die Netbeans Vorlage JavaFX fxml Projekt in Scenebuilder geändert. Unter Verwendung von JAVA 1.8.0.92., Nb8.0.2, spätestes sb + sv. Mein fxml ist:

<?xml version="1.0" encoding="UTF-8"?> 

<?import javafx.scene.control.Accordion?> 
<?import javafx.scene.control.Label?> 
<?import javafx.scene.control.TitledPane?> 
<?import javafx.scene.layout.AnchorPane?> 
<?import javafx.scene.text.Text?> 

<AnchorPane id="AnchorPane" prefHeight="200" prefWidth="320" xmlns="http://javafx.com/javafx/8.0.65" xmlns:fx="http://javafx.com/fxml/1" fx:controller="accordianchildtitledpanearrrowcustom.FXMLDocumentController"> 
    <children> 
     <Label fx:id="label" alignment="CENTER" contentDisplay="CENTER" layoutX="79.0" layoutY="14.0" minHeight="16" minWidth="69" text="Example nested accordian" /> 
     <Accordion layoutY="38.0" prefHeight="54.0" prefWidth="320.0"> 
     <panes> 
      <TitledPane alignment="CENTER" animated="false" text="Top Level 1"> 
       <content> 
        <Accordion> 
        <panes> 
         <TitledPane alignment="CENTER" animated="false" text="Bottom Level 1"> 
          <content> 
           <Text strokeType="OUTSIDE" strokeWidth="0.0" text="example text 1" /> 
          </content></TitledPane> 
         <TitledPane alignment="CENTER" animated="false" contentDisplay="CENTER" text="Bottom Level 2"> 
          <content> 
           <Text strokeType="OUTSIDE" strokeWidth="0.0" text="example text 2" /> 
          </content></TitledPane> 
        </panes> 
        </Accordion> 
       </content> 
      </TitledPane> 
      <TitledPane alignment="CENTER" animated="false" text="Top Level 2" /> 
     </panes> 
     </Accordion> 
    </children> 
</AnchorPane> 

Answer 1

In der Anwendungen CSS-Datei Sie die folgende Zeile hinzufügen, können die Pfeiltasten zu übersetzen:

.accordion .title > .arrow-button .arrow{ 
    -fx-translate-x: 20; 
} 

Wenn Sie die Pfeiltaste der verschachtelten TitledPanes nur zu übersetzen, Sie verwenden können:

.titled-pane .accordion .title > .arrow-button .arrow{ 
    -fx-translate-x: 20; 
} 

Das Stylesheet kann wie folgt hinzugefügt werden:

scene.getStylesheets().add(getClass().getResource("/yourPackage/yourStyleSheet.css").toExternalForm());