Come impostare/rimuovere inserti in JavaFX TitledPane

Question

Ho creato un TitledPane in JavaFX con un singolo componente figlio (un tasto) come segue:

<?import java.lang.*?> 
<?import javafx.scene.control.*?> 
<?import javafx.scene.layout.*?> 

<AnchorPane id="AnchorPane" prefHeight="400.0" prefWidth="600.0" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1"> 
    <children> 
     <TitledPane animated="false" layoutX="137.0" layoutY="60.0" prefHeight="400.0" prefWidth="600.0" text="untitled" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0"> 
      <content> 
       <AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="180.0" prefWidth="200.0" > 
        <children > 
         <Button layoutX="193.1875" layoutY="133.5" mnemonicParsing="false" prefHeight="374.0" prefWidth="598.0" text="Button" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0" /> 
        </children> 
       </AnchorPane> 
      </content> 
     </TitledPane> 
    </children> 
</AnchorPane> 

Questo appare come di seguito. C'è un po 'di spazio attorno al pulsante, vorrei ridurlo a 0 o forse a un singolo pixel. Non vedo alcuna proprietà né di AnchorPane né di TitledPane che lo facciano. Esiste una tale proprietà?

Answer 1

Usa Scenic View di capire problemi come questo.

L'AnchorPane all'interno del TitledPane ha un riempimento di 0.8em (10px) su tutti i lati. Questo è definito nel foglio di stile predefinito, modena.css. È possibile ripristinare nella FXML:

<?import java.lang.*?> 
<?import javafx.scene.control.*?> 
<?import javafx.scene.layout.*?> 
<?import javafx.geometry.Insets?> 

<AnchorPane id="AnchorPane" prefHeight="400.0" prefWidth="600.0" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1"> 
    <children> 
     <TitledPane animated="false" text="untitled" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0"> 
      <content> 
       <AnchorPane > 
       <padding> 
         <Insets top="0" right="0" left="0" bottom="0"/>     
       </padding> 
        <children > 
         <Button mnemonicParsing="false" text="Button" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0" /> 
        </children> 
       </AnchorPane> 
      </content> 
     </TitledPane> 
    </children> 
</AnchorPane> 

o con un foglio di stile esterno con

.titled-pane > * > * > AnchorPane { 
    -fx-padding: 0em ; 
} 

Answer 2

ho già answered on a similar question, ma ho anche voglia di postare qui, dal momento che anche abbina perfettamente a questa domanda.

Per estendere @ risposta di James_D:

Se non utilizzare AnchorPane come contenuto 's il TitledPane, ma qualche altro nodo, è necessario regolare il CSS di conseguenza.

Una soluzione CSS universale per la rimozione di imbottitura sui contenuti di un TitledPane s', non importa quale tipo di Node viene utilizzato come contenuto, è la seguente:

.titled-pane > .content > * { 
    -fx-padding: 0px; 
} 

Questa imposta l'imbottitura per ogni bambino della TitledPane il contenuto di 0px.