Preloading Images in Windows RT app

I have a Windows Store app running on Windows RT that includes a ListBox of Images. There's quite a few of them so when loading them up the first time the painting process is quite obvious. I know there's a caching mechanism running behind the scene and I'd like to use it to preload the first few images at the top of the list so that the list appears instantly.

Is there a way to do that?

Answers


I've found a solution.

IRandomAccessStream stream = await storageFile.OpenAsync(FileAccessMode.Read);
BitmapImage bitmapImage = new BitmapImage();
if (await bitmapImage.SetSourceAsync(stream))
{
    image1.source = bitmapImage;
}

There's no flickering this way.


Got it to work, and here's how I did it. I created a Dictionary<string, BitmapImage> to store the preloded images and loaded it up on app start. Also created a function that takes a path and returns the preloaded image from the dictionary if it exists or loads it normally if it doesn't.

private Dictionary<string, BitmapImage> preload;
.
.
.


public void PreloadImages(BaseUri, path)
{
    if (!preload.ContainsKey(path))
    {
        var uri = new Uri(BaseUri, path);
        var file = await StorageFile.GetFileFromApplicationUriAsync(uri);

        IRandomAccessStream fileStream = await file.OpenAsync(Windows.Storage.FileAccessMode.Read);
        BitmapImage bmp = new BitmapImage();
        if (!preload.ContainsKey(path))
            preload.Add(path, bmp);
    }
}
public BitmapImage ImageFromRelativePath(Uri BaseUri, string path)
{
    if (preload.ContainsKey(path))
    {
        return preload[path];
    }
    else
    {
        var uri = new Uri(BaseUri, path);
        BitmapImage bmp = new BitmapImage();
        bmp.UriSource = uri;
        return bmp;
    }
}

Then I used a Converter to be used in the Xaml binding.

public sealed class CachedImageConverter: IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, string language)
    {            
        var path = value as string;
        if (path == null)
            return null;
        var app = App.Current as App;
        return app.ImageHelper.ImageFromRelativePath(new Uri("ms-appx:/"), path);
    }

    public object ConvertBack(object value, Type targetType, object parameter, string language)
    {
        throw new NotImplementedException();
    }
}

And the converter in action:

<Image Source="{Binding Path=ImagePath, Mode=OneWay, Converter={StaticResource CachedImageConverter}}"></Image>

Need Your Help

TreelistEx field with Search

search lucene sitecore treelist

I have a requirement from a client to modify the treelistex field to include a search box on top of the left content tree list box. This will allow searching of items instead of the user having to ...

vba excel Worksheet_Change input info have vba find row

vba excel-vba excel

I have a cell I would like to be able to type a number let say 010 into cell E3 and have VBA after I'm done do a search into a different worksheet where it well do a find and give me the row number (