web-dev-qa-db-ja.com

GridPaneオブジェクトのグリッド線を永続的に、そしてsetGridLinesVisible（）メソッドを使用せずに表示する方法は？

setGridLinesVisible()を使用せずに、すべてのGridPaneのグリッド線を永続的に表示することは可能ですか？

setGridLinesVisible()はデバッグのみを目的としており、エンドユーザーの便宜のためにグリッド線を表示したいと思います。

また、キャンバスではなくペインコンテナで作業する必要があります。

私のプログラムでは、ペインタイプまたはペインサブタイプの親コンテナでシェイプオブジェクトやグループを追加、削除、変更、移動などできます。

ありがとう

javauser-interfacejavafxgridpanepane
6
RoastedCode

これを行うかどうかは、セットアップ方法によって多少異なります。あなたのアプリケーションの説明から、私が同様のものを実験したとき、私はいつもグリッドをある種の空のPanesで埋めてセルとして機能させ、次にそれに基づいてそれらのコンテンツを操作するのが便利だと思いましたモデル内のデータ。このアプローチを使用する場合、CSSを使用して「セル」に境界線を配置することができます（たとえば、ネストされた背景を使用）。これにより、グリッド線の効果が得られます。

このアプローチの簡単な例を次に示します。

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

および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 ;
}
9
James_D

これは私のために働きました：

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

デバッグのみ！

6
Sedrick

Fxmlを使用しようとしている場合は、これを試すことができます。

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

すべての子供たちのために：

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

これは、たとえばyourChildNode.setStyle(css)メソッドで実現できます。

1つのセルに複数のレイアウトが含まれている場合は、それらを1つのAnchorPaneにラップして、CSSをAnchorPaneに適用します。

0
nullmn