可观察集合不更新 UI

Question

我正在研究在可观察集合中添加和删除行的功能。 我有用户控件视图，其中列表视图绑定到可观察集合。 我还删除了在视图模型中工作的命令，但不更新 UI。

这是我在ViewModel上的代码，继承自MvvmLight ViewModelBase类。

public class ProductInfoViewModel : ViewModelBase
{
#region Properties
private ObservableCollection<Product> _productList;
public ObservableCollection<Product> ProductList
{
get { return _productList; }
set
{
_productList =  value;
RaisePropertyChanged("ProductList");
}
}
#endregion
#region Constructor
public ProductInfoViewModel()
{
ConnectWebService connect = new ConnectWebService();
string json = connect.getResponse(@"http://localhost:8082/products");
ProductList = JsonConvert.DeserializeObject<ObservableCollection<Product>>(json);
DeleteCommand = new RelayCommand<long>((id) => DeleteCommandHandler(id, ProductList));
}
#endregion
#region Commands
public ICommand DeleteCommand { get; private set; }
#endregion
#region CommandsHandlers
private void DeleteCommandHandler(long id, ObservableCollection<Product> productList)
{
try
{
productList.Remove(productList.Where(i => i.ProductId == id).First());
}
catch (Exception)
{
}
}

这是我在 XAML 中的代码：

<UserControl.DataContext>
<local:ProductInfoViewModel/>
</UserControl.DataContext>
<Grid>
<Grid Margin="0,50,0,100">
<ListView  Margin="5" SelectionChanged="ListView_SelectionChanged" ItemsSource="{Binding ProductList, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" Foreground="Black" Background="White" BorderBrush="{x:Null}" 
x:Name="ProductList">
<ListView.View>
<GridView>
<GridViewColumn  Header="Kod" Width="50" DisplayMemberBinding="{Binding ProductCode}"/>
<GridViewColumn  Header="Nazwa" Width="150" DisplayMemberBinding="{Binding ProductName}" />
<GridViewColumn  Header="Typ" Width="150" DisplayMemberBinding="{Binding ProductType}" />
<GridViewColumn  Header="Opis" Width="300" DisplayMemberBinding="{Binding ProductDescription}" />
<GridViewColumn  Header="Dostępność" Width="150" DisplayMemberBinding="{Binding ProductAvability}" />
<GridViewColumn Width="80">
<GridViewColumn.CellTemplate>
<DataTemplate>
<Button Content="Edytuj" Background="Transparent" BorderThickness="0" Foreground="Blue" Width="50" Margin="0" HorizontalAlignment="Center"
Click="Button_Click"/>
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
<GridViewColumn Width="80">
<GridViewColumn.CellTemplate>
<DataTemplate>
<Button Content="Usuń" Background="Transparent" BorderThickness="0" Foreground="Blue" Width="50" Margin="0" HorizontalAlignment="Center" 
Click="Delete_Click" Command="{Binding ProductInfoView.DeleteCommand, Mode=OneWay, Source={StaticResource Locator}}" CommandParameter="{Binding ProductId}"
/>
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
</GridView>
</ListView.View>
</ListView>
</Grid>

我的产品类实现了 INotifyPropertyChanged 接口，但我也使用 Fody。

现在，仅当我将一个视图更改为另一个视图然后返回时，视图才会更新。 我不知道出了什么问题。 我将不胜感激任何帮助！

Answer 1

您将Button的Command属性绑定到Locator资源返回的视图模型。应将其绑定到ListView绑定到的同一实例：

<DataTemplate>
<Button Content="Usuń" Background="Transparent" BorderThickness="0" Foreground="Blue" Width="50" Margin="0" HorizontalAlignment="Center" 
Click="Delete_Click"
Command="{Binding DataContext.DeleteCommand, RelativeSource={RelativeSource AncestorType=ListView}}" 
CommandParameter="{Binding ProductId}"/>
</DataTemplate>

Answer 2

当您从列表中删除项目时，您不使用产品列表资源库，因此RaisePropertyChanged不会被调用。 快速解决方法是在删除项目后添加对RaisePropertyChanged的调用：

productList.Remove(productList.Where(i => i.ProductId == id).First());
RaisePropertyChanged("ProductList");