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

第一步:

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

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

  1.  

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

第二步:

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

  1. for (int i = 0; i < 10; i++)
  2. {
  3.   for (int j = 0; j < 10; j++)
  4. {
  5.   Button btn = new Button();
  6.  
  7.   btn.Content = i + "," + j;
  8.   Grid.SetColumn(btn, j);
  9.   Grid.SetRow(btn, i);
  10.  
  11.   GridGame.Children.Add(btn);
  12. }
  13. }

效果如图1

第三步:

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

    

  1. Random random = new Random();
  2.  
  3. for (int i = 0; i < 10; i++)
  4. {
  5. for (int j = 0; j < 10; j++)
  6. {
  7. int imgName = random.Next(1, 10);//生成一个>=1,<10的随机数
  8.  
  9. Image img = new Image();
  10. img.Source = new BitmapImage(new Uri("images/" + imgName + ".png", UriKind.Relative));
  11.  
  12. Button btn = new Button();
  13. btn.Content = img;
  14.  
  15. Grid.SetColumn(btn, j);
  16. Grid.SetRow(btn, i);
  17.  
  18. GridGame.Children.Add(btn);
  19. }
  20. }

效果如图

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

第四步:

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

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

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

  

  1. public class MyButton : Button
  2. {
  3. //button标示,用于判断两个按钮是否为同一个
  4. public int Flag { get; set; }
  5.  
  6. //Button所在行
  7. public int RomNum { get; set; }
  8.  
  9. //所在列
  10. public int ColNum { get; set; }
  11.  
  12. public MyButton(int flag,int romNum,int colNum)
  13. {
  14. this.Flag = flag;
  15. this.RomNum = romNum;
  16. this.ColNum = colNum;
  17. }
  18. }

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

  1. MyButton btn1;
  2. MyButton btn2;
  3. int ClickCount = 0;
  4. void btn_Click(object sender, RoutedEventArgs e)
  5. {
  6. ++ClickCount;
  7. if (ClickCount == 1)
  8. {
  9. btn1 = sender as MyButton;
  10. }
  11. else if(ClickCount==2)
  12. {
  13. btn2 = sender as MyButton;
  14.  
  15. if (btn1 != null && btn2 != null)
  16. {
  17. if (btn1.Flag == btn2.Flag&&!(btn1.ColNum==btn2.ColNum&&btn1.RomNum==btn2.RomNum))
  18. {
  19. btn1.Visibility = Visibility.Hidden;
  20. btn2.Visibility = Visibility.Hidden;
  21. }
  22.  
  23. }
  24. btn1 =null;
  25. btn2 = null;
  26. ClickCount = 0;
  27. }
  28. }

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

运行效果如下:

