Win8 連連看小程序

看到win8和VS2012都發布有些日子，心里也癢癢的，於是就學習了幾天關於在VS2012下開發，當然主要是開發應用商店小程序。學習期間一直參考：

傳智播客.net培訓Windows 8開發視頻教程，歡迎大家也一起來學習。

下面來介紹一下我自己寫的連連看小程序，暫時只能先后點擊兩張一樣的小圖標，兩個小圖標即刻消失。

1.首先我創建10行10列的表格（用的Grid頁面布局，當然還有其他的例如：StackPanel和Canvas等）

                ///給Grid添加10列
                for (int i = 0; i < 10; i++)
                {
                    llk.ColumnDefinitions.Add(new ColumnDefinition());                    
                }
                ///給 Grid添加10行
                for (int j = 0; j < 10; j++)
                {
                    llk.RowDefinitions.Add(new RowDefinition());
                }

2.讀取連連看小圖標文件路徑存放於List<string>中：首先讀取到應用程度的根路徑，然后獲取指定根路徑下指定的文件夾，並讀取文件夾下的文件，將其添加到List<string>中。

                ///獲取程序中圖標文件
                StorageFolder InstallFolder = Package.Current.InstalledLocation;////獲得程序的安裝路徑
                var ImgFolder =await InstallFolder.GetFolderAsync("Images");
                var ImgFiles =await ImgFolder.GetFilesAsync();   ////獲得Images文件夾下的圖片
                List<string> ImgList=new List<string>();         ///將讀取的圖片文件添加到List中
                foreach (var ImgFile in ImgFiles)
                {
                    string FilePath = "ms-appx:///Images/"+ImgFile.Name;
                    ImgList.Add(FilePath);
                }

3.因為是10行10列所以我只是放了50*2（方便兩兩配對）個隨機的小圖標。

                List<string> ImgCount = new List<string>();
                for (int k = 0; k < rows * clos / 2; k++)
                {
                    int ListNum = new Random(k+DateTime.Now.Millisecond).Next(ImgList.Count - 1);
                    ImgCount.Add(ImgList[ListNum]);   ////添加兩次  方便配對的
                    ImgCount.Add(ImgList[ListNum]);
                }

4.將第三步中的100個小圖標添加到10行10列的表格中。

                for (int i = 0; i < rows; i++)
                {
                    for (int j = 0; j < clos; j++)
                    {
                        Image img = new Image();
                        img.Name = i.ToString() + j.ToString();
                        int SourceNum = new Random(i+j+DateTime.Now.Millisecond).Next(ImgCount.Count - 1);
                        BitmapImage bitmap = new BitmapImage(new Uri(ImgCount[SourceNum]));
                        ImgCount.RemoveAt(SourceNum);
                        img.Source = bitmap;
                        img.Tapped += img_Tapped;
                        llk.Children.Add(img);
                        Grid.SetColumn(img, i);
                        Grid.SetRow(img, j);
                    }
                }

5.現在已經顯示到頁面上了，我對每個Image添加了一個事件 （  img.Tapped += img_Tapped）
  暫時就是將Image轉換為BitmapImage判斷兩個小圖標的Source，也就是文件路徑是否一樣，當然Image的文件名不能一樣（就是同一個圖標點了兩次）。

        void img_Tapped(object sender, TappedRoutedEventArgs e)
        {
            ///獲得當前小圖標
            Image Img = sender as Image;
            if (ClickImg.Source == null)
            {
                ClickImg = Img;
            }
            else if (((Windows.UI.Xaml.Media.Imaging.BitmapImage)(ClickImg.Source)).UriSource != ((Windows.UI.Xaml.Media.Imaging.BitmapImage)(Img.Source)).UriSource)
            {
                ClickImg = Img;
            }
            else
            {
                ///如果本次點擊的圖標與前面儲存的ClickImg相同，則讓兩個小圖標隱藏
                if (((((Windows.UI.Xaml.Media.Imaging.BitmapImage)(ClickImg.Source)).UriSource == ((Windows.UI.Xaml.Media.Imaging.BitmapImage)(Img.Source)).UriSource)) &&(Img.Name!=ClickImg.Name))
                {
                    ClickImg.Visibility = Windows.UI.Xaml.Visibility.Collapsed;
                    Img.Visibility = Windows.UI.Xaml.Visibility.Collapsed;
                    ClickImg = new Image();

                    ///處理一下clos*rows=100個圖標點擊完成給予簡單提示
                    if ((Convert.ToInt32(txtLeaves.Text) - 2) > 0)
                    {
                        txtLeaves.Text = (Convert.ToInt32(txtLeaves.Text) - 2).ToString();
                    }
                    else
                    {
                        MessageDialog MsgDig = new MessageDialog("恭喜，您已通過！");
                        txtLeaves.Text = "0";
                        MsgDig.ShowAsync();
                    }
                    
                }
            }
        }

最后便可以測試小程序了，只要前后點的兩個小圖標是一樣的（當然位置要不一樣就可以了）。次連連看會慢慢更新，因為本人還在繼續學習中，可能其中存在很多問題，之后慢慢優化，繼續更新。程序運行之后截圖效果為

本次示例代碼鏈接win8 LLK示例代碼