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示例代码