完整代码如下:

  1. using System;
  2. using System.Collections.Generic;
  3. using System.Linq;
  4. using System.Text;
  5. using System.Threading.Tasks;
  6. using System.Windows;
  7. using System.Windows.Controls;
  8. using System.Windows.Data;
  9. using System.Windows.Documents;
  10. using System.Windows.Input;
  11. using System.Windows.Media;
  12. using System.Windows.Media.Imaging;
  13. using System.Windows.Navigation;
  14. using System.Windows.Shapes;
  15.  
  16. namespace llk
  17. {
  18. /// <summary>
  19. /// MainWindow.xaml 的交互逻辑
  20. /// </summary>
  21. public partial class MainWindow : Window
  22. {
  23. public MainWindow()
  24. {
  25. InitializeComponent();
  26. Add();
  27. }
  28. public void Add()
  29. {
  30. Random random = new Random();
  31.  
  32. for (int i = 0; i < 10; i++)
  33. {
  34. RowDefinition rowDef = new RowDefinition();
  35. GridGame.RowDefinitions.Add(rowDef);
  36.  
  37. ColumnDefinition colDef = new ColumnDefinition();
  38. GridGame.ColumnDefinitions.Add(colDef);
  39. }
  40.  
  41. for (int i = 0; i < 10; i++)
  42. {
  43. for (int j = 0; j < 10; j++)
  44. {
  45. int imgName = random.Next(1, 10);//生成一个>=1,<21的随机数
  46.  
  47. Image img = new Image();
  48. img.Source = new BitmapImage(new Uri("images/" + imgName + ".png", UriKind.Relative));
  49.  
  50. MyButton btn = new MyButton(imgName,i,j);
  51. btn.Content = img;
  52. btn.Click += btn_Click;
  53. Grid.SetColumn(btn, j);
  54. Grid.SetRow(btn, i);
  55.  
  56. GridGame.Children.Add(btn);
  57. }
  58. }
  59. }
  60.  
  61. MyButton btn1;
  62. MyButton btn2;
  63. int ClickCount = 0;
  64. void btn_Click(object sender, RoutedEventArgs e)
  65. {
  66. ++ClickCount;
  67. if (ClickCount == 1)
  68. {
  69. btn1 = sender as MyButton;
  70. }
  71. else if(ClickCount==2)
  72. {
  73. btn2 = sender as MyButton;
  74.  
  75. if (btn1 != null && btn2 != null)
  76. {
  77. if (btn1.Flag == btn2.Flag&&!(btn1.ColNum==btn2.ColNum&&btn1.RomNum==btn2.RomNum))
  78. {
  79. btn1.Visibility = Visibility.Hidden;
  80. btn2.Visibility = Visibility.Hidden;
  81. }
  82.  
  83. }
  84. btn1 =null;
  85. btn2 = null;
  86. ClickCount = 0;
  87. }
  88. }
  89.  
  90. }
  91. public class MyButton : Button
  92. {
  93. //button标示,用于判断两个按钮是否为同一个
  94. public int Flag { get; set; }
  95.  
  96. //Button所在行
  97. public int RomNum { get; set; }
  98.  
  99. //所在列
  100. public int ColNum { get; set; }
  101.  
  102. public MyButton(int flag,int romNum,int colNum)
  103. {
  104. this.Flag = flag;
  105. this.RomNum = romNum;
  106. this.ColNum = colNum;
  107. }
  108. }
  109. }

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

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

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

收藏
关注
评论
 
分类: WPF

