wpf 编写连连看布局

最新推荐文章于 2020-07-17 00:11:09 发布

原创最新推荐文章于 2020-07-17 00:11:09 发布 · 1.3k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#C# #传智播客 #WPF #编程语言 #布局

C# 同时被 2 个专栏收录

13 篇文章

订阅专栏

WPF

4 篇文章

订阅专栏

本文介绍了使用WPF进行连连看游戏的布局设计，通过10x10的行列布局，利用Img元素替代Button展示，并详细讲解了如何生成随机数以实现图片的随机分布，从而完成连连看游戏的基础布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先布局分成10行10列

 for (int i = 0; i < 10; i++)
            {
                ColumnDefinition colDef = new ColumnDefinition();
                gridGame.ColumnDefinitions.Add(colDef);

                RowDefinition rowDef = new RowDefinition();
                gridGame.RowDefinitions.Add(rowDef);
            }

再为每个空格填入一个button，并在button中显示他所在的行列

 for (int i = 0; i < 10; i++)
            {
                for (int j = 0; j < 10; j++)
                {
                    Button btn = new Button();
                    btn.Content = i + "," + j;

                    //通过代码修改控件的Grid.Row属性
                    Grid.SetRow(btn, i);
                    Grid.SetColumn(btn, j);

                    gridGame.Children.Add(btn);
                }
            }

显示效果如下

现在看到能够正常生成所以现在把button去掉，用img显示

     		    Image img = new Image();
                    img.Source = new BitmapImage(new Uri("1.jpg",UriKind.Relative));//图片路径
                    Grid.SetRow(img, i);
                    Grid.SetColumn(img, j);
                    gridGame.Children.Add(img);

效果如下：

怎样生成随机数呢？？

            Random random = new Random();
            int i1= random.Next(0, 99);//生成一个>=0,<99的随机整数
            int i2=  random.Next(3, 9);//生成一个>=3,<9的随机整数

好了，知道了原理那么就可以随机生成1-9个随机图片了，只需把上面显示固定连接的照片修改一下

                    int imgName = random.Next(1, 10);//生成>=1,<10的随机数

                    Image img = new Image();
                    //代码给Source属性赋值
                    img.Source = new BitmapImage(new Uri("Images/"+imgName+".png",UriKind.Relative));//图片路径
                    Grid.SetRow(img, i);
                    Grid.SetColumn(img, j);
                    gridGame.Children.Add(img);

好了效果图如下：