Xamarin Tips and Tricks #1 – UriImageSource

Sometimes I come across (small) tips and tricks, gotchas or gems while working on Xamarin projects, so I thought let’s put those in a Xamarin Tips and Tricks series. I’ll kick off the series with some info on UriImageSource.

As you probably know you can set the Source of an Image from several locations, i.e. File, Resource, Stream or Uri. The UriImageSource loads an image from a Uri and then caches the results.

At one time I had to troubleshoot the performance of image loading in a list. Performance was so bad that it seemed as if the images weren’t cached but loaded from the Uri every time. Digging a bit in the Xamarin.Forms assemblies shows that the images are cached in a subfolder called ImageLoaderCache in the folder returned from the IsolatedStorageFile.GetUserStoreForApplication method.

On Android the GetUserStoreForApplication for an app called net.iwomm.imagetest returns the following folder: /data/data/net.iwomm.imagetest/files/.config/.isolated-storage

You can inspect the folder using the adb shell command. Keep in mind that folders starting with a dot (.) are hidden and can only be seen using the ls -a command in the shell. Personally, I use ls -la because that gives me a bit more info on the files and folders, such as the size.

So execute these commands to get to the cache folder and display the files:

adb shell

cd data/data/net.iwomm.imagetest/files/.config/.isolated-storage/ImageLoaderCache

ls -la

Keep in mind that the Android file system is case-sensitive when navigating through folders!

This will give you a list of cached images. Note that they are stored with a GUID file name, not with the original file name.

imageloadercache

Turns out that some of the images were quite large for thumbnail images in a list and that hurt performance, even when loading the images from the cache.

So here you go, if you ever need to inspect the UriImageSource cache, you know where to find it.