WPF项目中XAML为Grid网格单元格加无重叠边框的简写方法问询

可行简化方案 #

WPF原生Grid没有内置的自动生成单元格边框的属性，你可以通过以下两种方案大幅缩减代码量，实现完全一致的无重叠边框效果：

方案1：用UniformGrid+样式复用（改动最小，代码量减少80%以上） #

UniformGrid无需逐一定义行列配置，配合样式复用可以快速实现效果，示例代码如下：

<!-- 外层Border实现外边框 -->
<Border Width="675" Height="675" BorderBrush="Black" BorderThickness="2"
        VerticalAlignment="Bottom" HorizontalAlignment="Left" Margin="10,0,0,10">
    <UniformGrid Rows="15" Columns="15">
        <!-- 只需要定义1次样式，所有单元格自动复用 -->
        <UniformGrid.Resources>
            <Style TargetType="Border">
                <Setter Property="BorderBrush" Value="Black"/>
                <!-- 调整边框厚度避免重叠：只保留右边和下边的2px边框，外边框已经由外层Border实现 -->
                <Setter Property="BorderThickness" Value="0,0,2,2"/>
            </Style>
        </UniformGrid.Resources>
        <!-- 如需进一步简化可配合ItemsControl绑定自动生成所有单元格，无需手动写225个Border -->
        <Border/>
        <Border/>
        <!-- 省略剩余223个Border -->
    </UniformGrid>
</Border>

配合ItemsControl实现完全自动生成单元格的写法：

<Border Width="675" Height="675" BorderBrush="Black" BorderThickness="2"
        VerticalAlignment="Bottom" HorizontalAlignment="Left" Margin="10,0,0,10">
    <ItemsControl ItemsSource="{Binding Enumerable.Range(0,225)}">
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <UniformGrid Rows="15" Columns="15"/>
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <Border BorderBrush="Black" BorderThickness="0,0,2,2"/>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>
</Border>

方案2：自定义Grid附加属性（一次定义，所有Grid都可以直接用） #

你可以为Grid自定义附加属性，实现自动生成单元格边框的能力，后续使用时只需给Grid加几个属性即可，无需写任何Border代码：

1. 先定义GridHelper辅助类：

public static class GridHelper
{
    public static readonly DependencyProperty ShowCellBordersProperty =
        DependencyProperty.RegisterAttached("ShowCellBorders", typeof(bool), typeof(GridHelper), new PropertyMetadata(false, OnShowCellBordersChanged));

    public static bool GetShowCellBorders(DependencyObject obj) => (bool)obj.GetValue(ShowCellBordersProperty);
    public static void SetShowCellBorders(DependencyObject obj, bool value) => obj.SetValue(ShowCellBordersProperty, value);

    private static void OnShowCellBordersChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
        if (d is not Grid grid || !(bool)e.NewValue) return;
        grid.Loaded += (s, _) =>
        {
            int rows = grid.RowDefinitions.Count;
            int cols = grid.ColumnDefinitions.Count;
            // 生成横向边框
            for (int i = 0; i < rows; i++)
            {
                var border = new Border 
                { 
                    BorderBrush = Brushes.Black, 
                    BorderThickness = i == 0 ? new Thickness(2,2,2,2) : new Thickness(2,0,2,2) 
                };
                Grid.SetRow(border, i);
                Grid.SetColumnSpan(border, cols);
                grid.Children.Add(border);
            }
            // 生成纵向隔列边框，匹配你原需求的间隔规则
            for (int j = 1; j < cols; j+=2)
            {
                var border = new Border { BorderBrush = Brushes.Black, BorderThickness = new Thickness(2,0,0,0) };
                Grid.SetColumn(border, j);
                Grid.SetRowSpan(border, rows);
                grid.Children.Add(border);
            }
        };
    }
}

2. XAML中使用时只需如下写法，和你原来的效果完全一致：

<Grid Width="675" Height="675" VerticalAlignment="Bottom" HorizontalAlignment="Left" Margin="10,0,0,10"
      local:GridHelper.ShowCellBorders="True">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="45"/>
        <!-- 省略剩余14个ColumnDefinition，也可扩展附加属性实现自动生成指定数量的行列 -->
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="45"/>
        <!-- 省略剩余14个RowDefinition -->
    </Grid.RowDefinitions>
</Grid>

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