首先介紹下，如何手動新增控制元件到Grid中：

   1. 在xaml中新增一個Grid：

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"> <Grid.RowDefinitions> <RowDefinition Height="*" /> <RowDefinition Height="Auto" /> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="*" /> <ColumnDefinition Width="*" /> </Grid.ColumnDefinitions> <Grid Name="playGrid" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" HorizontalAlignment="Center" VerticalAlignment="Center" /> <Button Content="load" Grid.Row="1" Grid.Column="0" Click="OnLoadClick" /> <Button Name="scrambleButton" Content="scramble" Grid.Row="1" Grid.Column="1" IsEnabled="False" Click="OnScrambleClick" /> </Grid> </Grid>

   2. 通過xaml.cs檔案的構成函式中新增需要的行列。

const int HORZ_TILES = 2; const int VERT_TILES = 2; public MainPage() { InitializeComponent(); for (int col = 0; col < HORZ_TILES; col++) { ColumnDefinition coldef = new ColumnDefinition(); coldef.Width = new GridLength(1, GridUnitType.Star); playGrid.ColumnDefinitions.Add(coldef); } for (int row = 0; row < VERT_TILES; row++) { RowDefinition rowdef = new RowDefinition(); rowdef.Height = new GridLength(1, GridUnitType.Star); playGrid.RowDefinitions.Add(rowdef); } }

現在，Grid中就有了 2行2列的區域。如果Grid中沒有新增控制元件的Tile，預設系統會隱藏，所有，如果為新增控制元件進入各自的Tile，是不會有效果的。

3. 看看具體的插入method。（以插入image為例）

void GenerateImageTile(BitmapSource tile, int row, int col) { Image img = new Image(); img.Stretch = Stretch.None; img.Source = tile; img.Margin = new Thickness(MARGIN); tileImages[row, col] = img; // 這個是用於儲存各Tile中的圖片 Grid.SetRow(img, row); Grid.SetColumn(img, col); playGrid.Children.Add(img); }

ok，Grid的手動新增資料實現完成。

接著，介紹下Grid.SetColumn和Grid.SetRow,這也是我這篇文章的重點。

首先，我們插入三幅圖片分別到（0，0），（0，1），（1，0）中，現在（1，1）區域是空的。

那麼我們要做的功能是，當點選某一個區域的時候，用此區域的圖片去填充空白區域。這裡就需要注意了。Grid的重新整理機制。

實現其實很簡單，但只要的時每次沒有必要掉用這兩個函式。

tileImages[emptyRow, emptyCol] = tileImages[touchedRow, touchedCol]; Grid.SetColumn(tileImages[emptyRow, emptyCol], emptyCol); Grid.SetRow(tileImages[emptyRow, emptyCol], emptyRow); tileImages[touchedRow, touchedCol] = null;

如果點選的時同一row的區域，那麼之需要呼叫Grid.SetColumn即可。這樣就設定了空白頁的image。

如果點選的時同一column，則呼叫rid.SetRow。

Gird是預設在其後新增資料的，所以這樣的設定也就是在此行或此列的最後一個Tile。

那麼如果修改的時非同行非同列，比如（1，1）是空白區域，現在點選（0，0）。那麼就必須呼叫兩個函式才可實現重新整理。

還有，當用某一個區域去設定另一個區域的時候，Grid預設的就將源區域的image清空。

< 完>