Windows 8 Metro開發疑難雜症（五）——DataGrid控制項

 

關於DataGrid控制項做過Silverlight開發的一定會很熟悉，可是在win8 的SDK裡面沒有這樣的控制項的，只能自訂，而DataGrid控制項是開發公司專屬應用程式必須的控制項，公司專屬應用程式大多是以表格形式來展示資料的。先讓各位看下最終。

DataGrid控制項擁有表格式資料展示，單行資料詳情展示，儲存格編輯等功能。

DataGrid控制項的源碼我不作多解釋，直接看我的源碼就行。

做過web開發的應該對這種表格類的控制項很熟悉的，有行和列，每一行對應資料來源中的一條資料，每一個儲存格對應一條資料的一個屬性，每個單元可以編輯，在DataGrid中是雙擊儲存格編輯。

下面我主要講下如何使用這個DataGrid控制項。

DataGrid控制項中有一個Columns屬性，這是一個集合，這個屬性是定義表格列樣式的，內容是DataGridTemplateColumn，裡面可以定義表格欄位標題，欄位標題樣式，列儲存格模板，列儲存格編輯狀態模板。

 <gControls:DataGrid Grid.Row="1" x:Name="list">            <gControls:DataGrid.Columns>                <gControls:DataGridTemplateColumn Header="訂單號" Width="200">                    <gControls:DataGridTemplateColumn.CellTemplate>                        <DataTemplate>                            <Grid>                                <TextBlock Text="{Binding OrderId}" Style="{StaticResource TextBlockStyle}"/>                            </Grid>                        </DataTemplate>                    </gControls:DataGridTemplateColumn.CellTemplate>                </gControls:DataGridTemplateColumn>                <gControls:DataGridTemplateColumn Header="需支付金額" Width="400">                    <gControls:DataGridTemplateColumn.CellTemplate>                        <DataTemplate>                            <Grid>                                <TextBlock Text="{Binding TotalPrice}" Style="{StaticResource TextBlockStyle}"/>                            </Grid>                        </DataTemplate>                    </gControls:DataGridTemplateColumn.CellTemplate>                </gControls:DataGridTemplateColumn>                <gControls:DataGridTemplateColumn Header="發貨庫房(可編輯)">                    <gControls:DataGridTemplateColumn.CellTemplate>                        <DataTemplate>                            <Grid>                                <TextBlock Text="{Binding StoreHouse}" Style="{StaticResource TextBlockStyle}"/>                            </Grid>                        </DataTemplate>                    </gControls:DataGridTemplateColumn.CellTemplate>                    <gControls:DataGridTemplateColumn.CellEditingTemplate>                        <DataTemplate>                            <Grid>                                <TextBox Text="{Binding StoreHouse,Mode=TwoWay}"  KeyUp="TextBox_KeyUp"/>                            </Grid>                        </DataTemplate>                    </gControls:DataGridTemplateColumn.CellEditingTemplate>                </gControls:DataGridTemplateColumn>                <gControls:DataGridTemplateColumn Header="預計配送時間">                    <gControls:DataGridTemplateColumn.CellTemplate>                        <DataTemplate>                            <TextBlock Text="{Binding Max}" Style="{StaticResource TextBlockStyle}"/>                        </DataTemplate>                    </gControls:DataGridTemplateColumn.CellTemplate>                </gControls:DataGridTemplateColumn>                <gControls:DataGridTemplateColumn Header="刪除">                    <gControls:DataGridTemplateColumn.CellTemplate>                        <DataTemplate>                            <Button Content="刪除"  HorizontalAlignment="Stretch" Click="btnDeleteClick"/>                        </DataTemplate>                    </gControls:DataGridTemplateColumn.CellTemplate>                </gControls:DataGridTemplateColumn>            </gControls:DataGrid.Columns>            <gControls:DataGrid.RowDetailsTemplate>                <DataTemplate>                    <Grid>                        <TextBlock Text="{Binding Desciption}" TextWrapping="Wrap" FontSize="25"/>                    </Grid>                </DataTemplate>            </gControls:DataGrid.RowDetailsTemplate>        </gControls:DataGrid>

以上代碼定義了每列的樣式，其中第三列是可編輯的（雙擊儲存格進入編輯模式），第五列是用來刪除行的，因為DataGrid是繼承自ListView的，所以添加和刪除資料都是有動畫的。RowDetailsTemplate是定義資料詳情展示的模板的。

後台代碼就兩個，一個btnDeleteClick，用來刪除行的，一個是TextBox_KeyUp事件，用來當儲存格進入編輯模式，使用者在按下斷行符號鍵的時候離開編輯模式進入閱讀模式。

現在啟動並執行介面

有人可能想要實現web上表單的奇偶行背景不一樣的功能，其實這樣的功能是很簡單的，不管你是奇偶行不同，還是三行，四行，五行不通，原理是一樣的，就是在DataGrid在載入資料的時候根據每條資料確定該資料處於是奇數行還是偶數行來動態給背景。

這裡我不準備修改DataGrid代碼，重新定義一個控制項就叫DataGrid1，添加如下代碼：

public  class DataGrid1:Controls.DataGrid    {      protected override void PrepareContainerForItemOverride(Windows.UI.Xaml.DependencyObject element, object item)      {          Control f = element as Control;          if (f != null)          {              var index = this.ItemContainerGenerator.IndexFromContainer(element) %3;              if (index == 0)              {                  f.Background = new SolidColorBrush(Colors.AliceBlue);              }              else if (index == 1)              {                  f.Background = new SolidColorBrush(Colors.Beige);              }              else if (index == 2)              {                  f.Background = new SolidColorBrush(Colors.LightSteelBlue);              }          }          base.PrepareContainerForItemOverride(element, item);      }    }

然後用DataGrid1這個控制項替換原來的XAML中使用的DataGrid控制項，這樣就實現了我們需要的每三行背景顏色不同的功能。
通過更改樣式，甚至可以實現每列擁有不同背景的功能。

源碼下載