Как обновить содержимое GridView?

Question

У меня есть GridView в моем приложении, которое в основном содержит изображения следующим образом:

<GridView x:Name="ImageGridView">
    <Image x:Name="Image_1"/>
    <Image x:Name="Image_2"/>
    <Image x:Name="Image_3"/>
</GridView>

с этим в codebehind для изображений для загрузки:

public void SetImages()
{
  StorageFolder localFolder = Windows.Storage.ApplicationData.Current.LocalFolder;
  Image_1.Source= new BitmapImage(new Uri(localFolder.Path + "/Image_1.png"));
  Image_1.Source= new BitmapImage(new Uri(localFolder.Path + "/Image_2.png"));
  Image_1.Source= new BitmapImage(new Uri(localFolder.Path + "/Image_3.png"));
}

GridView показывает изображения очень хорошо. Тем не менее, у меня также есть класс, который меняет цвета этих изображений на основе существующих значений как следующие:

Это означает, что источники изображений не меняются, и пути к этим изображениям также остаются без изменений. Меняются только цвета на этих изображениях, как показано на фотографиях.

Однако, когда задача изменения цвета завершена и изображения обновляются в папке LocalState приложения, они не обновляются в изображениях GridView.

Я также пытался создать заметную коллекцию с изображениями, о которых идет речь. Привязал GridView к этой коллекции, и при каждом обновлении цвета я включал бы это:

GridView.ItemsSource = null;
GridView.ItemsSource = ImagesCollection;

Это работало бы, изменяя некоторые изображения, но не другие. это происходит случайно. Если есть способ дождаться первого перед выполнением второго, это может сработать!

Вопрос в том, как попросить GridView перезагрузить его содержимое? Обновить свой контент? очистить кэш и повторно загрузить изображения?

Answer 1

Не бойтесь использовать MVVM. В вашей xaml свяжите источники изображений со свойствами в вашей модели представления.

XAML:

<GridView>
    <Image Source="{Binding ImageSource1}"/>
    <Image Source="{Binding ImageSource2}"/>
</GridView>

ViewModel:

public string ImageSource1 => Windows.Storage.ApplicationData.Current.LocalFolder + "/Image_1.png";

public string ImageSource2 => Windows.Storage.ApplicationData.Current.LocalFolder + "/Image_2.png";

// invoke the NotifyPropertyChanged event to enforce an update.
public void UpdateImages()  {
    InvokePropertyChanged(nameof(ImageSource1));
    InvokePropertyChanged(nameof(ImageSource2));
}

Answer 2

Ну, я нашел косвенный грязный способ сделать это. обновить изображения в GridView. Я начал с очистки ObservableCollection, к которому привязан GridView:

ThumnailsCollection.Clear();

Перейдите в папку, в которой сохранены миниатюры. каждый тип миниатюр сгруппирован в одну папку. каждый раз, когда цвет меняется, когда миниатюры для него не существуют, создаются новые. в противном случае он напоминает уже имеющиеся:

StorageFolder localFolder =
    Windows.Storage.ApplicationData.Current.LocalFolder;

//Check if the main folder where the images are saved exist 

IStorageItem storageItem = await localFolder.TryGetItemAsync("Thumnails");
if (storageItem != null)
  {
    //If it does, look into the subfolders. each image group of the same
    //type and different colors are saved to tier own folder

    StorageFolder ImagesFolder =
        await localFolder.GetFolderAsync("Thumnails");
    var queryOption =
        new QueryOptions { FolderDepth = FolderDepth.Deep };
    var flatWallpaperSubFolders =
        await ImagesFolder .CreateFolderQueryWithOptions(queryOption).GetFoldersAsync();
    foreach (StorageFolder subFolder in subFolders)
      {
        IStorageItem thumnail =
            await subFolder.TryGetItemAsync($"{AlphaColorID} - {BetaColorID}.png");
        if (thumnail != null)
          {
             //in each of the folders, look if the needed image
             //exist or not
             //If it does, add it to the ObservableCollection
             BitmapImage icon =
                 new BitmapImage(new Uri(subFolder.Path + $"/{AlphaColorID} - {BetaColorID}.png"));
             ThumnailsCollection.Add(new ThumnailsBitmap(icon));
          }
        else
          {
            //If the Image with the requested colors does not exist
            //Render a new image with the needed colors
            //the rendered image is added to the same subfolder with the other
            // similar images
            await ApplyColor(new Uri($"ms-appx:///Images/{subFolder.Name}-Thumnail.png"), $"{AlphaColor} - {BetaColor}.png", $"{subFolder.Name}");
            BitmapImage icon =
                new BitmapImage(new Uri(flatWallpaperSubFolder.Path + $"/{AlphaColor} - {BetaColor}.png"));

            ThumnailsCollection.Add(new ThumnailsBitmap(icon));
          }
      }
  }
else
  {
    //when run for the first time, all folders and images are missing
    //through ApplyColor task, all Images are rendered and folders created
    await ApplyColor(new Uri("ms-appx:///Images/Number-1-Thumnail.png"), $"{AlphaColor} - {BetaColor}.png", "Number-1");

    await ApplyColor(new Uri("ms-appx:///ModernWallpaperGrayscale/Number-2-Thumnail.png"), $"{AlphaColor} - {BetaColor}.png", "Number-2");


    //All needed to do is to all of those Images to the
    //ObservableCollection
    StorageFolder ImagesFolder = await localFolder.GetFolderAsync("Thumnails");
    var queryOption =
        new QueryOptions { FolderDepth = FolderDepth.Deep };
    var flatWallpaperSubFolders =
        await ImagesFolder.CreateFolderQueryWithOptions(queryOption).GetFoldersAsync();
    foreach (StorageFolder subFolder in subFolders)
      {
        BitmapImage icon =
            new BitmapImage(new Uri(subFolder.Path + $"/{AlphaColor} - {BetaColor}.png"));
        ThumnailsCollection.Add(new ThumnailsBitmap(icon));
      }
  }

Answer 3

Поместите этот код в метод:

public void SetImages()
{
    StorageFolder localFolder = Windows.Storage.ApplicationData.Current.LocalFolder;
    Image_1.Source= new BitmapImage(new Uri(localFolder.Path + "/Image_1.png"));
    Image_2.Source= new BitmapImage(new Uri(localFolder.Path + "/Image_2.png"));
    Image_3.Source= new BitmapImage(new Uri(localFolder.Path + "/Image_3.png"));
}

Вызывайте этот метод один раз в начале и при изменении изображений.