XAML Image source has issues displaying a deep nested path

Question

This is quite vexing. I am working on an app for image management. Part of the value is the ability to store images in sub-folders based on image properties, eg. creation date.

If I store the image source in a shallow folder (app\images\img.jpg), everything works fine. If I store the image in KnownFolders.Pictures\source\year\month\day\img.jpg, Image does not render. (Yes, that specific path won't work, I am trying to give you a sense of how the path is constructed)...

The file is actually there. The path is correct (I can open it in a browser, e.g.). The app has access to the file. But it does not render the bitmap.

I tried to render the bitmap manually using

new BitmapImage(new Uri("KnownFolders.Pictures\source\year\month\day\img.jpg"),UriKind.Absolute))

That does not render anything. (Again, assume the path is valid and has a file at its bottom).

What Am I Missing?

The head scratcher: for GIF anims, I am using Thomas Levesque's useful component: https://github.com/XamlAnimatedGif. That one, unfortunately, does only render gifs... and it does so even when the path is the one given above. So the Standard IMAGE control does not render correctly, but Thomas's control does... infuriating.

Answer 1

An UWP app can't load a BitmapImage from an absolute URL to a file in a folder structure below the Pictures Library Folder.

So this won't work:

var relativePath = @"source\year\month\day\img.jpg";
var imageFile = await KnownFolders.PicturesLibrary.GetFileAsync(relativePath);
var bitmapImage = new BitmapImage(new Uri(imageFile.Path));

However, you could do this:

var relativePath= @"source\year\month\day\img.jpg";
var imageFile = await KnownFolders.PicturesLibrary.GetFileAsync(relativePath);
var bitmapImage = new BitmapImage();

using (var stream = await imageFile.OpenAsync(FileAccessMode.Read))
{
    await bitmapImage.SetSourceAsync(stream);
}

Answer 2

So, after way too much time spent on this...

First, link to DataContextChanged of the IMAGE element. In there, parse the DataContext out. If you are using the IMAGE outside of an ItemsControl etc, this is not required...

private async void ImageView_DataContextChanged(FrameworkElement sender, DataContextChangedEventArgs args)
{
    if (sender is Image)
    {
        Image img = (Image)sender;

        if (img.DataContext is ImageView)
        {
            MyViewDataContext dc = (MyViewDataContext)img.DataContext;

            img.Source = await dc.bitmap();
        }
    }
}

And here the implementation of MyViewDataContext.bitmap() which has a property called source that yields, you guessed it, absolute paths:

public async Task<BitmapImage> MyViewDataContext.bitmap()
        {
            if (_bitmap == null)
            {
                try
                {
                    StorageFile file = await StorageFile.GetFileFromPathAsync(source);
                    bool r = Windows.Storage.AccessCache.StorageApplicationPermissions.FutureAccessList.CheckAccess(file);
                    if (r)
                    {
                        using (IRandomAccessStream fileStream = await file.OpenAsync(Windows.Storage.FileAccessMode.Read))
                        {
                            // create a new bitmap, coz the old one must be done for...
                            _bitmap = new BitmapImage();

                            // And get that bitmap sucked in from stream.
                            await _bitmap.SetSourceAsync(fileStream);
                        }
                    }
                }
                catch (Exception e)
                {
                    _bitmap = null;
                }
            }
            return _bitmap;
        }
        BitmapImage _bitmap;

I cache the resulting bitmap until I dispose of this MyViewDataContext.

I am now most concerned about memory. This one worries me: How to dispose BitmapImage cache?

So, as a tech debt, I am going to address the potential mem leaks later, once this whole thing is on the test bench and I can take a look at its runtime behavior...

Answer 3

To access the folders and libraries represented by the properties of this class, specify the corresponding capabilities in your app manifest. For example, to access KnownFolders.PicturesLibrary, specify the Pictures Library capability in the app manifest.

Hope this will help KnowFolders