Removing button padding or margin in a GridLayout?


#1

I’m having a difficult time removing extra space between Button objects inside a GridLayout. I’m basically making a chessboard and building the items dynamically. Excerpt of my code is below, but as you can see I have tried setting margin, borderWidth and padding, to no avail. I’ve also included a screenshot of how it is appearing. I want the squares to have no border between them. I used Button because it comes with the Tap event, if there is a better way please let me know. (Sorry the code is kind of messy. I can post the entire source if that would be helpful, it’s not much longer than this.)

Basically my question is, does a GridLayout (or its rows/columns/cells) have a default padding or margin between cells? And does a Button have default padding/margin? And how to set those to zero? Thanks!

var squareCount = 0;			// 0 to 63
var scale = platform.screen.mainScreen.scale;
    var screenWidth = page.getMeasuredWidth() / scale;
var screenHeight = page.getMeasuredHeight() / scale;

squareWidth = (screenWidth > screenHeight ? screenHeight : screenWidth) / 8;
	
var stack = new stackLayout.StackLayout();

var grid = new GridLayout();
grid.paddingTop = grid.paddingLeft = grid.paddingBottom = grid.paddingRight = 0;
	
for (y=0; y<8; y++)
{
	var row = new ItemSpec(squareWidth, GridUnitType.PIXEL);
	row.paddingTop = row.paddingLeft = row.paddingBottom = row.paddingRight = 0;
	row.margin = 0;
	row.borderWidth = 0;
	grid.addRow(row);
	for (x=0; x<8; x++)
	{
		var col = new ItemSpec(squareWidth, GridUnitType.PIXEL);
		col.paddingTop = col.paddingLeft = col.paddingBottom = col.paddingRight = 0;
		col.margin = 0;
		col.borderWidth = 0;
		grid.addColumn(col);
		var square = new Button();
		square.width = squareWidth;
		square.height = squareWidth;
		square.effectiveWidth = squareWidth;
		square.effectiveHeight = squareWidth;
		square.text = "X";
		square.row = y;
		square.col = x;
		square.borderWidth = 0;
		square.padding = 0;
		
		if (y % 2 == 0)
			square.backgroundColor = (squareCount++ % 2 == 0 ? "white" : "gray");
		else
			square.backgroundColor = (squareCount++ % 2 == 0 ? "gray" : "white");
		
		if (squareCount == 63)
			square.backgroundImage = "res://testpiece";
		
		square.margin = "0";
		grid.addChild(square);
	}		
}

stack.addChild(grid);

page.content = stack;