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控件，這樣就實現了我們需要的每三行背景顏色不同的功能。
通過更改樣式，甚至可以實現每列擁有不同背景的功能。

源碼下載