看到win8和VS2012都发布有些日子，心里也痒痒的，于是就学习了几天关于在VS2012下开发，当然主要是开发应用商店小程序。学习期间一直参考：
传智播客.net培训Windows 8开发视频教程，欢迎大家也一起来学习。
下面来介绍一下我自己写的连连看小程序，暂时只能先后点击两张一样的小图标，两个小图标即刻消失。
1.首先我创建10行10列的表格（用的Grid页面布局，当然还有其他的例如：StackPanel和Canvas等）
View Code
///给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的文件名不能一样（就是同一个图标点了两次）。
View Code
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示例代码
