Load Images In a ListView stored in local App folder windows 8 app

Question

I have a button on the click of which I have to populate multiple images in a listview. I have seen some stackoverflow posts about the same but did not help. I want to populate images from my app local folder, and then set it as a source of my listview. Any sample of how to select multiple image files from the folder and adding it to the listview. Like for e.g.

var uri = new Windows.Foundation.Uri('ms-appx:///images/logo.png');

var file = Windows.Storage.StorageFile.getFileFromApplicationUriAsync(uri);`

this would help select one image stored in app folder, but how to loop through multiple images and add it in a listview.

Also in addition I have another grid added. When I select the image from my listview it should load in the grid. So on select event changed how should I grab the file path of the image or load the selected image in that grid.

Thanks In Advance.

Answer 1

You need to get a reference to the proper StorageFolder and then you can loop through the StorageFiles. You can create an object from the StorageFile. Since it doesn't sound like you're using MVVM, I'll show a quick code behind example.

//helper class to store the URI of the image and the file name
public class MyImage
{
    public MyImage(StorageFile file)
    {
        this.Uri = new Uri(string.Format("ms-appx:///images/{0}", file.Name);
        this.Name = file.Name;
    }

    public Uri Uri { get; set; }
    public string Name { get; set; }
}

//Called from your button click event
private async Task LoadImagesAsync()
{
    //This get's your installation root folder, then traverse into the images folder
    //In a URI, this is equivalent to "ms-appx:///images"
    var imagesFolder = await Windows.ApplicationModel.Package.Current.InstalledLocation.GetFolderAsync("images");

    var files = await imagesFolder.GetFilesAsync();

    //may want to filter your image types here

    var itemsSource = files.Select(x => new MyImage(x));

    //assume your ListView has a x:Name attribute of "MyList"

    this.MyList.ItemsSource = itemsSource;
}

//called from your SelectionChanged event from your ListView
private void SetImage()
{
    var myImage = this.MyList.SelectedItem as MyImage;

    //assume you have an Image in your XAML with an x:Name of "GridImage"

    this.GridImage.Source = new BitmapImage(myImage.Uri);
}