更新ItemsControl当一个项目在一个观察点更新时。

[英]Update ItemsControl when an item in an ObservableCollection is updated


The Problem:

存在的问题:

  • You declare an ItemsControl ( or a control derived from ItemsControl) in the view.
  • 在视图中声明ItemsControl(或源自ItemsControl的控件)。
  • You bind the ItemsControl.ItemsSource property to an ObservableCollection in your ViewModel.
  • 你将ItemsControl绑定。ItemsSource属性到视图模型中的观察汇总。
  • Your view updates as expected when an item is added to /removed from the ObservableCollection.
  • 当一个条目添加到/从ObservableCollection中删除时,您的视图会按照预期进行更新。
  • BUT, the view does not update when you change a property of an item in the ObservableCollection.
  • 但是,当您在ObservableCollection中更改项目的属性时,视图不会更新。

Background:

背景:

It seems that this is a common problem many WPF developers have encountered. It has been asked a few times:

这似乎是许多WPF开发人员遇到的一个常见问题。有人问过几次:

Notify ObservableCollection when Item changes

当项目更改时通知观察记录

ObservableCollection not noticing when Item in it changes (even with INotifyPropertyChanged)

注意事项不注意事项发生变化(即使是INotifyPropertyChanged)

ObservableCollection and Item PropertyChanged

ObservableCollection propertychange和项

My Implementation:

我的实现:

I tried to implement the accepted solution in Notify ObservableCollection when Item changes. The basic idea is to hook up a PropertyChanged handler in your MainWindowViewModel for each item in the ObservableCollection. When an item's property is changed, the event handler will be invoked and somehow the View is updated.

当项目发生变化时,我尝试在Notify ObservableCollection中实现已接受的解决方案。基本的思想是在MainWindowViewModel中为ObservableCollection中的每个条目连接一个PropertyChanged处理程序。当项的属性发生更改时,将调用事件处理程序并以某种方式更新视图。

I could not get the implementation to work. Here is my implementation.

我无法让实现工作。这是我的实现。

ViewModels:

视图模型:

class ViewModelBase : INotifyPropertyChanged 
{
    public event PropertyChangedEventHandler PropertyChanged;

    protected void RaisePropertyChanged(string propertyName = "")
    {
        var handler = PropertyChanged;
        if (handler != null) handler(this, new PropertyChangedEventArgs(propertyName));
    }
}

Item ViewModel:

项目视图模型:

class EmployeeViewModel : ViewModelBase
{
    private int _age;
    private string _name;

    public int Age 
    {
        get { return _age; }
        set
        {
            _age = value;
            RaisePropertyChanged("Age");
        }
    }

    public string Name  
    {
        get { return _name; }
        set
        {
            _name = value;
            RaisePropertyChanged("Name");
        }
    }

    public override string ToString()
    {
        return string.Format("{0} is {1} years old", Name, Age);
    }
}

Main Window ViewModel:

主窗口视图模型:

class MainWindowViewModel : ViewModelBase
{
    private ObservableCollection<EmployeeViewModel> _collection;

    public MainWindowViewModel()
    {
        _collection = new ObservableCollection<EmployeeViewModel>();
        _collection.CollectionChanged += MyItemsSource_CollectionChanged;

        AddEmployeeCommand = new DelegateCommand(() => AddEmployee());
        IncrementEmployeeAgeCommand = new DelegateCommand(() => IncrementEmployeeAge());
    }

    public ObservableCollection<EmployeeViewModel> Employees 
    {
        get { return _collection; }
    }

    public ICommand AddEmployeeCommand { get; set; }
    public ICommand IncrementEmployeeAgeCommand { get; set; }

    public void AddEmployee()
    {
        _collection.Add(new EmployeeViewModel()
            {
                Age = 1,
                Name = "Random Joe",
            });
    }

    public void IncrementEmployeeAge()
    {
        foreach (var item in _collection)
        {
            item.Age++;
        }
    }

    private void MyItemsSource_CollectionChanged(object sender, NotifyCollectionChangedEventArgs e)
    {
        if (e.NewItems != null)
            foreach (EmployeeViewModel item in e.NewItems)
                item.PropertyChanged += ItemPropertyChanged;

        if (e.OldItems != null)
            foreach (EmployeeViewModel item in e.OldItems)
                item.PropertyChanged -= ItemPropertyChanged;
    }

    private void ItemPropertyChanged(object sender, PropertyChangedEventArgs e)
    {
        RaisePropertyChanged("Employees");
    }
}

View:

观点:

