【原创】C# wpf 绘制五子棋游戏界面及实现UI交互

hyq106

已于 2023-10-27 17:46:23 修改

阅读量1.5k

点赞数 2

文章标签： wpf c# ui 游戏

于 2022-11-29 11:58:10 首次发布

本文链接：https://blog.csdn.net/hyq106/article/details/128094420

版权

前言

本文分享如何使用wpf的原生xaml代码绘制五子棋游戏界面，及实现简单的UI交互。

整体效果

效果如下：
在这里插入图片描述

绘制棋盘

在这里插入图片描述
思路：使用两个叠加在一起的Grid：Grid1(19行19列)、Grid2(18行18列)。
1、定义个19行19列的Grid1；
2、在Grid1中填充一个Border，跨越Grid1的所有行和列；
3、在Border中放一个18行18列的Grid2，ShowGridLines设置为true（显示网格线）；
注意：正确设置Border的BorderThickness和Margin，使Grid1中的棋子刚好能落在Grid2的网格线的交叉点上。xaml结构如下：
在这里插入图片描述

棋子设计

在这里插入图片描述
使用RadialGradientBrush绘制棋子光晕。黑色棋子的xaml如下：

	<Grid>
        <Border CornerRadius="15">
            <Border.Background>
                <RadialGradientBrush Center="0.3,0.3" GradientOrigin="0.3,0.3" RadiusX="0.4" RadiusY="0.4">
                    <GradientStop Color="White"/>
                    <GradientStop x:Name="gsColor1" Color="LightGray" Offset="0.2"/>
                    <GradientStop x:Name="gsColor2" Color="Black" Offset="1"/>
                </RadialGradientBrush>
            </Border.Background>
        </Border>
    </Grid>

UI交互

在Grid1上绑定MouseLeftButtonUp事件，根据鼠标坐标计算在Grid1中放置一颗棋子的row和column。

		private void GridBoard_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
        {
            Point p = e.GetPosition(GridBoard);
            int c = (int)p.X / pieceSize;
            int r = (int)p.Y  / pieceSize;
            addPiece(new PieceInfo(c, r,pieceColor));
        }