Accessing images from isolated storage in XAML using “isostore:/” scheme

Question

I've downloaded images from the web and saved them to the Isolated Storage and now I want to access those images in my XAML file, giving a Uri as a reference to them.

I have verified with IsoStoreSpy that they are stored properly where I would expect them to be and I can create BitmapImages from them if I open the file and read in the byte stream. But now I want to optimize my image handling by passing just a Uri from my model to the IsolatedStorage location and letting my XAML load the image.

<Image Height="120" Width="120" Stretch="Uniform" HorizontalAlignment="Left">
   <Image.Source>
     <BitmapImage UriSource="{Binding PodcastLogoUri}" DecodePixelHeight="120" DecodePixelWidth="120" /> 
   </Image.Source>
</Image>

This is the PodcastLogoUri Uri value that is bound to BitmapImage.UriSource:

"isostore:/PodcastIcons/258393889fa6a0a0db7034c30a8d1c3322df55696137611554288265.jpg"

Here's how I've constructed it:

public Uri PodcastLogoUri
{
    get
    {

        Uri uri = new Uri(@"isostore:/" + PodcastLogoLocation);
        return uri;
    }
}

Still, I can't see an image in my UI. And I am sure the image is at PodcastLogoLocation.

Should it be possible to reference images to the UI from the isolated storage like this in Windows Phone 8? What am I doing wrong?

Edit: If I create the BitmapImage directly using the same path and use the BitmapImage in XAML, it works fine and I can see the image I expect to see there:

<Image Height="120" Source="{Binding PodcastLogo}"  Width="120" Stretch="Uniform" HorizontalAlignment="Left"/>

 public BitmapImage PodcastLogo
 {
     get
     {
          Stream stream = null;
          BitmapImage logo = new BitmapImage();
          using (var isoStore = IsolatedStorageFile.GetUserStoreForApplication())
          {
              if (isoStore.FileExists(PodcastLogoLocation))
              {
                 stream = isoStore.OpenFile(PodcastLogoLocation, System.IO.FileMode.Open, FileAccess.Read);
                 try
                 {
                      logo.SetSource(stream);
                 }
                 catch (Exception e)
                 {
                 }

            }
        }

        return logo;
     }
 }

Maybe my question isn't as straight forward as I've anticipated. I also posted it on MSDN forums, and I've gotten no answers to it. I really thought it's just me not grokking something and I would get someone pointing that out to me pretty quickly. Not so. social.msdn.microsoft.com/Forums/wpapps/en-US/… — Johan Paul

Kapé Kapé · Accepted Answer · 2014-07-02T14:08:34

I think I've done exactly the same thing that you're trying to do. What I've found is the absolute location where the Isolated Storage stores the file using IsolatedStorageFile.GetUserStoreForApplication(). This is something like "C:/Data/Users/DefApps/AppData/<App Product ID>/Local/<YourFile.png>";

I've tested this workaround on Windows Phone 8 and it works for me...

1. XAML

<Image Width="40">
    <Image.Source>
        <BitmapImage DecodePixelWidth="40" DecodePixelHeight="40" UriSource="{Binding Path=Icon}" />
    </Image.Source>
</Image>

2. ViewModel

private string _icon;
public string Icon
{
    get
    {
        return _icon;
    }
    set
    {
        if (value != _icon)
        {
            _icon = value;
            NotifyPropertyChanged("Icon");
        }
    }
}

3. Load data

filename = "Myicon.png";

IsolatedStorageFile store = IsolatedStorageFile.GetUserStoreForApplication();
if (!store.FileExists(filename))
{
    using (IsolatedStorageFileStream stream = new IsolatedStorageFileStream(filename, FileMode.Create, FileAccess.Write, store))
        stream.Write(imgBytes, 0, imgBytes.Length);
}

//get Product ID from manifest. Add using System.Linq; if you haven't already
Guid productId = new Guid((from manifest in System.Xml.Linq.XElement.Load("WMAppManifest.xml").Descendants("App") select manifest).SingleOrDefault().Attribute("ProductID").Value);
string storeFile = "C:/Data/Users/DefApps/AppData/" + productId.ToString("B") + "/Local/" + filename;

this.Items.Add(new MyViewModel() { Icon = storeFile });

Accessing images from isolated storage in XAML using “isostore:/” scheme

2 Answers