我有一个ComboBox,它在堆叠面板中显示图像和文本。我最初打开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();
}
}
答案 0 :(得分:1)
我能够解决这个问题。 ComboBox执行UI虚拟化,当滚动到视图外时,ComboBox的虚拟化面板中的图像被删除。向后滚动时,再次调用已删除图像的转换器并重置图像源。因此,需要将用作源的流设置为起始位置以供重用。
转换器 -
StorageItemThumbnail thumbnail = (StorageItemThumbnail)value;
thumbnail.Seek(0);
image = new BitmapImage();
image.SetSource(thumbnail);