2016-07-23 108 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);