WPF C#国际象棋开发：彩色矩形上叠加棋子图片的实现问题

当然可以实现底色和棋子图片共存，给你两种实用的方案：

方案1：组合画刷（无需调整布局） #

原来的ImageBrush会直接覆盖Rectangle的底色画刷，我们可以用VisualBrush把底色和棋子图片组合成一个整体画刷，赋值给Rectangle.Fill：

// 1. 创建底色画刷
var backgroundBrush = new SolidColorBrush((Color)ColorConverter.ConvertFromString("#ebecd0"));
// 2. 创建棋子图片画刷并设置缩放规则
var pieceBitmap = new BitmapImage(new Uri(@"pack://application:,,,/Images/bishop_b.png"));
var pieceBrush = new ImageBrush(pieceBitmap);
pieceBrush.Stretch = Stretch.Uniform;

// 3. 用VisualBrush组合底色和棋子
var visual = new DrawingVisual();
using (var dc = visual.RenderOpen())
{
    // 先绘制覆盖整个格子的底色
    dc.DrawRectangle(backgroundBrush, null, new Rect(0, 0, 1, 1));
    // 再绘制居中的棋子（调整Rect参数可控制棋子大小和边距）
    dc.DrawImage(pieceBitmap, new Rect(0.1, 0.1, 0.8, 0.8));
}

// 4. 赋值给格子的Fill属性
a1.Fill = new VisualBrush(visual);

方案2：布局叠加（更直观，推荐） #

利用WPF Grid的叠放特性，把Image控件直接放在Rectangle所在的Grid单元格里，棋子会自动叠在底色上方：

1. 保留原有XAML的底色格子：

<Rectangle x:Name="a1" Grid.Column="1" Grid.Row="7" Fill="#ebecd0"/>

2. 后台创建Image控件并添加到棋盘Grid中：

Image myImage = new Image();
BitmapImage myBitmapImage = new BitmapImage();
myBitmapImage.BeginInit();
myBitmapImage.UriSource = new Uri(@"pack://application:,,,/Images/bishop_b.png");
myBitmapImage.EndInit();
myImage.Source = myBitmapImage;
myImage.Stretch = Stretch.Uniform; // 避免棋子拉伸变形

// 让Image和Rectangle处于同一个Grid单元格
Grid.SetColumn(myImage, 1);
Grid.SetRow(myImage, 7);
// 假设棋盘的容器是名为chessBoard的Grid，将Image加入容器
chessBoard.Children.Add(myImage);

这种方案更贴合WPF的布局逻辑，后续棋子的移动、移除操作直接操作Image控件即可，维护起来更方便。

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