win8上實現連連看的界面佈局

今天看傳智播客的視頻，照着楊中科老師講的寫了一個連連看的界面佈局。

代碼如下：MainPage.xml.cs

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;
using Windows.UI.Xaml.Media.Imaging;

// “空白頁”項模板在 http://go.microsoft.com/fwlink/?LinkId=234238 上有介紹

namespace App1
{
    /// <summary>
    /// 可用於自身或導航至 Frame 內部的空白頁。
    /// </summary>
    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();
        }

        /// <summary>
        /// 在此頁將要在 Frame 中顯示時進行調用。
        /// </summary>
        /// <param name="e">描述如何訪問此頁的事件數據。Parameter
        /// 屬性通常用於配置頁。</param>
        protected override void OnNavigatedTo(NavigationEventArgs e)
        {
            for (int i = 0; i < 10; i++)
            {
                RowDefinition rdef = new RowDefinition();
                grid1.RowDefinitions.Add(rdef);
            }

            for (int i = 0; i < 8;i++ )
            {
                ColumnDefinition cldef = new ColumnDefinition();
                grid1.ColumnDefinitions.Add(cldef);
            }

            Random rand = new Random();

            for (int row = 0; row < 10;row++ )
            {
                for (int col = 0; col < 8;col++ )
                {
                    Image img = new Image();
                    int num = rand.Next(1, 10);
                    string filename = "ms-appx:///Images/" + num + ".png";
                    img.Source = new BitmapImage(new Uri(filename));

                    grid1.Children.Add(img);
                    Grid.SetRow(img, row);
                    Grid.SetColumn(img, col);
                }
            }
        }

    }
}

成果截圖：

源代碼見我的資源列表

此項目參考"傳智播客.net培訓Windows 8開發視頻教程"