Pannello JavaFX all'interno del ridimensionamento automatico del pannello

Question

Possiedo un'applicazione JavaFX con un solo file FXML. In questo file ho un AnchorPane che ha uno StackPane al suo interno. Ecco lo screenshot:

Quando inizio a questa applicazione, voglio ridimensionare automaticamente StackPane con l'AnchorPane. Così; StackPane otterrà automaticamente la larghezza e l'altezza disponibili. Nel momento in cui ridimensiono l'applicazione, AnchorPane viene ridimensionato automaticamente ma StackPane rimane come dimensione fissa.

Come è possibile ridimensionare lo StackPane automaticamente e renderlo completamente allungato all'interno del relativo pannello padre?

My Code

Main.java

package app; 

import javafx.application.Application; 
import javafx.fxml.FXMLLoader; 
import javafx.scene.Parent; 
import javafx.scene.Scene; 
import javafx.stage.Stage; 

public class Main extends Application { 

    public static void main(String[] args) { 
     Application.launch(args); 
    } 

    @Override 
    public void start(Stage stage) throws Exception { 
     Parent root = FXMLLoader.load(getClass().getResource("Main.fxml")); 
     Scene scene = new Scene(root,800,600); 
     scene.getStylesheets().add(this.getClass().getResource("/app/style1.css").toExternalForm()); 
     stage.setScene(scene); 
     stage.show(); 
    } 
} 

MainController.java

package app; 

import java.net.URL; 
import java.util.ResourceBundle; 
import javafx.fxml.FXML; 
import javafx.fxml.Initializable; 
import javafx.scene.layout.AnchorPane; 
import javafx.scene.layout.StackPane; 

public class MainController implements Initializable { 

    @FXML 
    private AnchorPane anchorPane; 
    @FXML 
    private StackPane stackPane; 

    @Override 
    public void initialize(URL url, ResourceBundle rb) { 
    stackPane.setPrefSize(anchorPane.getPrefWidth(), anchorPane.getPrefHeight()); //didn't work 
    }  
} 

Main.fxml

<?xml version="1.0" encoding="UTF-8"?> 
<?import java.lang.*?> 
<?import java.util.*?> 
<?import javafx.scene.*?> 
<?import javafx.scene.control.*?> 
<?import javafx.scene.layout.*?> 

<AnchorPane fx:id="anchorPane" xmlns:fx="http://javafx.com/fxml" fx:controller="app.MainController"> 
    <StackPane fx:id="stackPane" ></StackPane> 
</AnchorPane> 

style1.css

#anchorPane { 
    -fx-border-width: 2px; 
    -fx-border-color: chartreuse; 
} 
#stackPane { 
    -fx-border-width: 2px; 
    -fx-border-color: red; 

    /* didn't work */ 
    -fx-hgap: 100%; 
    -fx-vgap: 100%; 
} 

Answer 1

Dopo ore di ricerca e sperimentazione finalmente arrivati ​​subito dopo la pubblicazione della domanda!

È possibile utilizzare la "AnchorPane.topAnchor, AnchorPane.bottomAnchor, AnchorPane.leftAnchor, AnchorPane.rightAnchor" comandi fxml con il valore "0.0" per adattarsi/stretch/allineare gli elementi figlio all'interno di un AnchorPane. Quindi, questi comandi dicono all'elemento figlio di seguire il suo genitore mentre ridimensiona.

mio codice aggiornato Main.fxml

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

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

<AnchorPane fx:id="anchorPane" xmlns:fx="http://javafx.com/fxml" fx:controller="app.MainController"> 
    <!--<StackPane fx:id="stackPane" ></StackPane>--> <!-- replace with the following --> 
    <StackPane fx:id="stackPane" AnchorPane.topAnchor="0.0" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" ></StackPane> 
</AnchorPane> 

Hier è il risultato:

Per la documentazione API: http://docs.oracle.com/javafx/2/api/javafx/scene/layout/AnchorPane.html

Answer 2

stavo progettando una GUI in SceneBuilder, cercando di rendere il contenitore principale adatto a qualsiasi dimensione della finestra. Dovrebbe sempre essere largo al 100%.

Questo è dove è possibile impostare questi valori in SceneBuilder:

Alternanza le linee tratteggiate/rosso sarà in realtà solo aggiungere/rimuovere gli attributi che korki postato nella sua soluzione (AnchorPane.topAnchor etc.).

Answer 3

vedere anche here

@FXML 
private void mnuUserLevel_onClick(ActionEvent event) { 
    FXMLLoader loader = new FXMLLoader(getClass().getResource("DBedit.fxml")); 
    loader.setController(new DBeditEntityUserlevel()); 

    try { 
      Node n = (Node)loader.load(); 
      AnchorPane.setTopAnchor(n, 0.0); 
      AnchorPane.setRightAnchor(n, 0.0); 
      AnchorPane.setLeftAnchor(n, 0.0); 
      AnchorPane.setBottomAnchor(n, 0.0); 
      mainContent.getChildren().setAll(n); 
    } catch (IOException e){ 
      System.out.println(e.getMessage()); 
    } 
} 

Lo scenario è quello di caricare un fxml bambino nella AnchorPane genitore. Per fare in modo che il bambino si distenda in accordo con il genitore usa il comando AnChorPane.setxxxAnchor.

Answer 4

È abbastanza semplice poiché si utilizza FXMLBuilder.

Basta seguire questi semplici passi:

1. Apri file FXML in FXMLBuilder.
2. Seleziona il riquadro dello stack.
3. Apre la scheda Layout [scheda sul lato sinistro di FXMLBuilder].
4. Impostare il valore dei lati per il quale si desidera calcolare la dimensione del riquadro durante il ridimensionamento dello stage come TOP, LEFT, RIGHT, BOTTOM.

Answer 5

Se stai usando Scene Builder, vedrai sulla destra un pannello a fisarmonica che normalmente ha tre opzioni ("Proprietà", "Layout" e "Codice"). Nella seconda ("Layout"), vedrai un'opzione chiamata "[parent layout] Constraints" (nel tuo caso "AnchorPane Constrainsts").

Si dovrebbe mettere "0" nei quattro lati dell'elemento che rappresenta il layout genitore.

Answer 6

Non c'è bisogno di cedere.

solo selezionare riquadro, fate clic destro quindi selezionare Adatta alla genitore.

Ridimensionerà automaticamente la dimensione del riquadro di ancoraggio.