<Window x:Class="WpfApplication2.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:Themes="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Aero"
    xmlns:d="clr-namespace:Iress.IosPlus.DynamicOE.Controls"
    Title="MainWindow" Height="350" Width="350">

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="0.3*"></ColumnDefinition>
        <ColumnDefinition Width="0.7*"></ColumnDefinition>
    </Grid.ColumnDefinitions>

    <StackPanel Grid.Column="0">
        <Button Command="{Binding AddEmployeeCommand}">Add Employee</Button>
        <Button Command="{Binding IncrementEmployeeAgeCommand}">Increment Employee Age</Button>
    </StackPanel>

    <Grid Grid.Column="1">
        <Grid.RowDefinitions>
            <RowDefinition Height="0.1*"></RowDefinition>
            <RowDefinition></RowDefinition>
        </Grid.RowDefinitions>
        <TextBlock Grid.Row="0" Text="{Binding Path=Employees[0]}"></TextBlock>
        <ItemsControl Grid.Row="1" ItemsSource="{Binding Path=Employees}" BorderBrush="Red" BorderThickness="1"></ItemsControl>
    </Grid>
</Grid>

My Results:

我的结果:

To verify my implementation, I create a view like so. The TextBlock.Text is bound to the first item in the collection. The ItemsControl is bound to the collection itself.

为了验证我的实现,我创建了这样的视图。TextBlock。文本绑定到集合中的第一个项。ItemsControl绑定到集合本身。

  • Pressing the "Add Employee" button adds an EmployeeViewModel object in the collection and both the TextBlock and ItemsControl are updated as expected.
  • 按下“Add Employee”按钮,将在集合中添加EmployeeViewModel对象,并按预期更新TextBlock和ItemsControl。
  • Pressing the "Add Employee" again, the ItemsControl is updated with another entry. Great!
  • 再次按下“Add Employee”,ItemsControl将与另一个条目一起更新。太棒了!
  • Pressing the "Increment Employee Age" button. The Age property of each item is incremented by 1. The PropertyChanged event is raised. The ItemPropertyChanged event handler is invoked. The Textblock is updated as expected. However, the ItemsControl is not updated.
  • 按下“增加雇员年龄”按钮。每个项目的年龄属性增加1。引发PropertyChanged事件。调用ItemPropertyChanged事件处理程序。文本块按预期更新。但是,ItemsControl没有更新。

I am under the impression that the ItemsControl should be updated too when the Employee.Age is changed according to the answer in Notify ObservableCollection when Item changes.

我的印象是,当员工的时候,项目控制也应该更新。当项目发生变化时,年龄根据通知观察记录中的答案而变化。

enter image description here

1 个解决方案

#1


10  

I found the answer using Snoop to debug XAML.

我找到了使用Snoop调试XAML的答案。

The issue is that you are trying to bind to the ToString() method and that does not raise the PropertyChanged event. If you look at the XAML bindings you will notice that the ObservableCollection is actually changing.

问题是您正在尝试绑定到ToString()方法,这不会引发PropertyChanged事件。如果您查看XAML绑定,您会注意到ObservableCollection实际上正在发生变化。

Snoop Showing Correct Binding

Now look at each item control and it's texts binding in the "Text" property. There are none, it's just text.

现在看看每个项目控件,它的文本绑定在“Text”属性中。没有,只是文本。

Snoop showing no data binding to elements in the items control

To fix this simply add an ItemsControl ItemTemplate with a DataTemplate that contains the elements you'd like to be displayed.

要修复这个问题,只需添加一个带有DataTemplate的ItemsControl ItemTemplate,该模板包含您想要显示的元素。

<ItemsControl Grid.Row="1" ItemsSource="{Binding Path=Employees, UpdateSourceTrigger=PropertyChanged}" BorderBrush="Red" BorderThickness="1" >
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <TextBlock>
                <TextBlock.Text>
                    <MultiBinding StringFormat=" {0} is {1} years old">
                        <Binding Path="Name"/>
                        <Binding Path="Age"/>
                    </MultiBinding>
                </TextBlock.Text>
            </TextBlock>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

We now have a green light on binding. RaisePropertyChanged is being called.

我们现在对装订有了绿灯。RaisePropertyChanged被称为。

Binding correctly shows green

Ta-da!

哈!

Solution shown


注意!

本站翻译的文章,版权归属于本站,未经许可禁止转摘,转摘请注明本文地址:https://www.itdaan.com/blog/2015/02/10/30100e581100956f3a9f4a22906f1132.html



 
  © 2014-2022 ITdaan.com 联系我们: