使用WPF教你一步一步实现连连看(一)

第一步:

  问题,怎样动态的建立一个10*10的grid(布局)

第二步:

  问题,怎样将button放到上边那个布局中(这个是我查资料才知道的,一般都是用Grid在前台布局)

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

  btn.Content = i + "," + j;
  Grid.SetColumn(btn, j);
  Grid.SetRow(btn, i);

  GridGame.Children.Add(btn);
}
}

效果如图1

第三步:

  问题3,怎样将Button的内容换成随机图片呢?

Random random = new Random();


for (int i = 0; i < 10; i++)
{
for (int j = 0; j < 10; j++)
{
int imgName = random.Next(1, 10);//生成一个>=1,<10的随机数

Image img = new Image();
img.Source = new BitmapImage(new Uri("images/" + imgName + ".png", UriKind.Relative));


Button btn = new Button();
btn.Content = img;

Grid.SetColumn(btn, j);
Grid.SetRow(btn, i);

GridGame.Children.Add(btn);
}
}

效果如图

  这里需要注意一点,不要把Random random = new Random();这句放到循环里面,不然会变成这样 图

第四步:

  上面我们已经完成了LLK的布局,下面咱们实现Button的点击事件,并实现点击

两个相同背景的button进行消除。问题又来,我们怎么判断两个button是相同背景呢。

我们来重写Button,给它增加几个属性:

 public class MyButton : Button
    {
        //button标示,用于判断两个按钮是否为同一个
        public int Flag { get; set; }

        //Button所在行
        public int RowNum { get; set; }

        //所在列
        public int ColNum { get; set; }

        public MyButton(int flag,int rowNum,int colNum)
        {
            this.Flag = flag;
            this.RowNum = romNum;
            this.ColNum = colNum;
        }
    }

好了,有了判断依据,我们就可以写点击事件了

 MyButton btn1;
        MyButton btn2;
        int ClickCount = 0;
        void btn_Click(object sender, RoutedEventArgs e)
        {
            ++ClickCount;
            if (ClickCount == 1)
            {
                btn1 = sender as MyButton;
            }
            else if(ClickCount==2)
            {
                btn2 = sender as MyButton;

                if (btn1 != null && btn2 != null)
                {
                    if (btn1.Flag == btn2.Flag&&!(btn1.ColNum==btn2.ColNum&&btn1.RowNum==btn2.RowNum))
                    {
                        btn1.Visibility = Visibility.Hidden;
                        btn2.Visibility = Visibility.Hidden;
                    }

                }
                btn1 =null;
                btn2 = null;
                ClickCount = 0;
            }
        }

好了,我们现在完成了最基本点击消除功能

运行效果如下:

完整代码如下:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace llk
{
    /// <summary>
    /// MainWindow.xaml 的交互逻辑
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            Add();
        }
        public void Add()
        {
            Random random = new Random();

            for (int i = 0; i < 10; i++)
            {
                RowDefinition rowDef = new RowDefinition();
                GridGame.RowDefinitions.Add(rowDef);

                ColumnDefinition colDef = new ColumnDefinition();
                GridGame.ColumnDefinitions.Add(colDef);
            }

            for (int i = 0; i < 10; i++)
            {
                for (int j = 0; j < 10; j++)
                {
                    int imgName = random.Next(1, 10);//生成一个>=1,<21的随机数

                    Image img = new Image();
                    img.Source = new BitmapImage(new Uri("images/" + imgName + ".png", UriKind.Relative));


                    MyButton btn = new MyButton(imgName,i,j);
                    btn.Content = img;
                    btn.Click += btn_Click;
                    Grid.SetColumn(btn, j);
                    Grid.SetRow(btn, i);

                    GridGame.Children.Add(btn);
                }
            }
        }

        MyButton btn1;
        MyButton btn2;
        int ClickCount = 0;
        void btn_Click(object sender, RoutedEventArgs e)
        {
            ++ClickCount;
            if (ClickCount == 1)
            {
                btn1 = sender as MyButton;
            }
            else if(ClickCount==2)
            {
                btn2 = sender as MyButton;

                if (btn1 != null && btn2 != null)
                {
                    if (btn1.Flag == btn2.Flag&&!(btn1.ColNum==btn2.ColNum&&btn1.RowNum==btn2.RowNum))
                    {
                        btn1.Visibility = Visibility.Hidden;
                        btn2.Visibility = Visibility.Hidden;
                    }

                }
                btn1 =null;
                btn2 = null;
                ClickCount = 0;
            }
        }

      
    }
    public class MyButton : Button
    {
        //button标示,用于判断两个按钮是否为同一个
        public int Flag { get; set; }

        //Button所在行
        public int RowNum { get; set; }

        //所在列
        public int ColNum { get; set; }

        public MyButton(int flag,int romNum,int colNum)
        {
            this.Flag = flag;
            this.RomNum = romNum;
            this.ColNum = colNum;
        }
    }
}

 是不是很简单啊,下一步我们加入规则算法……

  ----- 未完待续……------

 另外谁能告诉我怎么上传源代码吗,直接发出来太占篇幅了……

哈,知道怎么上传了,现把图片发一下,资源图片,便于你们试验用……

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏知识分享

9-51单片机ESP8266学习-AT指令(测试TCP服务器--51单片机程序配置8266,C#TCP客户端发信息给单片机控制小灯的亮灭)

http://www.cnblogs.com/yangfengwu/p/8780182.html 自己都是现做现写,如果想知道最终实现的功能,请看最后 先把源...

3994
来自专栏Golang语言社区

fasthttp中的协程池实现

fasthttp中的协程池实现 协程池可以控制并行度,复用协程。fasthttp 比 net/http 效率高很多倍的重要原因,就是利用了协程池。实现并不复杂,...

4929
来自专栏林德熙的博客

本文说如何显示SVG

这些图片在http://www.zcool.com.cn/,不知道是不是不能直接用 我们需要一个看起来不会模糊,因为矢量图,所以我们就使用svg,其实png也...

352
来自专栏菩提树下的杨过

sliverlight:CompositionTarget.Rendering 的问题

sliverlight中一个用户自定义控件(比如MyControl.xaml)如果注册了CompositionTarget.Rendering事件(相当于Fla...

1835
来自专栏守望轩

在gridview和datagrid里设置列宽

无论是gridview还是datagrid,在绑定数据后,列宽都不是固定的,在设计时是没法设定的,只能通过绑定是触发的事件来重新设定。参考http://msdn...

1889
来自专栏偏前端工程师的驿站

GridView实战一:自定义分页、排序、修改、插入、删除

前言:   在某次公司面试时被问到对GridView操作的熟悉程度,在那之前一直用Repeater内嵌table标签对GridView操作确实很少,于是最近在项...

29810
来自专栏.NET技术

编写自己的dapper lambda扩展-使用篇

这是针对dapper的一个扩展,支持lambda表达式的写法,链式风格让开发者使用起来更加优雅、直观。现在暂时只有MsSql的扩展,也没有实现事务的写法,将会在...

752
来自专栏GuZhenYin

使用localResizeIMG3+WebAPI实现手机端图片上传

前言 惯例~惯例~昨天发表的使用OWIN作为WebAPI的宿主..嗯..有很多人问..是不是缺少了什么 - - 好吧,如果你要把OWIN寄宿在其他的地方...代...

1908
来自专栏逸鹏说道

在创建带输出参数和返回值的存储过程时---犯下的一个低级错误

异常处理汇总-数据库系列 http://www.cnblogs.com/dunitian/p/4522990.html 后期会在博客首发更新:http://d...

26411
来自专栏.Net移动开发

.Net语言 APP开发平台——Smobiler学习日志:在手机应用开发中如何快速实现应用间的分享功能

864

扫码关注云+社区