Win8 连连看小程序

swsrl

　　看到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中：首先读取到应用程度的根路径，然后获取指定根路径下指定的文件夹，并读取文件夹下的文件，将其添加到List中。



                ///获取程序中图标文件
StorageFolder InstallFolder = Package.Current.InstalledLocation;////获得程序的安装路径
var ImgFolder =await InstallFolder.GetFolderAsync("Images");
var ImgFiles =await ImgFolder.GetFilesAsync();   ////获得Images文件夹下的图片
List ImgList=new List();         ///将读取的图片文件添加到List中
foreach (var ImgFile in ImgFiles)
{
string FilePath = "ms-appx:///Images/"+ImgFile.Name;
ImgList.Add(FilePath);
}
　　3.因为是10行10列所以我只是放了50*2（方便两两配对）个随机的小图标。



                List ImgCount = new List();
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示例代码