How to display GridPane object grid lines permanently, and without using the setGridLinesVisible() method?

Question

Is it possible to make all GridPane's grid lines permanently visible without using setGridLinesVisible()?

I know that setGridLinesVisible() is for debugging purposes only, and I want to show grid lines for the end-user's convenience.

Also, I need to work on a Pane container and not a Canvas.

My program is able to add, delete, modify, move, etc. shape objects and groups on a Pane type or a Pane subtype parent container.

Thanks

Solution 1

Doing this depends a bit on how you have things set up. From the description of your application, when I've experimented with similar things I always found it convenient to fill the grid with empty Panes of some kind to act as the cells, and then to manipulate their content based on the data in the model. If you use this approach, you can use some CSS to put borders (e.g. using nested backgrounds) on the "cells", which will give the effect of grid lines.

Here's a simple example of this approach:

import javafx.application.Application;
import javafx.beans.property.BooleanProperty;
import javafx.beans.property.SimpleBooleanProperty;
import javafx.scene.Scene;
import javafx.scene.layout.ColumnConstraints;
import javafx.scene.layout.GridPane;
import javafx.scene.layout.Priority;
import javafx.scene.layout.RowConstraints;
import javafx.scene.layout.StackPane;
import javafx.scene.paint.Color;
import javafx.scene.shape.Circle;
import javafx.stage.Stage;

public class GridPaneWithLines extends Application {


    private StackPane createCell(BooleanProperty cellSwitch) {

        StackPane cell = new StackPane();

        cell.setOnMouseClicked(e -> cellSwitch.set(! cellSwitch.get() ));

        Circle circle = new Circle(10, Color.CORNFLOWERBLUE);

        circle.visibleProperty().bind(cellSwitch);

        cell.getChildren().add(circle);
        cell.getStyleClass().add("cell");
        return cell;
    }

    private GridPane createGrid(BooleanProperty[][] switches) {

        int numCols = switches.length ;
        int numRows = switches[0].length ;

        GridPane grid = new GridPane();

        for (int x = 0 ; x < numCols ; x++) {
            ColumnConstraints cc = new ColumnConstraints();
            cc.setFillWidth(true);
            cc.setHgrow(Priority.ALWAYS);
            grid.getColumnConstraints().add(cc);
        }

        for (int y = 0 ; y < numRows ; y++) {
            RowConstraints rc = new RowConstraints();
            rc.setFillHeight(true);
            rc.setVgrow(Priority.ALWAYS);
            grid.getRowConstraints().add(rc);
        }

        for (int x = 0 ; x < numCols ; x++) {
            for (int y = 0 ; y < numRows ; y++) {
                grid.add(createCell(switches[x][y]), x, y);
            }
        }

        grid.getStyleClass().add("grid");
        return grid;
    }

    @Override
    public void start(Stage primaryStage) {
        int numCols = 5 ;
        int numRows = 5 ;

        BooleanProperty[][] switches = new BooleanProperty[numCols][numRows];
        for (int x = 0 ; x < numCols ; x++) {
            for (int y = 0 ; y < numRows ; y++) {
                switches[x][y] = new SimpleBooleanProperty();
            }
        }

        GridPane grid = createGrid(switches);

        StackPane root = new StackPane(grid);
        Scene scene = new Scene(root, 600, 600);
        scene.getStylesheets().add("grid-with-borders.css");
        primaryStage.setScene(scene);
        primaryStage.show();
    }




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

and the CSS (grid-with-borders.css):

.root {
    -fx-padding: 20 ;
    cell-color: white ;
    cell-border-color: black ;
}
.grid {
    /* 1 pixel border around the top and right of the grid: */
    -fx-background-color: cell-border-color, cell-color ;
    -fx-background-insets: 0, 1 1 0 0 ;
    -fx-padding: 1 ;
}
.cell {
    /* 1 pixel border around the left and bottom of each cell: */
    -fx-background-color: cell-border-color, cell-color ;
    -fx-background-insets: 0, 0 0 1 1 ;
}

Solution 2

This worked for me:

GridPane grid = new GridPane();
grid.setGridLinesVisible(true);

for debug only!

Solution 3

If you are trying to use fxml you can try this:

    <GridPane GridPane.columnIndex="1"  GridPane.rowIndex="0" gridLinesVisible="true">

Solution 4

For every children use:

-fx-border-color: black;
-fx-border-width: 0 0 1 1;

This can be achieved with the yourChildNode.setStyle(css) method for example.

Should one cell contain multiple layouts wrap them in one AnchorPane and apply the CSS on the AnchorPane.

View more solutions

Comments

[RoastedCode]

Thanks, this approach was one the first things that came to my head but i thought there gonna be an out of the box solution :p

[LuminousNutria]

You cannot display the grid lines with only this code. This answer is incomplete.

[SedJ601]

What version of java are you using. They might have did away with this.

[LuminousNutria]

I am using Java 8. In what version of Java does this code work by itself?

[SedJ601]

For a finished product, you should use ideas from James answer.