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控件，这样就实现了我们需要的每三行背景颜色不同的功能。
通过更改样式，甚至可以实现每列拥有不同背景的功能。

源码下载