图像在组合框中消失

Question

我有一个组合框，它在堆栈面板中显示图像和文本。当我最初打开 ComboBox 时会显示这些项目。当我向下滚动列表时，列表顶部的项目中的图像会消失（当我向上滚动以查看这些项目时），反之亦然。文本保持不变。此外，即使没有滚动，当我从组合框中选择一个项目时，该项目也会在关闭的组合框中显示而没有图像。如何解决这个问题？

<ComboBox ItemsSource="{Binding ElementName=searchPage, Path=emotionList}"
                               SelectionChanged="ComboBox_SelectionChanged"
                               Name="emotionComboBox"
                               VerticalAlignment="Center">
                            <ComboBox.ItemTemplate>
                                <DataTemplate x:DataType="local:StorageItemThumbnailClass">
                                    <StackPanel Orientation="Horizontal">
                                        <Image Source="{Binding Thumbnail, Converter={StaticResource ImagetoThumbnailConverter}, Mode=OneWay}" Margin="10" MaxHeight="50" MaxWidth="50"/>
                                        <TextBlock Text="{Binding Name}" Style="{StaticResource BodyTextBlockStyle}" Margin="10" TextWrapping="WrapWholeWords" Width="120"/>
                                    </StackPanel>
                                </DataTemplate>
                            </ComboBox.ItemTemplate>
                        </ComboBox>

此方法从组合框所在的searchPage 的 OnNavigated 函数中调用 -

private async Task populateEmotionListAsync()
        {            
            emotionList = new ObservableCollection<StorageItemThumbnailClass>();
            emotionList.Add(new StorageItemThumbnailClass { Name = EmotionEnum.None.ToString(), Thumbnail = null });
            emotionList.Add(new StorageItemThumbnailClass { Name = EmotionEnum.Angry.ToString(), Thumbnail = await (await StorageFile.GetFileFromApplicationUriAsync(new Uri("ms-appx:///Assets/EmotionIcons/angry.png"))).GetThumbnailAsync(ThumbnailMode.PicturesView, 50) });
            emotionList.Add(new StorageItemThumbnailClass { Name = EmotionEnum.Contempt.ToString(), Thumbnail = await (await StorageFile.GetFileFromApplicationUriAsync(new Uri("ms-appx:///Assets/EmotionIcons/contempt.png"))).GetThumbnailAsync(ThumbnailMode.PicturesView, 50) });
            emotionList.Add(new StorageItemThumbnailClass { Name = EmotionEnum.Disgusted.ToString(), Thumbnail = await (await StorageFile.GetFileFromApplicationUriAsync(new Uri("ms-appx:///Assets/EmotionIcons/disgust.png"))).GetThumbnailAsync(ThumbnailMode.PicturesView, 50) });
            emotionList.Add(new StorageItemThumbnailClass { Name = EmotionEnum.Afraid.ToString(), Thumbnail = await (await StorageFile.GetFileFromApplicationUriAsync(new Uri("ms-appx:///Assets/EmotionIcons/afraid.png"))).GetThumbnailAsync(ThumbnailMode.PicturesView, 50) });
            emotionList.Add(new StorageItemThumbnailClass { Name = EmotionEnum.Happy.ToString(), Thumbnail = await (await StorageFile.GetFileFromApplicationUriAsync(new Uri("ms-appx:///Assets/EmotionIcons/happy.png"))).GetThumbnailAsync(ThumbnailMode.PicturesView, 50) });
            emotionList.Add(new StorageItemThumbnailClass { Name = EmotionEnum.Neutral.ToString(), Thumbnail = await (await StorageFile.GetFileFromApplicationUriAsync(new Uri("ms-appx:///Assets/EmotionIcons/neutral.png"))).GetThumbnailAsync(ThumbnailMode.PicturesView, 50) });
            emotionList.Add(new StorageItemThumbnailClass { Name = EmotionEnum.Sad.ToString(), Thumbnail = await (await StorageFile.GetFileFromApplicationUriAsync(new Uri("ms-appx:///Assets/EmotionIcons/sad.png"))).GetThumbnailAsync(ThumbnailMode.PicturesView, 50) });
            emotionList.Add(new StorageItemThumbnailClass { Name = EmotionEnum.Surprised.ToString(), Thumbnail = await (await StorageFile.GetFileFromApplicationUriAsync(new Uri("ms-appx:///Assets/EmotionIcons/surprised.png"))).GetThumbnailAsync(ThumbnailMode.PicturesView, 50) });
        }

这里是 StorageItemThumbnailClass -

public class StorageItemThumbnailClass : INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;
    private StorageItemThumbnail _thumbnail;
    private string _name;

    public StorageItemThumbnail Thumbnail
    {
        get { return _thumbnail; }
        set
        {
            _thumbnail = value;
            // Call OnPropertyChanged whenever the property is updated
            OnPropertyChanged("Thumbnail");
        }
    }

    // Create the OnPropertyChanged method to raise the event
    protected void OnPropertyChanged(string name)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name));
    }

    public String Name
    {
        get { return _name; }
        set
        {
            _name = value;
            // Call OnPropertyChanged whenever the property is updated
            OnPropertyChanged("Name");
        }
    }
}

这是转换器-

class ImagetoThumbnailConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, string language)
    {
        BitmapImage image = null;
        if (value != null)
        {
            if (value.GetType() != typeof(StorageItemThumbnail))
            {
                throw new ArgumentException("Expected a thumbnail");
            }
            StorageItemThumbnail thumbnail = (StorageItemThumbnail)value;
            image = new BitmapImage();
            image.SetSource(thumbnail);
        }
        return (image);
    }

    public object ConvertBack(object value, Type targetType, object parameter, string language)
    {
        throw new NotImplementedException();
    }
}

Answer 1

我能够解决这个问题。 ComboBox 执行 UI 虚拟化，并且 ComboBox 的虚拟化面板中的图像在滚动出视图时被删除。向后滚动时，再次调用已删除图像的转换器并重置图像源。因此，需要将用作源的流设置为开始位置以供重用。

转换器-

StorageItemThumbnail thumbnail = (StorageItemThumbnail)value;
thumbnail.Seek(0);
image = new BitmapImage();
image.SetSource(thumbnail);