`
xitongyunwei
  • 浏览: 926836 次
文章分类
社区版块
存档分类
最新评论

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按钮以后:

分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics