Resize Pane automatically in JavaFX

Question

I write a small program of draw shapes using javafx.

I have a pane that contains all my UI controls. I have the problem my pane doesn't resize when I make the scene bigger:

The pane where I draw the shapes dosen't resize. When I check if the pane is resized it returns true. Another problem is that when I draw a shape by mouse click I have this "bug" :

This is my code:

package sample;

import javafx.application.Application;
import javafx.event.ActionEvent;
import javafx.fxml.FXMLLoader;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.input.MouseEvent;
import javafx.scene.layout.Pane;
import javafx.scene.shape.Circle;
import javafx.stage.Stage;

import java.util.ArrayList;

public class Main extends Application {

    public Pane Mpane;
    public Button button;
    public Pane pane;
    ArrayList<Circle> circles;

    @Override
    public void start(Stage primaryStage) throws Exception{
        Mpane= FXMLLoader.load(getClass().getResource("sample.fxml"));
        primaryStage.setTitle("GraphFX");
        primaryStage.setScene(new Scene(Mpane, Mpane.getPrefWidth(), Mpane.getPrefHeight()));
        primaryStage.show();

    }


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

    public void ButtonAction(ActionEvent actionEvent) {
    }
    Circle CreateCircle(Double x,Double y){
        Circle circle=new Circle();
        circle.setCenterX(x);
        circle.setCenterY(y);
        circle.setRadius(30);
        return circle;
    }
    public void PaneMouseClick(MouseEvent me){
       circles=new ArrayList<Circle>();
       circles.add(CreateCircle(me.getX(),me.getY()));
        for (Circle circle : circles) {
            pane.getChildren().add(circle);
        }
        System.out.printf("llol"+me.getX()+"Y"+me.getY());

    }
}


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

<?import javafx.scene.control.*?>
<?import java.lang.*?>
<?import javafx.scene.layout.*?>
<?import javafx.geometry.Insets?>
<?import javafx.scene.layout.GridPane?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.layout.Pane?>

<Pane fx:id="Mpane" prefHeight="227.0" prefWidth="307.0" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1" fx:controller="sample.Main">
   <children>
      <Button fx:id="button" layoutY="2.0" mnemonicParsing="false" onAction="#ButtonAction" text="Button" />
      <AnchorPane fx:id="pane" style="-fx-background-color:white" layoutY="27.0" onMouseClicked="#PaneMouseClick" prefHeight="200.0" prefWidth="307.0" />
   </children>
</Pane>

Answer 1

You can use Anchorpane constraints

For Ex:

AnchorPane.setTopAnchor(Mpane, 100.0);
AnchorPane.setLeftAnchor(Mpane, 10.0);
AnchorPane.setRightAnchor(Mpane, 10.0);
AnchorPane.setBottomAnchor(Mpane, 10.0);