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

∥☆過路亽.° 提交于 2019-12-01 17:25:58

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 ;
}

This worked for me:

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

for debug only!

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

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

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.

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!