web-dev-qa-db-fra.com

JavaFX Panel dans le redimensionnement automatique du panneau

J'ai une application JavaFX qui ne contient qu'un fichier FXML. Dans ce fichier, j'ai un AnchorPane qui contient un StackPane. Voici la capture d'écran:

my panel inside panel application

Lorsque je lance cette application, je souhaite redimensionner StackPane automatiquement avec AnchorPane. Ainsi; StackPane obtiendra automatiquement la largeur et la hauteur disponibles actuellement. Au moment où je redimensionne l'application, AnchorPane est redimensionné automatiquement mais StackPane reste à sa taille fixe.

Comment redimensionner automatiquement StackPane et le rendre complètement étiré dans son panneau parent?

Mon 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%;
}
javacssjavafx-2fxmlpane
44
Korki Korkig

Après des heures de recherche et de test, je l’ai finalement obtenu juste après avoir posé la question!

Vous pouvez utiliser les commandes "AnchorPane.topAnchor, AnchorPane.bottomAnchor, AnchorPane.leftAnchor, AnchorPane.rightAnchor} pour ajuster/étirer/aligner les éléments enfants dans un élément AnchorPane. Ainsi, ces commandes indiquent à l'élément enfant de suivre son parent lors du redimensionnement.

Mon code mis à jour 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>

Voici le résultat:

enter image description here

Pour la documentation api: http://docs.Oracle.com/javafx/2/api/javafx/scene/layout/AnchorPane.html

72
Korki Korkig

Je concevais une interface graphique dans SceneBuilder, essayant de faire en sorte que le conteneur principal s'adapte à la taille de la fenêtre. Il devrait toujours être 100% large.

C'est ici que vous pouvez définir ces valeurs dans SceneBuilder:

AnchorPane Constraints in SceneBuilder

Le fait de basculer les lignes pointillées/rouges ne fera en réalité que rajouter/supprimer les attributs que Korki a affichés dans sa solution (AnchorPane.topAnchor, etc.).

14
Ginchen

Voir aussi ici

@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());
    }
}

Le scénario consiste à charger un fxml enfant dans AnchorPane parent. Pour que l'enfant s'étire conformément à son parent, utilisez la commande AnChorPane.setxxxAnchor.

9
Dean Chiu

Pas besoin de céder.

juste sélectionnez le volet , faites un clic droit puis sélectionnez Fit to parent . 

Il redimensionnera automatiquement le volet pour l'ancrer.

0
Paragfalle

Si vous utilisez Scene Builder, vous verrez à droite un panneau en accordéon comportant normalement trois options ("Propriétés", "Mise en page" et "Code"). Dans le second ("Mise en page"), vous verrez une option appelée "[mise en page parent] Contraintes" (dans votre cas "AnchorPane Constrainsts").

Vous devez mettre "0" sur les quatre côtés de l'élément qui représente la mise en page parent.

0
Fran Pastor

C'est assez simple car vous utilisez le FXMLBuilder . 

Il suffit de suivre ces étapes simples:

  1. Ouvrir le fichier FXML dans FXMLBuilder.
  2. Sélectionnez le volet de pile.
  3. Ouvrez l'onglet Mise en page [onglet de gauche de FXMLBuilder].
  4. Définissez la valeur des côtés avec laquelle vous souhaitez calculer la taille de la sous-fenêtre lors du redimensionnement de la phase, par exemple TOP, GAUCHE, DROITE, BAS.
0
Sandeep Kumar