Silverlight 2.0 中使用 DataGrid 控件的简介

• 下载源代码 - 828 KB

引言

DataGrid 是 Silverlight 2.0 中强大的控件之一。它支持许多对普通 DataGrid 的新增强功能。

在 Silverlight 应用程序中使用 DataGrid

DataGrid 包含在 System.Windows.Controls 命名空间中。它可以从工具箱拖到 XAML 页面。要使用 DataGrid，我们需要将以下命名空间添加到我们的页面

xmlns:my="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data"

（从工具箱拖动将自动添加此命名空间。）然后，可以通过添加命名空间前缀来使用 DataGrid 对象和属性。以下标记将向我们的页面添加一个 DataGrid 控件。

<my:DataGrid  Height="100" Width="100"></my:DataGrid>

列类型

DataGrid 支持文本框列、复选框列和用于自定义内容的模板列。

• 文本框列：文本框列将在非编辑模式下在文本块控件中显示内容，在编辑模式下在文本框控件中显示内容。
• 复选框列：复选框列在复选框控件中呈现内容。当设置为 true 时，它提供一个 IsThree 状态属性。复选框的状态可以是 Checked、Unchecked 或 Indeterminate。
• 模板列：对于列上的自定义内容/控件，我们可以使用模板列。CellTemplate 和 CellEditing 模板列可用于在编辑模式下更改内容。

当 AutogenerateColumns 属性设置为 true 时，DataGrid 将自动为所有布尔值生成一个复选框列，并为所有其他类型生成一个文本框列。如果绑定属性没有字符串或数字数据类型，则呈现的列将是一个文本块。

<data:DataGrid.Columns>
    <data:DataGridTextBoxColumn 
        Header="Address"
        Width="120"
        DisplayMemberBinding="{Binding Address}" >
                
    <data:DataGridTextBoxColumn.ElementStyle>
        <Style TargetType="TextBlock">
          <Setter Property="TextWrapping" value="Wrap"/>
        </Style>
    </data:DataGridTextBoxColumn.ElementStyle>
    <data:DataGridTextBoxColumn.EditingElementStyle>
        <Style TargetType="TextBox">
          <Setter Property="Foreground" Value="Blue"/>
        </Style>
    </data:DataGridTextBoxColumn.EditingElementStyle>
    </data:DataGridTextBoxColumn>

    <data:DataGridCheckBoxColumn 
        Header="Subscribed?" 
        Width="75"
        DisplayMemberBinding="{Binding IsSubscribed}" 
        IsThreeState="True" />

</data:DataGrid.Columns>

新功能

Silverlight 引入了新属性来增强 DataGrid 的功能。

• CanUserResizeColumns：设置为 true 时，用户可以使用鼠标更改列宽，就像 MS Excel 列一样。
• GridlinesVisibility：选项有 All、None、Vertical 或 Horizontal。
• HeaderVisibility：它支持行标题而不是列标题。使用此属性，我们可以更改行或列标题的可见性。
• RowDetailsVisibility 和 RowDetailsTemplate：设置这些属性后，当选择一行时，RowDetailsTemplate 中的内容将显示在行内容下方。

<data:DataGrid x:Name="dataGrid3" 
    RowDetailsVisibility="VisibleWhenSelected" >            
            <data:DataGrid.RowDetailsTemplate>
                <DataTemplate>
                   <TextBlock Text="Address: />
                </DataTemplate>
            </data:DataGrid.RowDetailsTemplate>                
</data:DataGrid>

以下是一个 DataGrid，其中地址文本显示在行详细信息部分。



• SelectionMode：选择模式选项有 SingleFullRow 和 ExtendedFullRow。设置为 ExtendedFullRow 时，用户可以选择多行。
• Opacity：可以使用此属性更改 DataGrid 的不透明度。

有关属性的完整列表，请访问 MSDN。

数据绑定。

要绑定一个 DataGrid，您可以设置 'ItemsSource' 属性。但是，数据源应该实现 IEnumerable 接口。DataGrid 列具有 'DisplayMemberBinding' 字段，可用于绑定到数据字段。

<DataGridTextBoxColumn DisplayMemberBinding="{Binding DataFieldName}" >
<my:DataGrid.Columns>
    <my:DataGridTextBoxColumn DisplayMemberBinding="{Binding ID}" 
                   IsReadOnly="False"></my:DataGridTextBoxColumn>
    <my:DataGridTemplateColumn>
        <my:DataGridTemplateColumn.CellTemplate>
            <DataTemplate>
                <TextBlock  Text="{Binding FName}" FontSize="10"/>
            </DataTemplate>
        </my:DataGridTemplateColumn.CellTemplate>
    </my:DataGridTemplateColumn>
    <my:DataGridTextBoxColumn DisplayMemberBinding="{Binding LName}" 
                   IsReadOnly="False" ></my:DataGridTextBoxColumn>
</my:DataGrid.Columns>

在代码隐藏中绑定到 DataGrid

private void BindToGrid()
{
    Employee[] empObj = new Employee[5];

    empObj[0] = new Employee("EmpFName1", "EmpLName1", "1");
    empObj[1] = new Employee("EmpFName2", "EmpLName2", "2");
    empObj[2] = new Employee("EmpFName3", "EmpLName3", "3");
    empObj[3] = new Employee("EmpFName4", "EmpLName4", "4");
    empObj[4] = new Employee("EmpFName5", "EmpLName5", "5");

    //Binding to Datagrid
    dgSample.ItemsSource = empObj;
}

在本例中，DataGrid 'dgSample' 绑定到 'Employee' 对象数组。

public class Employee
{
    public Employee(string FName, string LName, string ID)
    {
        this.FName = FName;this.LName = LName;this.ID = ID;
    }
    public string ID
    {
        get;set;
    }
    public string FName
    {
        get;set;
    }
    public string LName
    {
        get;set;
    }
}

应用样式

DataGrid 提供了 Style、ColumnHeaderStyle、RowHeaderStyle、RowStyle 和 CellStyle 属性。可以将任何样式对象设置为这些样式。

<DataGrid x:Name="dataGrid1"
    Style="{StaticResource DataGridStyle}"
    ColumnHeaderStyle="{StaticResource  ColumnHeaderStyle}"
    RowHeaderStyle="{StaticResource RowHeaderStyle}"
    RowStyle="{StaticResource RowStyle}" >
    <DataGrid.Columns>
        <DataGridTextBoxColumn
            DisplayMemberBinding="{Binding DataFieldName}" 
            CellStyle="{StaticResource CellStyle}" />
    </DataGrid.Columns>
</DataGrid>

有关 Silverlight 中样式的概述，请参阅：样式和模板概述。

编辑 DataGrid

DataGrid 列有一个 'IsReadOnly' 属性。当设置为 false 时，单元格是可编辑的。为了获取更改后的值并更新数据源，DataGrid 提供了以下事件

• BeginningCellEdit
• CommitCellEdit
• CommittingCellEdit
• CommittingRowEdit
• CurrentCellChanged

可以使用双向绑定来减少代码。但是，在大多数情况下，我们可能需要捕获上述事件。

private void dgSample_CommitCellEdit(object sender, DataGridCellEventArgs e)
{
    string strChangedText = ((TextBlock)e.Element).Text;
    //Add Logic to update the datasource
}

排序和分页

DataGrid 没有内置的排序和分页机制。但是，可以通过适当地操作数据源轻松实现这些功能。

你可以在这里找到一个这样的实现。