I'm trying to put a titled border around my GridPane and I'm having an issue with the border being on top title. Also I wonder which container will be the best for my problem. GridPane seems problematic here. Any easier way to do it?
Current result:
public void start(Stage primaryStage) {
try {
primaryStage.setTitle("GridPane");
BorderPane root = new BorderPane();
Scene scene = new Scene(root, 300, 210);
GridPane grd =new GridPane();
ColumnConstraints column1width = new ColumnConstraints(50);
ColumnConstraints column2width = new ColumnConstraints(70);
ColumnConstraints column3width = new ColumnConstraints(70);
RowConstraints row1Height = new RowConstraints(30);
grd.getColumnConstraints().addAll(column1width, column2width, column3width);
grd.getRowConstraints().add(row1Height);
Label source = new Label("Source");
Label report = new Label("Report");
TextField text1 = new TextField();
TextField text2 = new TextField("report.txt");
Button browse1 = new Button("Browse...");
Button browse2 = new Button("Browse...");
grd.setVgap(10);
grd.setHgap(10);
grd.setPadding(new Insets(10, 10, 10, 10));
text1.setPrefSize(80, 20);
text2.setPrefSize(80, 20);
browse1.setPrefSize(80, 20);
browse2.setPrefSize(80, 20);
Label textIO = new Label("Text IO zone");
textIO.getStyleClass().add("title");
textIO.setPadding(new Insets(-40, -20, 0, 0));
textIO.setPrefWidth(120);
grd.add(textIO, 0, 0);
grd.add(source, 0, 0);
grd.add(text1, 1, 0);
grd.add(browse1, 2, 0);
grd.add(report, 0, 1);
grd.add(text2, 1, 1);
grd.add(browse2, 2, 1);
grd.getStyleClass().add("border");
grd.prefHeightProperty().bind(root.heightProperty());
root.getStyleClass().add("color");
root.setLeft(grd);
scene.getStylesheets().add(getClass().getResource("application.css").toExternalForm());
primaryStage.setScene(scene);
primaryStage.setMinHeight(250);
primaryStage.setMinWidth(410);
primaryStage.show();
} catch(Exception e) {
e.printStackTrace();
}
}
And css styles.
/* JavaFX CSS - Leave this comment until you have at least create one rule which uses -fx-Property */
.title {
-fx-background-color: aliceblue;
-fx-translate-y: -5;
-fx-content-display: bottom;
}
.border {
-fx-border-insets: 5;
-fx-border-color: black;
}
.color{
-fx-background-color: aliceblue;
}
There was a question not too long ago about this, but I can't find it. The key is setting all the backgrounds to the same color.
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.geometry.Insets?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.TextField?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.layout.StackPane?>
<?import javafx.scene.layout.VBox?>
<AnchorPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="600.0" style="-fx-background-color: white;" xmlns="http://javafx.com/javafx/8.0.60" xmlns:fx="http://javafx.com/fxml/1">
<children>
<StackPane layoutX="150.0" layoutY="115.0" prefHeight="200.0" prefWidth="300.0" style="-fx-border-color: black; -fx-background-color: white;">
<children>
<VBox prefHeight="200.0" prefWidth="100.0" spacing="10.0">
<children>
<HBox spacing="10.0">
<children>
<Label maxHeight="1.7976931348623157E308" text="Source" />
<TextField prefWidth="125.0" />
<Button mnemonicParsing="false" text="Browse.." />
</children>
</HBox>
<HBox spacing="10.0">
<children>
<Label maxHeight="1.7976931348623157E308" text="Report" />
<TextField maxWidth="125.0" />
<Button mnemonicParsing="false" text="Browse.." />
</children>
</HBox>
</children>
<StackPane.margin>
<Insets left="5.0" right="5.0" top="20.0" />
</StackPane.margin>
</VBox>
</children></StackPane>
<Label layoutX="164.0" layoutY="105.0" style="-fx-background-color: white;" text="Text IO Zone" />
</children>
</AnchorPane>
Related
I'm tryin to follow the material design guide for my application's color scheme. At the moment, I'm at the part where it's explaining how the dark theme works.
This is my CSS:
#main-app {
-fx-background-color: #121212;
-fx-background-radius: 5px;
}
#top-bar {
-fx-background-color: bar-color;
-fx-background-radius: 5px 5px 0 0;
}
#bottom-bar {
-fx-background-color: bar-color;
-fx-background-radius: 0 0 5px 5px;
}
How can I do the 5% overlay, as seen in the image below, of my #main-app's background-color so I can then apply it to the top and bottom bars?
I give it another shot ;-)
CSS File:
#main-app {
-fx-background-radius: 5px;
-fx-background-color: #121212;
}
#top-bar {
-fx-background-radius: 5px 5px 0 0;
-fx-background-color: inherit;
}
#top-bar-overlay {
-fx-background-radius: 5px 5px 0 0;
-fx-background-color: rgba(255, 255, 255, 0.05);
}
#bottom-bar {
-fx-background-radius: 0 0 5px 5px;
-fx-background-color: inherit;
}
#bottom-bar-overlay {
-fx-background-radius: 0 0 5px 5px;
-fx-background-color: rgba(255, 255, 255, 0.5);
}
FXML File:
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.geometry.Insets?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.Spinner?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.layout.ColumnConstraints?>
<?import javafx.scene.layout.GridPane?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.layout.Pane?>
<?import javafx.scene.layout.RowConstraints?>
<?import javafx.scene.text.Font?>
<AnchorPane stylesheets="#styling2.css" xmlns="http://javafx.com/javafx/11.0.1" xmlns:fx="http://javafx.com/fxml/1" fx:controller="sample.OverlayController">
<children>
<HBox alignment="CENTER_LEFT" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
<children>
<Label text="Transparency Value for Top Bar Overlay:" />
<Spinner fx:id="topBarTransparencySpinner" />
<Label text="Transparency Value for Bottom Bar Overlay:" />
<Spinner fx:id="bottomBarTransparencySpinner" />
</children>
</HBox>
<GridPane id="main-app" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="27.0">
<columnConstraints>
<ColumnConstraints hgrow="SOMETIMES" />
</columnConstraints>
<rowConstraints>
<RowConstraints vgrow="SOMETIMES" />
<RowConstraints vgrow="SOMETIMES" />
</rowConstraints>
<children>
<AnchorPane id="top-bar">
<children>
<HBox id="top-bar" alignment="CENTER" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
<children>
<Label text="Top Bar">
<font>
<Font size="36.0" />
</font>
<HBox.margin>
<Insets />
</HBox.margin>
</Label>
</children>
</HBox>
<Pane id="top-bar-overlay" fx:id="topBarOverlayPane" mouseTransparent="true" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0" />
</children>
</AnchorPane>
<AnchorPane GridPane.rowIndex="1">
<children>
<HBox id="bottom-bar" alignment="CENTER" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
<children>
<Label text="Bottom Bar">
<font>
<Font size="36.0" />
</font>
</Label>
</children>
</HBox>
<Pane id="bottom-bar-overlay" fx:id="bottomBarOverlayPane" mouseTransparent="true" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0" />
</children>
</AnchorPane>
</children>
</GridPane>
</children>
</AnchorPane>
Controller Class:
package sample;
import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.scene.control.Spinner;
import javafx.scene.control.SpinnerValueFactory;
import javafx.scene.layout.Pane;
import java.net.URL;
import java.util.ResourceBundle;
public class OverlayController implements Initializable {
#FXML
Spinner<Double>
topBarTransparencySpinner,
bottomBarTransparencySpinner;
#FXML
private Pane
topBarOverlayPane,
bottomBarOverlayPane;
#Override
public void initialize(URL location, ResourceBundle resources) {
topBarTransparencySpinner.setValueFactory(new SpinnerValueFactory.DoubleSpinnerValueFactory(0, 1, 0.05, 0.01));
bottomBarTransparencySpinner.setValueFactory(new SpinnerValueFactory.DoubleSpinnerValueFactory(0, 1, 0.5, 0.01));
topBarTransparencySpinner.valueProperty().addListener((obs, oldV, newV) ->
topBarOverlayPane.setStyle(String.format("-fx-background-color: rgba(255, 255, 255, %s);", String.valueOf(newV).replace(",", "."))));
bottomBarTransparencySpinner.valueProperty().addListener((obs, oldV, newV) ->
bottomBarOverlayPane.setStyle(String.format("-fx-background-color: rgba(255, 255, 255, %s);", String.valueOf(newV).replace(",", "."))));
}
}
Preview:
Does this example help you for your project?
If you main background is already black, I think you can use an rgba background-color on the blocks. So for a 5% white overlay rgba(255,255,255,0.05).
I'm not sure if this is what you looking for but I hope it can help you a bit.
I think that it is not possible with css only. Here is one example for a possible solution:
Controller Class:
package sample;
import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.scene.Node;
import javafx.scene.layout.FlowPane;
import javafx.scene.layout.Pane;
import java.net.URL;
import java.util.ResourceBundle;
public class Controller implements Initializable {
#FXML
private FlowPane rootFlowPane;
#Override
public void initialize(URL location, ResourceBundle resources) {
for (int i = 0; i < rootFlowPane.getChildren().size(); i++) {
Node node = rootFlowPane.getChildren().get(i);
if (node instanceof Pane) {
Pane pane = (Pane) node;
String style = "-fx-background-color: rgba(255, 255, 255, %s); -fx-background-radius: 5; -fx-border-color: grey;";
if (i == 0)
pane.setStyle(String.format(style, "0"));
else if (i == 1)
pane.setStyle(String.format(style, "0.05"));
else if (i == 2)
pane.setStyle(String.format(style, "0.07"));
else if (i >= 100)
pane.setStyle(String.format(style, "1"));
else {
String transparency = String.format("%.2f", (i + 5) / 100.0).replace(",", ".");
pane.setStyle(String.format(style, transparency));
}
}
}
}
}
FXML File:
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.geometry.Insets?>
<?import javafx.scene.layout.FlowPane?>
<?import javafx.scene.layout.Pane?>
<FlowPane fx:id="rootFlowPane" hgap="20.0" prefHeight="460.0" prefWidth="460.0" style="-fx-background-color: #121212;" vgap="20.0" xmlns="http://javafx.com/javafx/11.0.1" xmlns:fx="http://javafx.com/fxml/1" fx:controller="sample.Controller">
<children>
<Pane prefHeight="200.0" prefWidth="200.0" />
<Pane prefHeight="200.0" prefWidth="200.0" />
<Pane prefHeight="200.0" prefWidth="200.0" />
<Pane prefHeight="200.0" prefWidth="200.0" />
</children>
<padding>
<Insets bottom="20.0" left="20.0" right="20.0" top="20.0" />
</padding>
</FlowPane>
Preview:
I run a JavaFX program in IDEA on Ubuntu. The window, first, locates on the left-top of the screen, and then I see a jump of the window to a center. How can I handle this?
I've tried different methods of Stage, but it didn't help.
start method
#Override
public void start(Stage primaryStage) throws Exception{
Parent root = FXMLLoader.load(getClass().getResource("View/MainMenuView.fxml"));
primaryStage.setTitle("Flash Cards");
primaryStage.setScene(new Scene(root, 800, 600));
primaryStage.setResizable(false);
primaryStage.show();
}
MainMenuView.fxml
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.Cursor?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.layout.Pane?>
<?import javafx.scene.text.Font?>
<?import javafx.scene.text.Text?>
<AnchorPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="600.0" prefWidth="800.0" xmlns="http://javafx.com/javafx/11.0.1" xmlns:fx="http://javafx.com/fxml/1" fx:controller="sample.Controllers.MainMenuController">
<children>
<Pane fx:id="mainMenu" prefHeight="600.0" prefWidth="800.0">
<children>
<Text layoutX="233.0" layoutY="116.0" strokeType="OUTSIDE" strokeWidth="0.0" text="Flash Cards v1" textAlignment="CENTER" wrappingWidth="333.419921875">
<font>
<Font size="37.0" />
</font>
</Text>
<Button fx:id="trainingButton" layoutX="314.0" layoutY="225.0" mnemonicParsing="false" prefHeight="75.0" prefWidth="172.0" style="-fx-background-color: #fff; -fx-border-color: #000; -fx-border-width: 2;" text="Training">
<cursor>
<Cursor fx:constant="OPEN_HAND" />
</cursor>
</Button>
<Button fx:id="addNewWordButton" layoutX="314.0" layoutY="325.0" mnemonicParsing="false" prefHeight="75.0" prefWidth="172.0" style="-fx-background-color: #fff; -fx-border-color: #000; -fx-border-width: 2;" text="Add a new word">
<cursor>
<Cursor fx:constant="OPEN_HAND" />
</cursor>
</Button>
</children>
</Pane>
</children>
</AnchorPane>
I just want the window be in a center immediately when my program starts.
This is a bug in JavaFX itself. A workaround for until it is fixed is to do this:
primaryStage.show();
primaryStage.centerOnScreen();
You need to call centerOnScreen() immediately after show() to prevent it from showing up in the corner.
I'm trying to change from one screen to another in full screen model but only the first screen is on full screen, when I change to another screen the full screen dosn't work.
Here's my code:
Main
public class Main extends Application {
#Override
public void start(Stage primaryStage) throws Exception{
Parent root = FXMLLoader.load(getClass().getResource("sample.fxml"));
Scene scene = new Scene(root);
primaryStage.setScene(scene);
primaryStage.setFullScreen(true);
primaryStage.show();
}
public static void main(String[] args) {
launch(args);
}
}
sample.fmxl
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.layout.StackPane?>
<?import javafx.scene.text.Text?>
<AnchorPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="600.0" xmlns="http://javafx.com/javafx/9.0.1" xmlns:fx="http://javafx.com/fxml/1" fx:controller="sample.Controller">
<children>
<StackPane prefHeight="200.0" prefWidth="200.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
<children>
<HBox alignment="CENTER" prefHeight="100.0" prefWidth="200.0">
<children>
<Text strokeType="OUTSIDE" strokeWidth="0.0" text="First Screen" textAlignment="CENTER" />
</children>
</HBox>
</children>
</StackPane>
<StackPane layoutY="163.0" prefHeight="200.0" prefWidth="600.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0">
<children>
<HBox alignment="CENTER" prefHeight="200.0" prefWidth="600.0">
<children>
<Button fx:id="next" mnemonicParsing="false" onAction="#nextScreen" text="Next" />
</children>
</HBox>
</children>
</StackPane>
</children>
</AnchorPane>
FirstScreenController
public class Controller implements Initializable {
#FXML
private Button next;
#Override
public void initialize(URL location, ResourceBundle resources) {
}
public void nextScreen(ActionEvent actionEvent) throws Exception {
SecondScreenController secondScreen = new SecondScreenController();
Stage stage = (Stage) next.getScene().getWindow();
stage.setFullScreen(true);
secondScreen.start(stage);
}
public void start(Stage window) throws Exception {
Parent root = FXMLLoader.load(getClass().getResource("sample.fxml"));
Scene scene = new Scene(root);
window.setScene(scene);
window.show();
}
}
sample2.fxml
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.layout.StackPane?>
<?import javafx.scene.text.Text?>
<AnchorPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="600.0" xmlns="http://javafx.com/javafx/9.0.1" xmlns:fx="http://javafx.com/fxml/1" fx:controller="sample.SecondScreenController">
<children>
<StackPane prefHeight="200.0" prefWidth="200.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
<children>
<HBox alignment="CENTER" prefHeight="100.0" prefWidth="200.0">
<children>
<Text strokeType="OUTSIDE" strokeWidth="0.0" text="Second Screen" textAlignment="CENTER" />
</children>
</HBox>
</children>
</StackPane>
<StackPane layoutY="163.0" prefHeight="200.0" prefWidth="600.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0">
<children>
<HBox alignment="CENTER" prefHeight="200.0" prefWidth="600.0">
<children>
<Button fx:id="back" mnemonicParsing="false" onAction="#backScreen" text="Back" />
</children>
</HBox>
</children>
</StackPane>
</children>
</AnchorPane>
SecondScreenController
public class SecondScreenController implements Initializable {
#FXML
private Button back;
#Override
public void initialize(URL location, ResourceBundle resources) {
}
public void start(Stage window) throws Exception {
Parent root = FXMLLoader.load(getClass().getResource("sample2.fxml"));
Scene scene = new Scene(root);
window.setScene(scene);
window.show();
}
public void backScreen(ActionEvent actionEvent) throws Exception {
Controller firstScreen = new Controller();
Stage stage = (Stage) back.getScene().getWindow();
stage.setFullScreen(true);
firstScreen.start(stage);
}
}
When I press the button Full Screen mode stop working, even if I go back to the first screen. Any idea how to solve this?
Add a window.setFullScreen(true); in SecondScreenController.java before window.show();.
Also add window.setFullScreen(true); in Controller.java in start() before window.show();
I am trying to add columns to a table view like this:
#FXML
private TableView tblView;
//private Label tblViewTitle;
#FXML
public void showTable(ActionEvent e) throws Exception{
Stage TableView = new Stage();
Parent root = FXMLLoader.load(getClass().getResource("tableView.fxml"));
TableView.setTitle("Table");
TableView.setScene(new Scene(root));
//tblViewTitle.setText("test");
//For dynamic calculate later on
TableColumn clm1 = new TableColumn("Test");
TableColumn clm2 = new TableColumn("Test");
TableColumn clm3 = new TableColumn("Test");
TableColumn clm4 = new TableColumn("Test");
tblView.getColumns().addAll(clm1, clm2, clm3, clm4);
TableView.show();
}
The fxml file looks like this:
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.TableView?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.text.Font?>
<AnchorPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="600.0" xmlns="http://javafx.com/javafx/8.0.101" xmlns:fx="http://javafx.com/fxml/1" fx:controller="sample.Controller">
<children>
<TableView fx:id="tblView" editable="true" layoutX="84.0" layoutY="94.0" prefHeight="306.0" prefWidth="600.0" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="94.0" />
<Label fx:id="tblViewTitle" layoutX="14.0" layoutY="26.0" prefHeight="49.0" prefWidth="181.0">
<font>
<Font size="39.0" />
</font>
</Label>
</children>
</AnchorPane>
I'm getting a nullPointerException when I'm trying to add the columns to the table view and I don't understand why.
Is it that I can't add columns because the table view is not an object?
So the Button look normal when the program starts but If the decrease the size the window with my cursor horizontally or vertically, the buttons shrink to a smaller size.
Code
FXML File
<?import java.lang.*?>
<?import java.net.*?>
<?import javafx.scene.shape.*?>
<?import javafx.scene.text.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.image.*?>
<?import java.net.URL?>
<VBox fx:id="OptionMenuLayout" alignment="TOP_CENTER" spacing="15" prefWidth="1366" prefHeight="768" xmlns:fx="http://javafx.com/fxml/1" xmlns="http://javafx.com/javafx/8.0.40" fx:controller="millionairetriviagame.OptionscreenController">
<stylesheets>
<URL value="#BackgroundImages.css" />
</stylesheets>
<stylesheets>
<URL value="#ButtonLayout.css" />
</stylesheets>
<children>
<ImageView fitHeight="300" fitWidth="300" smooth="true" >
<image>
<Image url="#ImageFiles/MillionaireLogo1.png" />
</image>
</ImageView>
<Label style="-fx-font-style: Italic;" text="Click to Change the Background Color" textFill="white">
<font>
<javafx.scene.text.Font name="sans-serif" size="20" />
</font>
</Label>
<HBox alignment="CENTER" spacing="200">
<children>
<Button id="SmallBlueBackground1" fx:id="optionButton1" onAction="#changeBackgroundScreen" prefHeight="50" prefWidth="80" />
<Button id="SmallBlueBackground2" fx:id="optionButton2" onAction="#changeBackgroundScreen" prefHeight="50" prefWidth="80" />
<Button id="SmallBlueBackground3" fx:id="optionButton3" onAction="#changeBackgroundScreen" prefHeight="50" prefWidth="80" />
</children>
</HBox>
<Region prefHeight="200.0" prefWidth="200.0" VBox.vgrow="ALWAYS" />
<HBox alignment="BOTTOM_RIGHT" spacing="10">
<children>
<Button fx:id="backToMain" onAction="#goToTheMainMenu" prefHeight="30" prefWidth="200" id="ButtonLayout" text="Back to the Main Menu">
<shape>
<javafx.scene.shape.Rectangle arcHeight="30" arcWidth="30" height="30" width="200" />
</shape>
</Button>
</children>
</HBox>
</children>
</VBox>
Here is a screenshot: Note that I resized the screen with my cursor to show this as this is right not the size of the screen
As you can see, the buttons are not their regular size.
Here is the CSS file(if need be) associated with the 3 main buttons that you see in the screenshot
#BlueBackground1
{
-fx-background-image: url("/millionairetriviagame/ImageFiles/BlueBackgroundColor.jpg");
-fx-smooth: true;
-fx-background-position: center center;
}
#BlueBackground2
{
-fx-background-image: url("/millionairetriviagame/ImageFiles/BlueBackgroundColor2.jpg");
-fx-smooth: true;
-fx-background-position: center center;
}
#BlueBackground3
{
-fx-background-image: url("/millionairetriviagame/ImageFiles/BlueBackgroundColor3.jpg");
-fx-smooth: true;
-fx-background-position: center center;
}
#SmallBlueBackground1
{
-fx-background-image: url("/millionairetriviagame/ImageFiles/BlueBackgroundColor.jpg");
-fx-background-repeat: stretch;
-fx-background-size: 80 50;
-fx-background-position: center center;
-fx-background-insets: 0, 0, 0, 0;
-fx-border-color: black;
-fx-border-width: 3;
-fx-border-style: solid;
-fx-effect: dropshadow(three-pass-box, black, 5, 0.5, 0, 0);
}
#SmallBlueBackground2
{
-fx-background-image: url("/millionairetriviagame/ImageFiles/BlueBackgroundColor2.jpg");
-fx-background-repeat: stretch;
-fx-background-size: 80 50;
-fx-background-position: center center;
-fx-background-insets: 0, 0, 0, 0;
-fx-border-color: black;
-fx-border-width: 3;
-fx-border-style: solid;
-fx-effect: dropshadow(three-pass-box, black, 5, 0.5, 0, 0);
}
#SmallBlueBackground3
{
-fx-background-image: url("/millionairetriviagame/ImageFiles/BlueBackgroundColor3.jpg");
-fx-background-repeat: stretch;
-fx-background-size: 80 50;
-fx-background-position: center center;
-fx-background-insets: 0, 0, 0, 0;
-fx-border-color: black;
-fx-border-width: 3;
-fx-border-style: solid;
-fx-effect: dropshadow(three-pass-box, black, 5, 0.5, 0, 0);
}
If you want to have dynamic dimensions you shouldn't use min/pref/max size. Instead you should use proper layout containers. For your example you could use e. g. a
VBox for the entire screen
a top and a bottom Stackpane in that VBox
a GridPane in the bottom Stackpane for the buttons
and let the button dimensions be computed.
Something like this:
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.geometry.*?>
<?import javafx.scene.shape.*?>
<?import javafx.scene.control.*?>
<?import java.lang.*?>
<?import javafx.scene.layout.*?>
<VBox maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="600.0" prefWidth="800.0" xmlns="http://javafx.com/javafx/8.0.40" xmlns:fx="http://javafx.com/fxml/1">
<children>
<StackPane VBox.vgrow="ALWAYS" />
<StackPane VBox.vgrow="ALWAYS">
<children>
<GridPane hgap="10.0" vgap="10.0">
<columnConstraints>
<ColumnConstraints hgrow="ALWAYS" />
<ColumnConstraints hgrow="ALWAYS" />
</columnConstraints>
<rowConstraints>
<RowConstraints vgrow="ALWAYS" />
<RowConstraints vgrow="ALWAYS" />
</rowConstraints>
<children>
<Button maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" mnemonicParsing="false" text="Button" GridPane.hgrow="ALWAYS" />
<Button maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" mnemonicParsing="false" text="Button" GridPane.columnIndex="1" GridPane.hgrow="ALWAYS" />
<Button maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" mnemonicParsing="false" text="Button" GridPane.hgrow="ALWAYS" GridPane.rowIndex="1" />
<Button maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" mnemonicParsing="false" text="Button" GridPane.columnIndex="1" GridPane.hgrow="ALWAYS" GridPane.rowIndex="1" />
</children>
<StackPane.margin>
<Insets bottom="10.0" left="10.0" right="10.0" top="10.0" />
</StackPane.margin>
</GridPane>
</children>
</StackPane>
</children>
</VBox>
Note: The "1.7976931348623157E308" values are MAX_VALUE in scene builder.
Set min size on the button like pref size. That should work.
#edit: And you could set the resizable attribute to false