Silverlight中Datagrid添加Button列用于控制单行对象

说明：vs2010 ultimate + silverlight5

本文中所有代码都可以在github中查看，git版本中采用了master-dev的方式。在master中可以查看每一个demo的最后完成，在dev中可以查看每一步的代码。

github地址：git@github.com:kiwiwin/silverlight-demo.git 文件夹名称datagrid-button

 

在这个demo中，我们将会创建由两列构成的DataGrid，一列表示数值，一列是Button按钮。当点击对应行的Button时，对应的数值+1

1.在DataGrid中添加一行表示Button：

        <sdk:DataGrid AutoGenerateColumns="False" Height="276" HorizontalAlignment="Left" Margin="12,12,0,0" Name="numberGrid" VerticalAlignment="Top" Width="376">
            <sdk:DataGrid.Columns>
                <sdk:DataGridTextColumn Width="100" Header="个数" Binding="{Binding Number}"/>
                <sdk:DataGridTemplateColumn Width="100" Header="按钮">
                    <sdk:DataGridTemplateColumn.CellTemplate>
                        <DataTemplate>
                            <Button Content="Increase" Click="Increase_click"></Button>
                        </DataTemplate>
                    </sdk:DataGridTemplateColumn.CellTemplate>
                </sdk:DataGridTemplateColumn>
            </sdk:DataGrid.Columns>
        </sdk:DataGrid>

 2.添加点击Button对应的时间处理代码和相应的初始化代码：

需要注意的是，虽然使用了ObservableCollection，但是如果只是修改了ObservableCollection中的一个Item中的值，DataGrid将不会直接更新显示，这里就先赋值null，再赋值原来的items。（ps:如果你有更好的方法，可以在github上发送一个pull request，我会非常感谢你）

    public partial class MainPage : UserControl
    {
        private ObservableCollection<NumberItem> items;

        public MainPage()
        {
            InitializeComponent();
            InitItems();
            numberGrid.ItemsSource = items;
        }

        private void InitItems()
        {
            List<NumberItem> numberItems = new List<NumberItem>();
            numberItems.Add(new NumberItem {Number = 3});
            numberItems.Add(new NumberItem {Number = 4});
            items = new ObservableCollection<NumberItem>(numberItems);
        }

        private void Increase_click(object sender, RoutedEventArgs e)
        {
            var button = sender as Button;
            var item = button.DataContext as NumberItem;
            item.Number += 1;
            numberGrid.ItemsSource = null;
            numberGrid.ItemsSource = items;
        }
    }

    public class NumberItem
    {
        public int Number { get; set; }
    }

3.效果如图：

开始时：

点击了第二行中的Increase按钮以后：