在WPF中创建国际象棋图形用户界面

Question

在WPF中创建国际象棋图形用户界面

wpfuser-interfacechess

7

首先，如果这是一个重复的帖子，我表示歉意。由于我正在尝试同时发布/注册，事情有点混乱。

我开始研究如何从简单的WPF窗口运行UCI国际象棋引擎，掌握了将国际象棋引擎运行在不同线程上的技巧，并创建了一个相当可靠的基于文本的前端界面。

现在我更加雄心勃勃，想要开始构建一个带有国际象棋棋子的GUI，它可以将玩家的移动传递给国际象棋引擎，并在棋盘上表示引擎的移动。我想实现可拖动的棋子而不是点击方格。

我的当前尝试涉及在

- dogsolitude_uk

1

这个问题不是你的重复，但你可能会感兴趣：https://dev59.com/ZUvSa4cB1Zd3GeqPawPO - Colin Pickard

在http://www.valil.com/winfx/上有一个WPF棋类应用程序示例。如果您正在构建此应用程序，这可能会对您有所帮助。 - Bhuvan

谢谢Colin，非常有趣的帖子 :) - dogsolitude_uk

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Adam Berent · Accepted Answer

我为我的Silverlight 在线棋盘系统实现了一个国际象棋棋盘。

这是我是如何做到的：

我为棋盘制作了一个单独的用户控件。
我在控件上添加了一个8x8的网格。
然后我添加了64个边框，每个边框都有不同的颜色（深色和浅色），确保给每个边框命名。每个边框都使用Grid.Row和Grid.Col属性放置在网格上。
在每个边框内，我添加了一个图像，用于容纳棋子图像。
您需要编写一些方法来设置图像以根据当前游戏状态正确显示棋子。
每个图像都接收相同的事件（这很重要），所有64个调用相同的代码：

MouseLeftButtonDown="Image_MouseLeftButtonDown" MouseMove="Image_MouseMove" MouseLeftButtonUp="Image_MouseLeftButtonUp"

这三个事件的想法是：当我点击图片（MouseLeftButtonDown）时，记录点击的起始位置，然后在鼠标移动时调用事件，以便在棋子移动时更新屏幕。最后一个事件是记录松开鼠标按钮（MouseLeftButtonUp），这允许我获取目的地并将移动发送给我的国际象棋引擎。一旦国际象棋引擎记录了移动，我只需重新绘制国际象棋棋盘即可。

private void Image_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
    Image image = (Image)sender;
    Border border = (Border)image.Parent;

    image.CaptureMouse();
    isMouseCapture = true;
    mouseXOffset = e.GetPosition(border).X;
    mouseYOffset = e.GetPosition(border).Y;

    var chessPiece = (Image) sender;
    var chessSquare = (Border) chessPiece.Parent;

    var row = (byte) (Grid.GetRow(chessSquare));
    var column = (byte) (Grid.GetColumn(chessSquare) - 1);

    if (engine.HumanPlayer == ChessPieceColor.White)
    {
        SelectionChanged(row, column, false);
    }
    else
    {
        SelectionChanged((byte)(7 - row), (byte)(7 - column), false);
    }
}

SelectionChanged是我自己的方法，用于记录用户选择的源方格。 isMouseCapture也是我自己的变量，用于记录用户何时开始拖动棋子。

private void Image_MouseMove(object sender, MouseEventArgs e)
{

    Image image = (Image)sender;
    Border border = (Border)image.Parent;


    if (!currentSource.Selected)
    {
        image.ReleaseMouseCapture();
        isMouseCapture = false;

        translateTransform = new TranslateTransform();

        translateTransform.X = 0;
        translateTransform.Y = 0;

        mouseXOffset = 0;
        mouseYOffset = 0;
    }



    if (isMouseCapture)
    {
        translateTransform = new TranslateTransform();

        translateTransform.X = e.GetPosition(border).X - mouseXOffset;
        translateTransform.Y = e.GetPosition(border).Y - mouseYOffset;

        image.RenderTransform = translateTransform;

        CalculateSquareSelected((int)translateTransform.X, (int)translateTransform.Y, false);


    }
}

在上面的CalculareSquareSelected函数中，将移动的像素转换为我认为棋子在8x8棋盘上所移动的位置。例如，假设我移动了100个像素，而棋盘方格只有50个像素，那么我就移动了2个棋盘方格。

private void Image_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
{
    if (translateTransform == null)
    {
        return;
    }

    Image image = (Image)sender;

    image.ReleaseMouseCapture();
    isMouseCapture = false;

    if (translateTransform.X > 10 || translateTransform.Y > 10 || translateTransform.X < -10 || translateTransform.Y < -10)
    {
        CalculateSquareSelected((int)translateTransform.X, (int)translateTransform.Y, true);
    }
    translateTransform = new TranslateTransform();

    translateTransform.X = 0;
    translateTransform.Y = 0;

    mouseXOffset = 0;
    mouseYOffset = 0;

    image.RenderTransform = translateTransform;

}

如果您有任何问题，请随时与我联系。