【wpf】实现一个简单的连连看功能

 是自己刚学wpf，跟着网上教程学的

 第一步：设置Grid布局

准备做成6*6布局的样式

可以利用for循环动态实现（将Grid命名为MyGrid）

for (int i = 0; i < 6; i++)//用for循环将Grid分成6行6列
{
    RowDefinition row = new RowDefinition();
    ColumnDefinition col = new ColumnDefinition();
    MyGrid.RowDefinitions.Add(row);
    MyGrid.ColumnDefinitions.Add(col);
}

这个时候运行效果看不出来，因为grid的分割线默认不显示，可以将grid属性的ShowGridLines改为true，运行就可以看到如下效果

第二步：放置button控件

依然用for循环的方式，在每行每列放置一个Button控件

for (int i = 0; i < 6; i++)//将Button放入6行6列的布局中(一行一行循环，共6行）
{
    for (int j = 0; j < 6; j++)//每行6 列
    {
        Button button = new Button();
        button.Content = i + "," + j;//将每个button内容换成编号
        Grid.SetColumn(button, j);
        Grid.SetRow(button, i);
        MyGrid.Children.Add(button);
    }
}

动态增加行列控件的方法： 

Grid.SetRow(控件名, 行序号)
Grid.SetColumn(控件名, 列序号)，

另一种写法是：
控件实例.SetValue(Grid.RowProperty, 行序号)
控件实例.SetValue(Grid.ColumnProperty, 列序号)

运行效果如下：

第三步：将button的内容换成随机图片

可以在生成button的时候就将其内容改为图片，所以直接在上一段for循环中添加内容

Random random = new Random();//先new一个随机数生成器(在for循环外）

for (int i = 0; i < 6; i++)//将Button放入6行6列的布局中(一行一行循环，共6行）
{
    for (int j = 0; j < 6; j++)//每行6 列
    {
        int imgName = random.Next(0,12);//一个生成0~12的随机数
        Image img = new Image();
        img.Source = new BitmapImage(new Uri("/images/" + imgName + ".png", UriKind.Relative));//随机选择图片


        Button button = new Button();
        button.Content = img;//将编号内容换成图片
        button.Background = Brushes.Transparent;//将按钮背景颜色改为透明
        Grid.SetColumn(button, j);
        Grid.SetRow(button, i);
        MyGrid.Children.Add(button);
        button.Click += btn_Click;//为按钮增加点击事件
    }
}

运行效果如下：

    

第四步：设计点击事件

首先，先定义一个类，给button增加属性，这个类可以在按钮生成的时候进行调用

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

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

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

    public MyButton(int flog,int rownum,int colnum)
    {
        this.Flog = flog;
        this.RowNum = rownum;
        this.ColNum = colnum;
    }

}

可以开始写点击事件

MyButton button1;
MyButton button2;
int ClickCount = 0;//点击次数
void btn_Click(object sender, RoutedEventArgs e)
{
    ++ClickCount;
    if (ClickCount == 1)//点击一次
    {
        button1 = sender as MyButton;
    }
    else if (ClickCount == 2)
    {
        button2 = sender as MyButton;
        if (button1 != null && button2 != null)
        {
            if (button1.Flag == button2.Flag &&! (button1.ColNum == button2.ColNum && button1.RowNum == button2.RowNum))
            {
                button1.Visibility = Visibility.Hidden;//将两个按钮隐藏
                button2.Visibility = Visibility.Hidden;
            }
        }           
            button1 = null;
            button2 = null;
            ClickCount = 0;               
    }
}

就可以实现消除效果

最后，放一下总代码和图片包

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Security.Cryptography.X509Certificates;
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 连连看
{
    /// <summary>
    /// MainWindow.xaml 的交互逻辑
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            Add();//运行Add
        }
        public void Add()
        {
            //第一步，将grid分成6*6
            for (int i = 0; i < 6; i++)//用for循环将Grid分成6行6列
            {
                RowDefinition row = new RowDefinition();
                ColumnDefinition col = new ColumnDefinition();
                MyGrid.RowDefinitions.Add(row);
                MyGrid.ColumnDefinitions.Add(col);
            }

            //第二步：将Button放入6*6布局中
            //第三步：将button的内容换成随机图片
            //可以在生成button的时候就将内容改为图片，所以直接在上一段for循环中添加内容
            Random random = new Random();//先new一个随机数生成器(在for循环外）
            for (int i = 0; i < 6; i++)//将Button放入6行6列的布局中(一行一行循环，共6行）
            {
                for (int j = 0; j < 6; j++)//每行6 列
                {
                    int imgName = random.Next(0, 9);//一个生成0~12的随机数
                    Image img = new Image();
                    img.Source = new BitmapImage(new Uri("/images/" + imgName + ".png", UriKind.Relative));//随机选择图片


                    MyButton button = new MyButton(imgName, i, j);//调用类，分别将类里的属性flag设为imgName,rownum设为i,colnum设为j
                    button.Content = img;//将编号内容换成图片
                    button.Background = Brushes.Transparent;//将按钮背景设为透明
                    button.Click += btn_Click;//为按钮增加点击事件
                    Grid.SetColumn(button, j);
                    Grid.SetRow(button, i);
                    MyGrid.Children.Add(button);

                }
            }
        }
        //开始写点击事件
        MyButton button1;
        MyButton button2;
        int ClickCount = 0;//点击次数
        void btn_Click(object sender, RoutedEventArgs e)
        {
            ++ClickCount;
            if (ClickCount == 1)//点击一次
            {
                button1 = sender as MyButton;
            }
            else if (ClickCount == 2)
            {
                button2 = sender as MyButton;
                if (button1 != null && button2 != null)
                {
                    if (button1.Flag == button2.Flag && !(button1.ColNum == button2.ColNum && button1.RowNum == button2.RowNum))
                    {
                        button1.Visibility = Visibility.Hidden;//将两个按钮隐藏
                        button2.Visibility = Visibility.Hidden;
                    }
                }
                button1 = null;
                button2 = null;
                ClickCount = 0;
            }
        }
    }
    public class MyButton : Button
    {
        //Button标示，用于判断按钮是否为同一个
        public int Flag { get; set; }

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

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

        public MyButton(int flag, int rownum, int colnum)
        {
            this.Flag = flag;
            this.RowNum = rownum;
            this.ColNum = colnum;
        }

    }
}

图片资源在这里：

图片包