2016-07-23 149 views
1

我有一个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"); 
     } 
    } 
} 

这里是转换器 -

回答

1

我能解决这个问题。 ComboBox执行UI虚拟化,当滚动出视图时,ComboBox的虚拟化面板中的图像被删除。当向后滚动时,再次调用已移除图像的转换器并重置图像源。因此,用作源的流必须设置为开始位置以便重用。

转换器 -

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