使用WPF教你一步一步实现连连看的更多相关文章

  1. 一步一步教你如何在linux下配置apache+tomcat(转)

    一步一步教你如何在linux下配置apache+tomcat   一.安装前准备. 1.   所有组件都安装到/usr/local/e789目录下 2.   解压缩命令:tar —vxzf 文件名(. ...

  2. 一步一步教你将普通的wifi路由器变为智能广告路由器

    一步一步教你将普通的wifi路由器变为智能广告路由器 相信大家对WiFi智能广告路由器已经不再陌生了,现在很多公共WiFi上网,都需要登录并且验证,这也就是WiFi广告路由器的最重要的功能.大致就是下 ...

  3. 一步一步教你使用Git

    一步一步教你使用Git 互联网给我们带来方便的同时,也时常让我们感到困惑.随便搜搜就出一大堆结果,然而总是有大量的重复和错误.小妖发出的内容,都是自己实测过的,有问题请留言. 现在,你已经安装了Git ...

  4. 一步一步教你用 Vue.js + Vuex 制作专门收藏微信公众号的 app

    一步一步教你用 Vue.js + Vuex 制作专门收藏微信公众号的 app 转载 作者:jrainlau 链接:https://segmentfault.com/a/1190000005844155 ...

  5. Ace教你一步一步做Android新闻客户端(一)

    复制粘贴了那么多博文很不好意思没点自己原创的也说不出去,现在写一篇一步一步教你做安卓新闻客户端,借此机会也是让自己把相关的技术再复习一遍,大神莫笑,专门做给新手看. 手里存了两篇,一个包括软件视图 和 ...

  6. 一步一步教你实现iOS音频频谱动画(二)

    如果你想先看看最终效果再决定看不看文章 -> bilibili 示例代码下载 第一篇:一步一步教你实现iOS音频频谱动画(一) 本文是系列文章中的第二篇,上篇讲述了音频播放和频谱数据计算,本篇讲 ...

  7. 一步一步教你实现iOS音频频谱动画(一)

    如果你想先看看最终效果再决定看不看文章 -> bilibili 示例代码下载 第二篇:一步一步教你实现iOS音频频谱动画(二) 基于篇幅考虑,本次教程分为两篇文章,本篇文章主要讲述音频播放和频谱 ...

  8. 通过Dapr实现一个简单的基于.net的微服务电商系统(四)——一步一步教你如何撸Dapr之订阅发布

    之前的章节我们介绍了如何通过dapr发起一个服务调用,相信看过前几章的小伙伴已经对dapr有一个基本的了解了,今天我们来聊一聊dapr的另外一个功能--订阅发布 目录:一.通过Dapr实现一个简单的基 ...

  9. 通过Dapr实现一个简单的基于.net的微服务电商系统(三)——一步一步教你如何撸Dapr

    目录:一.通过Dapr实现一个简单的基于.net的微服务电商系统 二.通过Dapr实现一个简单的基于.net的微服务电商系统(二)--通讯框架讲解 三.通过Dapr实现一个简单的基于.net的微服务电 ...

随机推荐

  1. C# WebBrowser 代理的使用

    原文:C# WebBrowser 代理的使用 The WebBrowser control is just an embeddded IE Control, I believe any setting ...

  2. Ubuntu更改hosts档

    Ubuntu更改hosts档 打开hosts档 sudo gedit /etc/hosts 下载hosts,并全选复制 hosts 粘贴到hosts文件里.保存就可以 $(function () { ...

  3. 程序员面试必备经典CTCI,谷歌面试官经典作品!

    1.1 判断一个字符串中的字符是否唯一 1.2 字符串翻转 1.3 去除字符串中重复字符 1.8 利用已知函数判断字符串是否为另一字符串的子串 2.1 从链表中移除重复结点 2.2 实现一个算法从一个 ...

  4. view components介绍

    view components介绍 在ASP.NET MVC 6中,view components (VCs) 功能类似于虚拟视图,但是功能更加强大. VCs兼顾了视图和控制器的优点,你可以把VCs ...

  5. WebStorm中Node.js项目配置教程(1)——创建项目

    Node.js绝对是一个web开发的热点话题,作为web神器的WebStorm也是开发Node.js的佼佼者. 接下来就Node.js项目在WebStorm的配置操作就行详细的讲解,首先是创建项目.两 ...

  6. mvc拦截器

    在ASP.NET MVC中,有三种拦截器:Action拦截器.Result拦截器和Exception拦截器.这里说的是第一种和第三种.其实所谓的ASP.NET MVC拦截器,也没什么神秘的,就是一个普 ...

  7. Goldeneye.py网站压力测试工具2.1版源码

    Goldeneye压力测试工具的源代码,粗略看了下,代码写的蛮规范和易读的,打算边读边加上了中文注释,但是想来也没太大必要,代码600多行,值得学习的地方还是蛮多的,喜欢Python的同学可以一读 这 ...

  8. Text Justification 实现两端对齐功能

    实现office word中的两端对齐功能. 只有个单词时,右边补齐空格.最后一行每个词间一个空格,整下的空格右边补齐.给定字符串,和每行的字符数L.进行两端对齐输出. 我的思路是写一个函数,给定相应 ...

  9. 常用Jquery插件整理大全

    做项目的时候总是少不了要用到Jquery插件,但是Jquery插件有太多,每次都要花费一些时间,因此本人就抽时间整理了一些Jquery插件,每个插件都有Demo或者是使用文档供大家下载.整理了一晚上才 ...

  10. .Net中批量更新或添加数据

    方法一:使用SqlBulkCopy实现批量更新或添加数据. SqlBulkCopy类一般只能用来将数据批量插入打数据库中,如果数据表中设置了主键,出现重复数据的话会报错,如果没有设置主键,那么将会添加 ...