[Silverlight]奇技银巧系列-4 在DataGrid中显示行号

Silverlight奇技银巧系列：

所有该系列中的文章只为介绍一些Silverlight中或隐藏在Silverlight .NET framework鲜为人知的知识和技巧。这些文章并非教程，也是不是什么技术指导，您只需对文章介绍的内容保有印象。这些知识和技巧也许会在不经意间绽放银色光芒。

我们通常会碰到在DataGird的第一列（或某一列）自动显示该行行号的需求，如下图

分析这个问题我们需要两步走

• 向数据源添加数据时自动显示行号
• 从数据源删除数据时自动更新所有行号

 

首先做一些准备工作，我们需要为DataGird自定义第一列的单元格

<data:DataGridTemplateColumn>
    <data:DataGridTemplateColumn.CellTemplate>
        <DataTemplate>
            <TextBlock />
        </DataTemplate>
    </data:DataGridTemplateColumn.CellTemplate>
</data:DataGridTemplateColumn>

很简单，一个TextBlock而已

再搞出一个实体类

    public class Person {
        public string FullName { get; set; }
        public int? Age { get; set; }
        public string Gender { get; set; }
    }

接着定义一个私有变量_personList并在初始化时为其添加几项以便测试。

注:_personList是ObservableCollection，以下我们所有的操作都基于ObservableCollection。

ObservableCollection<Person> _personList;

_personList = new ObservableCollection<Person> { 
                new Person(){ FullName="forever",Age=13,Gender="男" },
                new Person(){ FullName="fish",Age=14,Gender="公"},
                new Person(){ FullName="SBPP",Age=40,Gender="男"},
                new Person(){FullName="TNT",Age=null,Gender="男"},
                new Person(){FullName="SARS",Age=5,Gender="无"},
            };

 

接着我们开始解决第一个问题，即添加数据时自动显示数据行号：

假设我们有一个按钮用来向数据源中插入数据，如

        private void btnAdd_Click(object sender, RoutedEventArgs e) {
            _personList.Add(new Person() { FullName = "Lulu", Age = 18, Gender = "女" });
        }

为了让每一行的第一列产生自动编号，我们需要捕获dataGrid1的LoadingRow事件，如

dataGrid1.LoadingRow += new EventHandler<DataGridRowEventArgs>(dataGrid1_LoadingRow);

void dataGrid1_LoadingRow(object sender, DataGridRowEventArgs e) {
    int index = e.Row.GetIndex();
    var cell = dataGrid1.Columns[0].GetCellContent(e.Row) as TextBlock;
    cell.Text = (index + 1).ToString();
}

F5运行后点击增加按钮，你会发现数据源中新增的数据已经加入到DataGrid的新行中，并且第一列自动显示了该行的行号。

现在我们开始解决第二个问题，即从数据源删除数据时自动更新所有行号

现在GridView中再自定义一列，每列的显示一个按钮用来删除该条数据

<data:DataGridTemplateColumn>
    <data:DataGridTemplateColumn.CellTemplate>
        <DataTemplate>
            <Button Content="删除" Click="btnDel_Click" />
        </DataTemplate>
    </data:DataGridTemplateColumn.CellTemplate>
</data:DataGridTemplateColumn>

然后在.cs中处理btnDel_Click事件

private void btnDel_Click(object sender, RoutedEventArgs e) {
    var btn = sender as Button;
    var index = _personList.IndexOf(btn.DataContext as Person);
    _personList.RemoveAt(index);
    foreach (var item in dataGrid1.ItemsSource) {
        var txtBlock = dataGrid1.Columns[0].GetCellContent(item) as TextBlock;
        txtBlock.Text = (DataGridRow.GetRowContainingElement(txtBlock).GetIndex() + 1).ToString();
    }
}

ok,大功告成。

如果您有更好的方法，请告诉我，多谢。