更新到ListBox绑定的集合后刷新UI [英] Refreshing UI after update to a ListBox-bound collection
问题描述
我试图直观地显示使用WPF/MVVM将一项(在我的情况下为BitmapImage)添加到ListBox的集合中.为了提供一些背景信息，我正在使用捕获卡捕获流式视频，并在视频流式传输时拍摄静态图像.通过单击UI上的静态图像"按钮可以捕获这些图像.捕获图像后，我想在UI上的单独面板中获取该图像的缩略图.我知道要执行此操作需要做什么，但是我似乎无法使其正常工作.现在，我的模型可以完成所有数据检索.
I am trying to visually show that an item (a BitmapImage in my case) has been added to a collection in a ListBox using WPF/MVVM. To give some background, I'm capturing streaming video with a capture card, and I'm taking still images while the video is streaming. These images are captured by clicking the "Still Image" button on the UI. After capturing an image, I would like for a thumbnail of said image in a separate panel on the UI. I understand what needs to be done to do this, but I can't seem to get it to work. Right now, my Model does all the data retrieval.
public ObservableCollection<BitmapImage> GetAssetThumbnails()
{
var imageDir = ImgPath != null ? new DirectoryInfo(ImgPath) : null;
if(imageDir != null)
{
try
{
foreach (FileInfo imageFile in imageDir.GetFiles("*.jpg"))
{
var uri = new Uri(imageFile.FullName);
_assetThumbnails.Add(new BitmapImage(uri));
}
}
catch (Exception)
{
return null;
}
}
return _assetThumbnails;
}
我的ViewModel在其构造函数中创建模型的新实例，然后将公共属性AssetCollection设置为等于_assetModel.GetAssetThumbnails(). ViewModel具有所有标准的OnPropertyChanged事件和事件处理.
My ViewModel creates a new instance of the model in its constructor, and then sets the public property AssetCollection equal to _assetModel.GetAssetThumbnails(). The ViewModel has all the standard OnPropertyChanged events and event handling.
private void OnPropertyChanged(string propertyName)
{
if(PropertyChanged != null)
{
PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
}
}
#region Public Properties
public ObservableCollection<BitmapImage> AssetCollection
{
get { return _assetCollection; }
set
{
if (_assetCollection != value)
{
_assetCollection = value;
OnPropertyChanged("AssetCollection");
}
}
}
#endregion
private void _assetCollection_CollectionChanged(object sender, NotifyCollectionChangedEventArgs e)
{
OnPropertyChanged("AssetCollection");
}
public event PropertyChangedEventHandler PropertyChanged;
然后，在我的XAML文件中，将ListBox的项目源绑定到AssetCollection.
Then, in my XAML file, I bind the ListBox's item source to AssetCollection.
<ListBox x:Name="lstBoxAssets" ItemsSource="{Binding AssetCollection}" Grid.Row="1" Background="{DynamicResource GrayColor}" Margin="5,0,0,5" ></ListBox>
我已阅读到集合中的每个项目都应实现INotifyPropertyChanged接口.我尝试为实现该功能的位图图像创建包装器类，但是它也不起作用.我在这里想念什么吗?图像最初显示，但是在捕获并保存图像后不会刷新.我觉得这是由于未调用事件PropertyChanged引起的.通过调试，我注意到它在被检查时始终为null，因此从不调用OnPropetyChanged方法.我不确定应该在哪里添加此事件处理程序.我仅使用代码隐藏文件将视图模型的数据上下文添加到视图中，仅此而已.那是我通常认为要添加任何事件处理的地方.有人能看到我在这里想念的简单东西吗?
I've read that each item in the collection should implement the INotifyPropertyChanged interface. I tried creating a wrapper class for a bitmap image that implemented that, but it didn't work either. Is there something that I'm missing here? The images show up initially, but don't refresh after an image has been captured and saved. I have a feeling it's stemming from the event PropertyChanged not getting called. I noticed through debugging that it is always null when it's checked, and thus the OnPropetyChanged method is never called. I'm not sure where I should add this event handler though. I only use the code-behind file to add the data context of the view model to the view, and that's it. That is where I would normally think to add any event handling. Can anyone see something simple that I am missing here?
推荐答案
在更新列表时是否要更改ObservableCollection，还是要更改存储在集合中的项目?
Are you changing the ObservableCollection when you update the list, or are you changing the items stored inside the collection?
如果要更改集合中的项目，则需要找到一种方法来告知WPF当单个项目发生更改时该集合已更改，以便知道重绘.
If you're changing the items inside the collection, you need to find a way to tell WPF that the collection has changed when the individual items change so it knows to redraw it.
通常，集合中的项目实现INotifyPropertyChanged，因此很容易将PropertyChange通知附加到列表中的项目，该通知告诉WPF每当属性更改时引发CollectionChanged事件.
Usually the items in the collection implement INotifyPropertyChanged, so it's easy to attach a PropertyChange notification to the items in the list which tells WPF to raise the CollectionChanged event whenever a property changes.
// Wireup CollectionChanged in Constructor
public MyViewModel()
{
ListOfSomeItems = new List<SomeItem>();
AssetCollection.CollectionChanged += AssetCollection_CollectionChanged;
}
// In CollectionChanged event, wire up PropertyChanged event on items
void AssetCollection_CollectionChanged(object sender, CollectionChangedEventArgs e)
{
if (e.NewItems != null)
{
foreach(Asset item in e.NewItems)
item.PropertyChanged += Asset_PropertyChanged;
}
if (e.OldItems != null)
{
foreach(Asset item in e.OldItems)
item.PropertyChanged -= Asset_PropertyChanged;
}
}
// In PropertyChanged, raise CollectionChanged event
void Asset_PropertyChanged(object sender, PropertyChangedEventArgs e)
{
OnPropertyChanged("AssetCollection");
}
如果项目未实现INotifyPropertyChanged，则无论何时集合中的项目发生更改，您都必须手动引发CollectionChanged事件.
If the items don't implement INotifyPropertyChanged, you'll have to manually raise the CollectionChanged event anytime an item in the collection changes.
AssetCollection[0].Thumbnail = new BitmapImage(uri);
OnPropertyChanged("AssetCollection");
如果您通过添加/删除项目来更改ObservableCollection本身，但没有看到UI更新，那么听起来好像是我们看不到的某个语法错误.
If you are changing the ObservableCollection itself by adding/removing items and are not seeing the UI update, then it sounds like it might be a syntax error somewhere we can't see.
我看到的最常见的一种是对私有财产进行更改，而不是对公共财产进行更改.
The most common one I see is making changes to the private property and not the public property.
// Will not raise the CollectionChanged notification
_assetCollection = _assetModel.GetAssetThumbnails();
// Will raise the CollectionChanged notification
AssetCollection = _assetModel.GetAssetThumbnails();
尽管我也看到很多人也使用List或自定义集合而不是ObservableCollection，但这不会引发CollectionChanged事件.
Although I also see a lot of people who use a List or custom collection instead of an ObservableCollection as well, which does not raise the CollectionChanged event.
这篇关于更新到ListBox绑定的集合后刷新UI的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
