如何解决WPF Grid中按钮单元格重叠并实现带间隙的居中按钮网格？

• 列定义逻辑错误：ColumnDefinition创建逻辑放在了内层j循环中，每生成一行都会新增gridSize个列，最终总列数变为gridSize * gridSize，但行数仅为gridSize，按钮的行列索引匹配完全错乱，是重叠的核心原因。
• 行列权重不匹配：行高设置为1000星、列宽设置为20星，会导致单元格长宽比例失衡，无法满足正方形单元格的要求。
• 布局属性缺失：未显式指定按钮在单元格内的对齐规则，也没有配置边距实现间距效果。
• 代码语法错误：RowDefinition实例化代码拼写不全（原代码写为new RowDefin），会导致编译报错。

后台逻辑修正 #

// 第一步：统一创建行和列（列定义移到外层循环外，避免重复创建）
for (int i = 0; i < gridSize; i++)
{
    // 修复拼写错误
    RowDefinition r = new RowDefinition();
    // 行列权重统一设为1星，保证单元格是正方形
    r.Height = new GridLength(1, GridUnitType.Star);
    grid.RowDefinitions.Add(r);

    ColumnDefinition c = new ColumnDefinition();
    c.Width = new GridLength(1, GridUnitType.Star);
    grid.ColumnDefinitions.Add(c);
}

// 第二步：批量生成按钮
for (int i = 0; i < gridSize; i++)
{
    for (int j = 0; j < gridSize; j++)
    {
        Button b = new Button();
        b.Width = 20;
        b.Height = 20;
        b.Background = Brushes.Transparent;
        // 设置按钮在单元格内居中
        b.HorizontalAlignment = HorizontalAlignment.Center;
        b.VerticalAlignment = VerticalAlignment.Center;
        // 配置Margin实现按钮间距，可按需调整数值
        b.Margin = new Thickness(4);
        
        Grid.SetRow(b, i);
        Grid.SetColumn(b, j);
        grid.Children.Add(b);
    }
}

Grid控件可选调整 #

如果要严格保证单元格为正方形，建议将Grid的宽高设置为相同数值，避免拉伸变形：

<Grid  Margin="0,0,0,-6" 
      RenderTransformOrigin="0.505,0.323" 
      HorizontalAlignment="Right" 
      Width="610" Height="610" 
      VerticalAlignment="Bottom">

内容的提问来源于stack exchange，提问作者curiousMind_85