Caching images and data with the Q42.WinRT library in Windows 8 apps


This blog is part of a series of blog post about the Q42.WinRT open source toolkit for Windows 8.

The open source Q42.WinRT library contains helpers for caching images and data in your application. A lot of data from API calls and images used in your app come directly from the internet. But if the user opens your app when he is offline, it would be great if all the data is still available.

Caching Images

Showing an image from an URL in XAML is easy.
<Image Source="http://www.mydomain.com/image.png" />

This shows a nice image. The image is loaded from the specified URL and can only be shown when there's an internet connection. When the app is closed and re-open, the image will be downloaded again.

The Q42.WinRT library contains an attached property called ImageExtensions.CacheUri. Using it in your app is just as easy as setting the source property:
<Image q42controls:ImageExtensions.CacheUri="http://www.mydomain.com/image.png" />

Now the image is cached. The first time it will be downloaded and stored in the local storage. The second time the image is rendered, the cached image is used and no download is made. This is a great solution for images that don't change and saves bandwidth. Don't use if for images that get updated frequently!

The image cache uses a custom component called WebDataCache. It can store the result of any URL input to the local storage and returns a custom URI to the stored data in the ms-appdata:///local/ format.

Caching results from API calls

The Q42.WinRT library also contains a nice little helper to cache the result of an API call that has a string or object as result which is serializable to JSON result.

Using this cache is easy:
JsonCache.GetAsync("samplekey", () => LongRunningOperation())

If the cache key "samplekey" is found, it will return the result directly from the cache. If the key is not found, it will run the "LongRunningOperation". The return type of the LongRunningOperation can be a string or object or list of objects. These will be serialized to JSON using Newtonsoft.Json and written to the local storage.
When the data is loaded, the objects will be deserialized and returned immediately.

The data and  image caching is part of the open source Q42.WinRT library. A fully working sample is available in the Q42.WinRT library on GitHub:


CMM 05-10-2012
One improvement would be to set a cache expiry param ;)

Michiel 12-10-2012
@CMM Thanks for your feedback. I added support for an ExpireData param to the JsonCache. GitHub and NuGet package are updated. Check it out :)

Jussi 30-10-2012
Do I need to download the source and build it myself as directly getting it from GIThub and adding it to project complains that it is not signed?

Jussi 03-11-2012
Regarding my last question, I did sign and rebuild it myself. Second question, how is the cache item expiration? I'd need them to expire in the matter of maybe 30 days, or so.

Aleq 15-02-2013
Can you please add also expiration functionality to the WebDataCache class? Thanks in advance!

Ashwin Bhanushali 18-10-2013
Can I use this library in windows metro app build using the html-javascript?

kushall 15-05-2015
can we use Q42.winRT library for windows phone 8.1 store application ? If yes then how to use it. Thanks in advnce.

?????????? Villeneuve-d'Ascq. ???? ????????? Villeneuve-d'Ascq ?????????, ??? ???????????, ??? ????????? ?????????.

Helenanmw 19-11-2018
???????,??????????! <a href=http://4dela.by/>.</a> s.up.er.vi.sor.20.15.invin.o@gmail.com s.up.e.rvis.or20.1.5.inv.ino@gmail.com superviso.r20.1.5in.v.in.o@gmail.com su.pervis.or201.5.invi.no@gmail.com s.u.p.ervi.s.or2015i.n.vino@gmail.com

Antonioryb 02-12-2018
???????,??????????! <a href=https://sfilm.by/>.</a> plen.ki.s.f.il.m.by@gmail.com

Andreasvuz 01-02-2019
?????? ???? ???????<a href=https://skytent.by/>!</a> ???? ??????? ?????????? ????? 10 ??? bor.is1.980se.ceno.v@gmail.com

Zelenagup 29-12-2019
???????,??????????! <a href=http://prime-granit.by/>.</a> p.rim.eg.r.an.it2.0.19@gmail.com prime.gra.ni.t.2.019@gmail.com p.rime.g.ra.nit. pr.i.me.g.r.a.n.i.t2019@gmail.com pr.i.me.gran.i.t201.9@gmail.com

New Comment

E-mail (not published)
Enter the code shown: