Silverlight学习点滴之三——DataGrid的基本使用

DataGrid是一个是一个非常基本的表结构控件，常用来展示数据库的详细信息。

我选用的是微软的NorthWind示例数据库。

服务端设置
 

添加ADO.Net Entity Data Model，命名Model，选择NorhWind数据库，选择数据对象时把所有表都选上，并勾选"Pluralize or singularize generated object names"。

生成一下项目。

添加Domain Service Class，命名NorthWindDataService，选择刚才创建的实体类，勾选所有的"Enable Editing"。

基本的数据绑定
 

在MainPage添加一个DataGrid，命名为dataGrid，设定属性AutoGenerateColumns=True，在Loaded事件中添加下面代码，执行。

privatevoid DataGridLoaded(object sender, RoutedEventArgs e)
{
    var context =new NorthwindContext();
    context.Load(context.GetProductsQuery());
    dataGrid.ItemsSource = context.Products;
}

 

指定需要显示的列

使用自动生成列，就会无区别的按缺省格式展示所有项目。除了bit类型，其他类型项目会以字符串形式展现。

通过设置Columns属性，可以选择性的显示列，以及显示的样式。在这里，我把Category，Supplier，Product和对应的ID去掉，指定显示的列：

<sdk:DataGrid Name="dataGrid" AutoGenerateColumns="False" Margin="12" IsReadOnly="True" Loaded="DataGridLoaded">
    <sdk:DataGrid.Columns>
        <sdk:DataGridTextColumn Header="产品名称" Binding="{Binding ProductName}"/>
        <sdk:DataGridTextColumn Header="规格" Binding="{Binding QuantityPerUnit}"/>
        <sdk:DataGridTextColumn Header="单价" Binding="{Binding UnitPrice}"/>
        <sdk:DataGridTextColumn Header="存货数量" Binding="{Binding UnitsInStock}"/>
        <sdk:DataGridTextColumn Header="预订数量" Binding="{Binding UnitsOnOrder}"/>
        <sdk:DataGridTextColumn Header="再订购标准" Binding="{Binding ReorderLevel}"/>
        <sdk:DataGridCheckBoxColumn Header="是否停产" Binding="{Binding Discontinued}"/>
    </sdk:DataGrid.Columns>
</sdk:DataGrid>

 

在绑定中使用StringFormat

切换绑定到表Customers，选择几个列展示：

 

可以看到，三个日期以及运费显示不符合我们的习惯。引入StringFormat即可自定义显示的格式。

<sdk:DataGrid Name="dataGrid" AutoGenerateColumns="False" Margin="12" IsReadOnly="True" Loaded="DataGridLoaded1">
    <sdk:DataGrid.Columns>
        <sdk:DataGridTextColumn Header="订单编号" Binding="{Binding OrderID}"/>
        <!-- 日期只需显示年月日 -->
        <sdk:DataGridTextColumn Header="下单日期" Binding="{Binding OrderDate, StringFormat=yyyy/MM/dd}"/>
        <sdk:DataGridTextColumn Header="需求日期" Binding="{Binding RequiredDate, StringFormat=yyyy/MM/dd}"/>
        <sdk:DataGridTextColumn Header="装运日期" Binding="{Binding ShippedDate, StringFormat=yyyy/MM/dd}"/>
        <!-- 货币只需保留小数点后两位 -->
        <sdk:DataGridTextColumn Header="运费" Binding="{Binding Freight, StringFormat=#.00}"/>
        <sdk:DataGridTextColumn Header="装运地点" Binding="{Binding ShipAddress}"/>
    </sdk:DataGrid.Columns>
</sdk:DataGrid>

 

以上是DataGrid最基本的用法，在下一节，我会详细讲解有关DataGrid列的自定义模板的内容。

附上源代码：SilverlightDataGridTest.rar