How-To's > How do I make the content or stage size auto-adjust?


You can make the size or position of the content track the size of the stage, or make the stage size track the content.

The example code shows how to achieve the following goals:

Example Code 1: Content Resizes When Stage Resizes

The following code uses binding to expand or shrink the content to fit the scene when the stage is resized. The image on the left shows the starting size, and the image on the right shows the stage after expanding it with the mouse. The scene is automatically resized when the stage is resized, so the rectangle is automatically resized by binding to scene.width and scene.height. In turn, the text-positioning and line-length variables bind to the the horizontal coordinate and the height of the rectangle.

Resized stage

import javafx.stage.*;
import javafx.scene.*;
import javafx.scene.paint.*;
import javafx.scene.shape.*;
import javafx.scene.text.Text;
import javafx.scene.text.TextAlignment;
import javafx.scene.text.Font;

var scene : Scene;
var rectangle: Rectangle;

Stage {
    title: "Resize content"
    scene: scene=Scene {
            width:200
            height:200
        fill: Color.LIGHTGRAY
        content: [
            rectangle = Rectangle{
                x: bind scene.width-scene.width*0.9
                y: bind scene.height-scene.height*0.9
                width: bind scene.width*0.8
                height: bind scene.height*0.8
                fill: Color.web("#1F6592") 
                opacity: 0.4
            }
            Text{
                x:bind rectangle.x*1.5
                y:bind rectangle.height/2.5
                font: Font { size: 14 }
                fill:Color.WHITE
                wrappingWidth: bind rectangle.width*0.8
                content: "Four score and seven years ago our "
                    "fathers brought forth on this continent "
                    "a new nation"
                textAlignment: TextAlignment.CENTER
            }
        ]

    }
}

Example Code 2: Stage Resizes to Fit Object

This example shows an application in which a circle zooms in or out after a mouse click, and the stage resizes to fit.

Stage resizes with object

import javafx.scene.Scene;
import javafx.scene.input.MouseEvent;
import javafx.scene.paint.Color;
import javafx.scene.paint.RadialGradient;
import javafx.scene.paint.Stop;
import javafx.scene.shape.Circle;
import javafx.stage.Stage;
import javafx.stage.StageStyle;

var scale = 1.0;
var radius = 40;

var circle: Circle;
circle = Circle {
    centerX: bind 2*radius*scale 
    centerY: bind 2*radius*scale - 15
    radius: radius
    fill: RadialGradient {
        stops: [
            Stop {
                color : Color.web("#80CAFA")
                offset: 0.0
             }
             Stop {
                 color : Color.web("#1F6592")
                 offset: 1.0
              }
        ]
    }
    scaleX: bind scale
    scaleY: bind scale
    onMouseClicked: function( zoom: MouseEvent ):Void {
        if (scale == 1.0) scale=2.0 else scale=1.0;
    }
};

Stage {
    title: "Zoom"
    width: bind 4*radius*scale
    height: bind 4*radius*scale
    style:StageStyle.DECORATED
    scene: Scene {
        content: [
            circle
        ]
    }
}

The height and width must be set as variables in the Stage instance, not the Scene instance. Scene height and width variables cannot be bound, because they automatically resize to the dimensions of the stage. For this reason, 15 pixels are subtracted from the vertical coordinate of the circle. This adjustment places the circle in the center of the scene by allowing room for the window decorations at the top of the stage.

Related How-To Topics

Last Updated: April 2010
[Return to How-To's Home]