如何为UniformGrid单元格添加边框？回合制战棋场景网格选型咨询

一、给UniformGrid单元格添加边框的可行方案 #

无需更换控件，通过给每个单元格内容嵌套Border控件即可实现边框效果：

• 静态编写XAML时，每个单元格外层包裹Border，设置BorderThickness（边框粗细）和BorderBrush（边框颜色），同时通过Margin="-1"避免相邻边框叠加出现粗线，实现无缝衔接：

<UniformGrid x:Name="BattleGrid" Rows="5" Columns="5">
    <Border BorderThickness="1" BorderBrush="Gray" Margin="-1">
        <!-- 单元格内的内容，比如角色图标、地形标记等 -->
        <Grid>
            <!-- 内容元素 -->
        </Grid>
    </Border>
    <!-- 重复添加其他单元格 -->
</UniformGrid>

• 后台动态生成单元格时，逻辑一致：

for (int i = 0; i < BattleGrid.Rows * BattleGrid.Columns; i++)
{
    var cellBorder = new Border
    {
        BorderThickness = new Thickness(1),
        BorderBrush = Brushes.Gray,
        Margin = new Thickness(-1)
    };
    // 替换为实际的单元格内容控件
    cellBorder.Child = new Grid();
    BattleGrid.Children.Add(cellBorder);
}

二、更适配战场需求的替代网格方案 #

如果UniformGrid的灵活性无法满足复杂战场逻辑，以下两种控件更适合：

1. Grid控件
   • 支持通过后台代码动态添加RowDefinition和ColumnDefinition，轻松实现用户编辑战场尺寸的需求
   • 可针对单个单元格设置差异化边框样式，适合需要标记特殊地形、高亮可交互格子的场景
2. ItemsControl结合UniformGrid作为ItemsPanel
   • 适配MVVM模式，当战场单元格需要绑定状态数据（如格子归属、是否有角色）时，这种方案更易维护
   • 核心结构示例：

<ItemsControl ItemsSource="{Binding BattleCells}">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <UniformGrid Rows="{Binding GridRows}" Columns="{Binding GridColumns}"/>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Border BorderThickness="1" BorderBrush="Gray" Margin="-1">
                <!-- 绑定单元格数据的内容 -->
                <TextBlock Text="{Binding CellId}"/>
            </Border>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

• 这种方式能批量管理单元格状态，简化复杂战场的逻辑维护

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