In a lot of the Windows 8 sessions that I’ve given around the UK I’ve been building out a simple demo app that searches on flickR for some photos. Over time I’ve come to build that app usually with some combination of the following;

• Build out the basics of the app in .NET
• Rebuild the same thing in C++ and, usually, I re-use the .NET component that I use to do flickR searching in order to show that we can make custom WinRT components and build them into hybrid apps
• Rebuild the same thing in JavaScript and, usually, I re-use the .NET component again to show that works in JavaScript and I then remove the .NET component and replace it with a pure JavaScript implementation of flickR searching

and, based on audience and time, I sometimes take either the .NET example or the JavaScript example ‘forward’ and sketch out areas like;

1. Tiles and Toasts
2. Search
3. Share
4. Settings
5. Screens/Views
6. Process Lifecycle Management
7. Storage – Local Storage
8. Storage – SkyDrive Storage
9. Windows Azure Mobile Services
10. Background Tasks
11. Push Notifications

A number of people who came along to the sessions said that they’d like to see this demo recorded along with all the various assets and code-snippets and so on such that they could walk through it in their own time.

I did have a smaller, older variant of it on my site but that was done against earlier builds of the operating system so I felt it was time to update it and to include all the code snippets.

In this post, I’ll provide the .NET implementation. It took me a few hours to record but if I get chance I’ll perhaps try and repeat in JavaScript although a lot of the APIs (being WinRT) are the same.

I’ll also say that it’s just a demo and was cooked up to show people things rather than to provide a great user experience or provide guidance around how to structure your code or something like that – I generally bang code into one big file rather than try to be elegant or leap off into MVVM patterns or similar.

With that in mind, here’s 12 (+1 still to be made) videos that show that demo from start to finish in .NET – I’ll add to the post and add more videos as I make them as it takes a little time transcoding videos.

One thing I’d say is that I’d recommend downloading the original video files from Vimeo and running them at about 1.5x the play speed because my voice sounds quite slow and a bit monotone to me in these videos until I speed it up a little They were made on a very cheap microphone that I borrowed so apologies for the sound being a little flat and perhaps having a little hiss on it – as I say, download the videos and speed them up and you’ll probably get a better experience.

Assets/Snippets

At each step I dropped whatever assets I’ve used into this SkyDrive folder – snippets, pictures, code files, etc;

http://sdrv.ms/T79Dvi

so that everything that I’ve used is available to you subject to you taking it entirely as it is and understanding that it’s from a demo and I can’t offer you a support service on its use.

Here are the individual videos if you want to consume that way;

Step 0 – Creating the Projects

Step 1 – Searching FlickR and Displaying Some Results

Step 2 – Adding Tile/Toast Notifications

Step 3 – Adding Search

Step 4 – Adding Share (Source)

Step 5 – Adding Settings

Step 6 – Example of Screens/Views with Snapped View

Step 7 – Example of Process Lifecycle Management

Step 8 – Storing a Photo in a Local Folder

Step 9 – Storing a Photo on SkyDrive

Step 10 – Storing Simple Data in Azure Mobile Services

Step 11 – Downloading Photos in the Background

Conclusion

Enjoy – this demo is very definitely getting due for retirement but I’ve had good mileage out of using different pieces of it and it taught me a lot along the way