使用WPF教你一步一步實現連連看（一） - smiler－IT工程師數位筆記本

文章出處

第一步：

　　問題，怎樣動態的建立一個10*10的grid（布局）

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

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

第二步：

　　問題，怎樣將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;
        }
    }
}