Imagine this...

Building Windows 8 MVVM app... Gaa, don't like the available templates, but good enough to start with. hack, hack, hack.

Building second app. Ahh, templates again... hack, hack, hack...

Third app. Project templates... Oh this is silly, enough! Creating own darn project templates. And while I'm at it, Item templates too!

That took a bit, but now, wow, building app's is faster, with much less hacking.

App four, five, six... This is nice! You know, having gotten so much from the community, it would be cool to gave back. Bet there are others who could use these templates! ...

Windows Store MVVM Templates for Visual Studio

If you have ever tried to create a Windows Store application using the MVVM pattern then you will probably have found that the Visual Studio project and item templates are a bit cumbersome. I often find myself adding a new page to my projects using one of the default templates, only to need to rewrite it to follow the MVVM pattern before I can even start adding application specific logic. What if there was a way to take advantage of the selection of project and page templates provided by Visual Studio, but have them produce fully MVVM compliant code?

Well today I’d like to announce the release of a free extension for Visual Studio 2012 (including the Express editions for Windows 8) that provides just that. It is based upon the open source Okra App Framework, and provides almost all of the Visual Studio Windows Store templates in an MVVM friendly manner.

Installing the Extension

The “Windows Store MVVM Templates for the Okra App Framework” ...

What Templates are Provided?

There are two types of template included, project templates and item templates. The project templates are designed to get you started with a new application and provide exactly the same behaviour as the default Visual Studio templates (but written following the MVVM pattern).

• Okra Basic App - A single-page Okra App Framework project with no predefined controls or layout.
• Okra Grid App - A three-page Okra App Framework project that navigates among grouped items arranged in a grid. Dedicated pages display group and item details.
• Okra Split App - A two-page Okra App Framework project that navigates among grouped items. The first page allows group selection while the second displays an item list alongside details for the selected item.

...

Also included are a number of item templates that allow you to add new pages to any existing Okra App Framework based application, whether created using the project templates or not.

• Basic Page (MVVM)
• Split Page (MVVM)
• Items Page (MVVM)
• Item Detail Page (MVVM)
• Grouped Items Page (MVVM)
• Group Detail Page (MVVM)
• Search Contract (MVVM)
• Share Target Contract (MVVM)
• Settings Pane (MVVM)

...

What do the MVVM Pages Look Like?

All the page templates (and each of the pages in the project templates) include the following files,

...

If you're building Modern UI MVVM app's, looks like this should really help speed up your delivery and help you focus on what will make your app great...

Yeah, I know it feels like I've been doing allot frameworks recently, but in my weird world, playing with new frameworks and seeing how they work is "fun". Why? They let you focus on building your apps, and not worrying about the goo. Or they let you see how the library author dealt with the goo. Or you LIKE goo and want to create your own goo buster. So many opportunities for fun.

Anyway...

Cimbalino Windows Phone Toolkit

Cimbalino Windows Phone Toolkit is a set of useful and powerful items that will help you build your Silverlight applications for Windows Phone.

The Toolkit is divided in projects, regarding different Windows Phone application required capabilities:

• Cimbalino.Phone.Toolkit - the base project of the toolkit, containing base MVVM services, some very useful converters, helper classes and extension methods, and the bindable Application Bar behavior
• Cimbalino.Phone.Toolkit.Camera - MVVM compatible services for camera access
• Cimbalino.Phone.Toolkit.Controls - Controls library (requires Silverlight for Windows Phone Toolkit)
• Cimbalino.Phone.Toolkit.DeviceInfo - MVVM compatible services for device information access
• Cimbalino.Phone.Toolkit.Location - MVVM compatible services for location access
• Cimbalino.Phone.Toolkit.PhoneDialer - MVVM compatible services for phone dialer access
• Cimbalino.Phone.Toolkit.UserInfo - MVVM compatible services for user information access

Note: this toolkit is only compatible with the Windows Phone SDK 7.1.x and Windows Phone 8.0!

Nuget

The packages are available thru NuGet here, with the same handles as the project names (e.g., the main package is "Cimbalino.Phone.Toolkit")

Download

Please visit the download section on GitHub to download the latest release of the toolkit.

I thought one of the cool things was that it supports both Windows Phone 7.1 and 8...

While you can easily grab the binaries from NuGut, since source is part of the fun, I grabbed the latest drop. Which compiled with no problems or errors.

How do you use it? There's a couple samples in the repository... Here's the Location sample.

So okay, what else is there of interest? Just check out snaps of the main library;

That enough to wet your appetite?

Cimbalino, you ask? Here's Pedro's answer.

"Cimbalino" is the word people from Porto (my home town!) use for expresso coffee!

The name Cimbalino is a reference to La Cimbali, a popular brand for expresso machines a few years ago in Portugal.

If you'd like you can hear how it is correctly read in Portuguese.

• [0:42] March CTP (“CTP4”) of Visual Studio Update 2 now available (Charles Sterling)
• [2:07] Now Available: Office Developer Tools for Visual Studio 2012 (S. Somasegar)
• [3:33] Visual Studio Tools for Git 0.8.0.0 (Andy Lewis)
• [4:49] Announcing a New Preview of the LightSwitch HTML Client
• [6:07] Getting Started with LightSwitch in Visual Studio 2012 Update 2 CTP4 (Beth Massi)
• [6:40] MetroAppSite: Free, Open Source Metro-Style Website Templates for Your Windows Store Apps (Aaron Stannard)
• [7:35] Recording of Webinar 'Applied MVVM in Windows 8 apps' by Gill Cleeren (Gill Cleeren)
• [9:01] Advanced MVVM concepts using Contoso Cookbook: An analysis of a complete MVVM application: Part 1 (Gill Cleeren)
• [9:44] Easy Access to Kinect for Windows Sample Code (Ben Lower)
• [10:34] Interpolation Tricks

Picks of the Week!

• Dan's Pick of the Week: [12:06] Unity Windows Store apps open beta, and Channel 9 Live event!
• Brian's Pick of the Week: [12:52] Panoramic Camera Head

• [03:29] - Architecture overview of MVVM
• [08:06] - MVVM and code sharing
• [22:48] - Messages
• [28:14] - Best practices

Full course outline:

• Mod 01a: Comparing Windows 8 and Windows Phone 8, Part 1
• Mod 01b: Comparing Windows 8 and Windows Phone 8, Part 2
• Mod 02: Basics of View Models
• Mod 03: Model-View-ViewModel
• Mod 04: Sharing Code Between Windows 8 and Windows Phone 8

Like Visual Studio's docking behavior? It's Window Management? It's auto-hiding areas? Want a free [New BSD License (BSD)] WPF control that lets you build the same kind of thing?

AvalonDock

Project Description
AvalonDock is a WPF controls library which can be used to create a docking layout system like that is present in VisualStudio.

Features

• Supports MVVM design
• Almost everything can be restyled
• Support for Windows Forms controls

...

AvalonDock 2.0 getting started guide PART 1

AvalonDock 2.0 allows to create an interface for WPF very similar to Visual Studio GUI. It's important to understand that has been developed with this in mind so it's most suited for projects that have documents and tools.

In this tutorial I'll show you how to start using with AvalonDock. Below information are relative to version 2.0 and connot be valid for earlier versions.

AvalonDock is composed of a layout model, a series of controls representing the views and a DockingManager class which represents the docking area where user can drag and drop documents and tools.

Looking at the below screenshot we can identify the AvalonDock components.

• DockingManager This is the core control in AvalonDock. It arranges contained panes, handles fly out panes and floating windows. In the above image the DockingManager object contains everything (in WPF terms) from the toolbar on top and the status bar on bottom. DockingManager class also handles saving and restoring layout.
• LayoutPanel This panel arranges children panes along a direction (selected with property Orientation) adding a resizer between them. Above a LayoutPanel with horizontal orientation arranges three panes: a LayoutAnchorablePane on left, a LayoutDocumentPane in the central area, and a LayoutDockablePane on right.
• LayoutAnchorablePane This layout element contains a collection of LayoutAnchorable obiects. Usually it arranges contents like a tabcontrol. In the above screenshot LayoutDockablePanes are the container of contents 'Strumenti' and 'Progetti' (Tools and Projects in English) on the left and the container of 'Classi' and 'Proprieta'' (Classes and Properties in English) on the right. A LayoutDockablePane can be auto-hidden (like that containing contents 'Errori'(errors), 'Lista Azioni'(action list) and 'Uscita'(output)) and can be dragged over the DockingManager as floating window or anchored to a border of the parent DockingManager.
• LayoutDocumentPane A pane of this type contains usually documents (object of type DocumentContent) but optionally can also contain DockableContents object like the above 'Tools' or 'Classes' contents. Above a document content is placed inside a ResizingPanel (horizontally orienteted) in the central area between the too DockablePane object just mentioned. A document pane can't be moved.
• LayoutAnchorable A anchorable content is the container of application controls. It's always contained in a pane (LayoutAnchorablePane or LayoutDocumentPane). In the above screen shot, LayoutAnchorable objects are the 'classi'(classes) object (which contains a SharpDevelop object), the 'strumenti'(tools) object but also the 'Errori' (errors) (which is in the AutoHidden state and is contained in a autohidden pane). A LayoutAnchorable as name suggests can be dragged away from its container pane and be repositioned into another esisting pane, or to a border of the parent DockingManager or left in a floating window (LayoutAnchorableFloatingWindow).
• LayoutDocument is a content that can be hosted only in a LayoutDocumentPane. It's a particular content because can't be anchored to a border but can be positioned only into a LayoutDocumentPane or floated in a LayoutDocumentFloatingWindow. Above LayoutDocument objects are the 'program.cs' or 'MainForm.cs' files.
• LayoutFloatingWindow It's a window that contains contents when are dragged or moved over a DockingManager. A LayoutFloatingWindow (and its specializations LayoutAnchorableFloatingWindow and LayoutDocumentFloatingWindow) derives from Window, and always contains a pane (LayoutAnchorablePane or LayoutDocumentPane) which in turn contains one or more contents (LayoutAnchorable or LayoutDocument). The LayoutFloatingWindow object is created directly from the DockingManager when user start a dragging operation for a content or a DockablePane or manually by code calling the LayoutContent.Float() method.
• LayoutPane It's a base class for LayoutDockablePane and LayoutDocumentPane. It provides common properties and methods for both.
• LayoutContent It's a base class for LayoutAnchorable and LayoutDocument. It provides common properties and methods for both.

...

Here's some snaps from the Dec 4,2012 samples release;

In firing up the MVVM code sample, there's a couple references you might have to fix up.

Just Nuget for AvalonDock, install and you're good to go. Matter of fact, if you install it via nuget you get a couple additional themes too.

The MVVM sample is simple, but that's just fine. Here's a snap of it

And here's a couple snaps of it using the different themes.

How hard is it to change a theme? Less than one line of code.

...

Okay, you're a diehard WinForm dev? Feel left out? Don't! There's WinForm support for you too!

So get Docking!

Using the Microsoft Kinect to control GoogleMap

The project is a WPF application that uses Microsoft Kinect to control google maps.

Feel free to learn WPF MVVM pattern and Kinect development from it!

Project Information URL: http://kinectmap.codeplex.com/

Project Source URL: http://kinectmap.codeplex.com/SourceControl/changeset/view/15754

I cover WPF and C# so often, because it's my comfort zone, and not the web stuff nearly enough. So these posts by Nick Polyak seemed like a great fit, one to help me, and hopefully you, expand our comfort zones a little... (That and I really liked the title...

HTML5, JavaScript, Knockout, JQuery, Guide for Recovering Silverlight/WPF/C# Addicts. Part 1 - JavaScript and DOM.

Introduction 

Being a consultant, makes me very sensitive to the newest trends in technology.

Several years ago, I came across WPF and fell in love with it. WPF introduced brand new concepts that enable the developers to achieve almost total separation between the visual design of the UI application and the underlying non-visual implementation. At the same time WPF provides great features for visual development. Silverlight brought the WPF power to multiple platforms.

Recent developments, however, indicate that Microsoft soured on both WPF and Silverlight in favor of HTML5/JavaScript. This is, probably, the correct strategy for Microsoft in the current tough situation. Over a period of several years, Microsoft lost its status as the largest software company and lost its superiority in the internet browser market. The primary reason behind it is that Microsoft overlooked and came too late to the smart phone and tablet markets. Being a follower is different from being the trend setter and currently Microsoft has to beat everyone else in their own game, which is HTML5 and JavaScript (and based on the previous history I am confident it is going to become a leader again).

These developments caused me to put a lot of effort into learning and working with HTML5 and JavaScript. I am also trying to understand how to apply the concepts I learned while working on WPF/Silverlight in JavaScript development.

The purpose of these series of articles is to make it easier for WPF/Silverlight developers to master programming HTML5/JavaScript utilizing WPF and Silverlight concepts. These articles assume that the reader already has some basic familiarity with HTML and JavaScript, so people who are completely new to it, should start with something else.

...

HTML5, JavaScript, Knockout, JQuery, Guide for Recovering Silverlight/WPF/C# Addicts. Part 2 - Solar System Animation built with SVG, Knockout and MVVM Pattern.

Important Note

Friends, if you like the article, please vote for it [On the Code Project page, here]. Also I'd appreciate a couple of lines about what you think can be improved and what else you want to hear. Thanks!

This is part 2 of HTML5 series. Part 1 can be accessed at HTML5, JavaScript, Knockout, JQuery, Guide for Recovering Silverlight/WPF/C# Addicts. Part 1 - JavaScript and DOM.

Several years ago I came across Bea Stollnitz's (Costa's) example converting a usual ListView into a planetary system and was fascinated by it. You can find her article and code at The power of Styles and Templates in WPF. Even though the MVVM pattern, had not been formalized at that time, she was adhering to a strict separation between the view model and the view's templates and styles.

I decided to build a similar application in HTML5/JavaScript also strictly adhering to the MVVM pattern. You can see the result at Solar System Demo. Make sure to view the demo using the HTML5 compatible browsers. If you use Chrome or Firefox you can even see that the planets are moving around the sun (IE 9 does not support SVG animations, so if you use IE 9, the planets won't move). The speed of the planet images in the demo is chosen randomly and has nothing to do with the actual planet speed. I'll talk more about the demo below.

In order to achieve the separation between visual and non-visual components I use Knockoutjs framework. Knockoutjs is an excellent open source framework giving developers ability to bind properties and events within HTML to JavaScript's entities representing the View Model. The Knockoutjs bindings are similar to those of WPF and Silverlight. From my point of view, Knockoutjs is a must for building an HTML web site that has a considerable amount of business logic.

This article is by no means a detailed tutorial on Knockoutjs, even though I'll try to present some its most important features. Perhaps, in one of the subsequent articles, I'll give more information on Knockoutjs, but in the meanwhile Knockoutjs website has great documentation and tutorials. Also there are two excellent Pluralsite courses on Knockoutjs: Building HTML5 and JavaScript Apps with MVVM and Knockout by John Papa as well as Knockout Fundamentals by Steve Michelotti. (You have to subscribe to pluralsite.com in order to be able to access the tutorials).

In order to draw the non-textual visuals, e.g. the orbits and in order do animations I am using SVG. SVG is part of HTML5 spec and it provides HTML tags to create various shapes use transforms on them and create animations. SVG is quite similar to WPF/Silverlight Shape/Path, transforms and animations functionality. Again, this article is not a tutorial on SVG, it just demonstrates some SVG concepts. Perhaps in the future articles I'll talk about SVG in more detail.

...

Enough said? Go read these post and get your web dev on!

Windows Phone apps don't just simply run on Windows 8 as they are. There are ways. However, to architect your code so that you can share your "awesome" across multiple screens. Alnur Ismail shows how.

Join the Conversation
Do you see yourself writing a complete app and then refactoring to use portable class libraries? or architecting with portable classes from the beginning? Start a new conversation in the Canadian Developer Connection group on LinkedIn. Alnur, as well as fellow Canadian developers are there networking, sharing, and learning. While visiting the group, make sure to join the group and stay connected.

This segment was presented and recording LIVE on Wednesday, December 5, 2012.

D³: LIVE & INTERACTiVE
In case you haven't heard about the show, Developers, Developers, Developers: LIVE & INTERACTIVE (D³) is a monthly show hosted by Jonathan Rozenblit. The show airs live every first Wednesday of the month at 12:00 PM ET and features the latest updates on what's new and exciting in the world of development; featured presentations; and guests. LIVE and INTERACTIVE means that you'll be part of the show – You're invited to interact with us; ask questions and get them answered; and share your thoughts and opinions.

Join the Canadian Developer Connection LinkedIn group 
Follow @devsdevdevs
Like D³ on Facebook
Subscribe to podcasts via iTunes, Zune, or RSS
 Download the Canadian Developer Connection Windows Store app
Download the Canadian Developer Connection Windows Phone app

More D³: LIVE & INTERACTIVE >>

MVVM Diagram Designer

A while back a user called "sucram (real name Marcus)"  posted a series of articles here about how to create a diagram designer using WPF. Sucrams original links are as follows:

• http://www.codeproject.com/Articles/22952/WPF-Diagram-Designer-Part-1
• http://www.codeproject.com/Articles/23265/WPF-Diagram-Designer-Part-2
• http://www.codeproject.com/Articles/23871/WPF-Diagram-Designer-Part-3
• http://www.codeproject.com/Articles/24681/WPF-Diagram-Designer-Part-4

I remember being truly blown away by this series of articles, as they showed you how to do the following things:

• Toolbox
• Drag and Drop
• Rubber band selection using Adorners
• Resizing items using Adorners
• Rotating items using Adorners
• Connecting items
• Scrollable designer surface, complete with zoombox

WOW that sounds fantastic, sounds exactly like the sort of things you would need to create a fully functional diagram designer. Well Yeah, its was and still is, but........the thing is I have used WPF a lot, and trying to use the code attached to sucrams series of article in WPF just wasn't that great. He had taken a very control centric view, in that everything was geared around adding new controls and supplying static styles for said controls.

In reality it was more like working with a Win Forms application. Not that there is anything wrong with that, and I really truly do not mean to sound ungrateful, as that could not be further from the truth, without that original series of articles it would have taken me a lot longer to come up with a working diagram designer that I was happy with. So for that I am truly grateful, thanks sucram you rock.

Anyway as I say sucrams original codebase took a very control centric point of view, and added controls using code behind, and held collections of items directly in the diagram surface control. As I say if that is what you want cool, however, it was not what I wanted. What I wanted was

• All of the features of curams original code (actually I didn't want any rotating of items, or resizing of items)
• A more MVVM driven approach, you know allow data binding of items, delete of items via ICommand etc. etc.
• Allow me to control the creation of an entire diagram from within a single ViewModel
• Allow for complex objects to be added to the diagram i.e. ViewModels that I could style using DataTemplate(s). Sucrams original code only allowed simply strings to be used as a DataContext which would control what ImageSource an Image would use to show for a diagram item. I needed my items to be quite rich and allow popups to be shown and associated with the diagram item, such that the data related to the diagram item could be manipulated
• Allow me to save the diagram to some backing store
• Allow me to load a previously saved diagram from some backing store

To this end I have pretty much completely re-written sucrams original code, I think there is probably about 2 classes that stayed the same, there is now more code, a lot more, however from an end user experience, I think it is now dead easy to control the creation of diagrams from a centralized ViewModel, which allows a diagram to be created via well known WPF paradigms like Binding/DataTemplating.

For example this is how the attached DemoApp code creates a simple diagram that is shown when you first run the DemoApp:

public partial class Window1 : Window
{
    private Window1ViewModel window1ViewModel;

    public Window1()
    {
        InitializeComponent();

        window1ViewModel = new Window1ViewModel();
        this.DataContext = window1ViewModel;
        this.Loaded += new RoutedEventHandler(Window1_Loaded);
    }


    /// <summary>
    /// This shows you how you can create diagram items in code
    /// </summary>
    void Window1_Loaded(object sender, RoutedEventArgs e)
    {
        SettingsDesignerItemViewModel item1 = new SettingsDesignerItemViewModel();
        item1.Parent = window1ViewModel.DiagramViewModel;
        item1.Left = 100;
        item1.Top = 100;
        window1ViewModel.DiagramViewModel.Items.Add(item1);

        PersistDesignerItemViewModel item2 = new PersistDesignerItemViewModel();
        item2.Parent = window1ViewModel.DiagramViewModel;
        item2.Left = 300;
        item2.Top = 300;
        window1ViewModel.DiagramViewModel.Items.Add(item2);

        ConnectorViewModel con1 = new ConnectorViewModel(item1.RightConnector, item2.TopConnector);
        con1.Parent = window1ViewModel.DiagramViewModel;
        window1ViewModel.DiagramViewModel.Items.Add(con1);
    }
}

As the article progresses I will show you how to use the new MVVM driven diagram designer classes in your own applications, and you could leave it right there if you wanted to, but if you want to know how it all works that will be explained in the rest of the article.

...

• Introduction
• What Does It Look Like
• Attached Codebase Structure
• How Do I Use It In My Own Applications
  • Use It Step 1 : Creating The Raw XAML
  • Use It Step 2 : Creating The Main ViewModel
  • Use It Step 3 : Creating Toolbox Item DataTemplates
  • Use It Step 4 : Creating The Diagram Item ViewModels
  • Use It Step 5 : Creating Diagram Item Designer Surface DataTemplates
  • Use It Step 6 : Creating Diagram Item Popup DataTemplates
  • Use It Step 7 : Persistence
    • What Are The Important Things To Save
    • Saving/Hydrating A Diagram
• How Does The Diagram Designer Stuff Actually Work
  • Drag And Drop To The Design Surface
  • Binding The Items Collection
  • Adding Connections
    • ConnectorInfoBase/PartCreatedConnectorInfo
    • FullyCreatedConnectorInfo
    • ConnectorViewModel
  • Selection/Deselection
    • Flavour 1 : Standard Mouse Down Selection
    • Flavour 2 : Rubberband Selection
  • Deleting Items
• That's It For Now

How Do I Use It In My Own Applications

This section will talk you through how to create a diagram in your own application. It assumes the following

• That you want to use WPF things like Binding/DataTemplating/MVVM
• You actually want to persist / hydrate diagrams to some backing store (Like I say I chose to use RavenDB which is a no sql document database, but if this is not for you, it should be pretty easy for you to craft your own data access layer talking to your preferred SQL backend)

If you want to create your own MVVM style diagram designer, I have broken it down into 7 easy steps, as long as you follow these 7 steps to the letter you should be just fine. There is also a working example of these 7 steps by way of the attached DemoApp project code, so you can examine that whilst reading this text, so hopefully you will be ok.

...

I love that he takes the time to share how we can use this in our own app's.

Here's a snap of it running on my system (which was easy and painless)

One other thing of note is how RavenDB is used as the data store. If you've been hearing about NoSQL but haven't had a chance to see it in use, well here's you chance! It's all here in the download, nothing extra needed.

"A Windows Phone 7.x App! What are you thinking, Greg? Windows Phone 8 should be in days! Why highlight a 7.x app? Are you smoking dope?"

No, no... The point I'm trying to make is that Windows Phone 7.x app's "will just work" on Windows Phone 8 (at least that's the intent and goal). So you don't have to wait for the Windows Phone 8 SDK to be released, you don't have to wait for Windows Phone 8 to take off, you can start coding today, releasing app's today. And if you release a Windows Phone 7.x app you will not only b e able to run on Windows Phone 8, but also on all the existing Windows Phone 7x devices too. See, I'm no smoking dope!

Anyway...

My WinSource app is now open source on the Nokia developer website

Introduction

In the summer 2012, the ​WinSource website held a contest among the Windows Phone developers to create an official application for their website.

I was a participant in the contest and I can tell you that it was a really interesting and challenging contest. My application finished in third position.

You can download the application from the winner at ​here.

Important notice

Before I decided to put the full source code of my complete application. I asked the owners of the ​WinSource from the Neverstill company if I can publish the source code of my application. They accepted my idea, because it is a great way to help the Windows Phone community.

In the current form, the application has enough features that it can be an alternate ​WinSource application. The only restriction is a user cannot publish or use the ​WinSource’s logo, the assets or the content from the ​WinSource. NOTE, this project is ​licensed under a slightly modified MIT license which reflects the above restriction.

The purpose of having this open project is to help the community creating a professional news reader for any other websites that give the permissions. It also shows different concepts which can be applied in different type of applications.

..."

The app provides a working example of a number of cool features

My application contains the following features:

• The metro design is used throughout the app, while the main page is showcased using the panorama design.
• Fast navigation between pages.
• Articles classified by date.
• Play YouTube videos.
• A description of each team member, including a display of the author name & image on each author’s page. Also included is the option to send the author an email.
• Article links can be shared on Twitter, Windows Live, Facebook, or by email.
• The application bar contains shortcuts to the Facebook page and the Twitter page of the website.
• The About page provides a way to send an email and to write a review of the app.
• Option to automatically refresh articles when the application launches.

The following list contains advanced features:

• Offline mode. Articles can be read even when no internet connection is available.
• Unlimited space for saving articles, which can then be accessed using the Saved Articles page.
• Articles can be periodically downloaded(every ~4 hours) in the background, even when the app is not running. This feature does not require server support.
• Toast notification will display the number of new articles available, and a badge count in the application live tile will also display this number.
• The back of the live tile will display the latest article title.

...

It also relies on a number of open source libraries;

Open source libraries

I used three open source libraries that are well known in the developer community:

• GalaSoft MvvmLight (​http://mvvmlight.codeplex.com/): Used to architecture a modular application and to easily add future features.
• Newtonsoft.Json (​http://json.codeplex.com/): Used to save and love articles for the offline mode.
• Silverlight Toolkit (​http://silverlight.codeplex.com/): Used for hub tile control and for the optimized list control.

...

The source (which you can get by clicking through and scrolling to the bottom of the page, compiled and ran for me the vey first time, with no hassles or tweaks.

Here's a snap of it running on my machine;

Here's a snap of the Solution;

What can you do with the source files of the application?

Simple answer: create your own news application! The source files provided are the best starting point to get your news application ready. The mechanism is ready and your tasks are:

• Replace the assets in the Assets folder of the WinSource assembly.
• Modify the classes in the WinSource.Client assembly in order to fetch the article descriptions and videos from your news source.
• Remove or add sections in the Panorama.

Learning

Also, if you read the code you can learn a lot about the Windows Phone SDK and about some best practices. The application is more complete than the ones in the MSDN samples.

I think that sums it up well. There's a good bit you can learn from in this app, from MVVM, to keeping your UI responsive when doing network calls to interfacing with Facebook/Twitter and more. And that's nice is that you can leverage this code and knowledge if you're building apps for other platforms like Windows 8 or WPF on Windows 7...

Think it was kind of cool and something you'd like to look see the source for?

MY EVENTS - Sample Modern Application with Visual Studio 2012

The main goal of this sample modern application is to provide a sample app where you can see most of the new technologies related to Visual Studio 2012, in a practical way.

Sample application context and scenarios
This sample application shows most of the new technologies you can use with Visual Studio 2012 in order to build Modern Apps.

The context is about an events/conferences management system called “My Events”.
It is composed by:

• Central Web API Services:
• Global Web-App (ASP.NET MVC4):
• Organizers WPF App (WPF):
• Organizers Windows 8 Store App (XAML/C#):
• Attendees Windows 8 Store App (HTML5/WinJS):

Goals
This global system and the related client apps are highlighting the following points:

• Consumer end-user point of view with the latest UX technologies capabilities, typical of Modern-Apps.
• Enterprise and LOB (Line of Business) point of view, when using a desktop application.
• Cloud friendly. You can deploy very easily all the server assets (Web Api Services and Web app) into the Windows Azure cloud.
• Extensible and open to more complex scenarios. Even though our scenario’s main goal is to ‘keep it simple’, we wanted to be able to leave it open for future extensions and complexity that is usually required when implementing a real production application.
• Multiple technical approaches. We wanted to illustrate how multiple technical approaches can co-exist within the same solution (Web, mainstream-app, CRUD, etc.)
• Easily deployable. The RI is easily deployable so that you can install it and experiment with it.

The selected technologies and frameworks used are the following:

• Core
  • ASP.NET Web-API Services
  • Entity Framework 5 (Code First)
  • SQL Server LocalDB
• Web App
  • ASP.NET MVC 4
  • JavaScript & JQuery consuming Web Api Services
• Windows 8 Store Apps
  • Windows 8 Store App using HTML5/WinJS
  • Windows 8 Store Apps using XAML/C#
• Desktop App
  • WPF (Windows Presentation Foundation) App

While this show's off allot...

What this sample application is NOT about
This is not a production application and it is not intended as a guidance for complex scenarios/applications, as it mostly covers CRUD and Data-Driven scenarios, only. If you need guidance for complex scenarios, we recommend to check guidance material from the Microsoft Patterns & Practices group like the ‘CQRS Journey guidance’, which shows a reference application with a related functional domain & scope (Events/Conferences platform) but from a different point of view based on design-patterns and best architectural practices for complex scenarios, covering approaches like CQRS (Command & Query Responsibility Segregation) & DDD (Domain Driven Design).

Ready to build it now?

Building the Sample

Software required:

Visual Studio 2012, Windows 8, BingMaps JavaScript SDK [GD: which you can find here Bing Maps SDK for Metro style apps (Beta)]

Check that you have the dependencies, open the solution and run it. The database will be generated for you using LocalDB and Entity Framework Initializers.

If when running the web client for the first time, you get a runtime error here;

...that it can't find a file in the FakeImages folder, what I did was just copy the folder into the path it thought to find the images. Easier than tweaking code.

So I coping the FakeImages folder from
...\MY EVENTS - Sample Modern Application with Visual Studio 2012\C#,JavaScript\MyEvents\MyEvents.Web\FakeImages
to
...\MY EVENTS - Sample Modern Application with Visual Studio 2012\FakeImages

Then the app ran fine. Once run the first time, you can delete that extra copy if you want, it's only need the first time the app runs, when its building its data store.

Also note: When creating an Event, also make sure to add at least one Session to it. Otherwise the event won't show up in the in a few of the Clients (This had me wondering if something was busted. I could see the event in the Web and Desktop apps, but in none of the Windows Store apps... Adding a Session fixed that. Doh!)

Here's a snap of the Solution;

And some snaps of it running on my system.

Here's the Web app;

The WPF Desktop app;

As a Windows Store app;

Wrap up
Therefore and as previously mentioned, our main objective is to highlight and show most of the new capabilities and technical possibilities offered by Visual Studio 2012 and all its related technologies in order to build Modern Apps.

There's a bunch here to look in this source. From using a Solution wide version assembly file, to Portable Library projects, Windows Store apps, Facebook Integration, Twitter, Maps, MVC4, ASP.Net Web API, Json.Net, MVVM, unit testing the web backend and much, much more.

Cocoon

Cocoon is a framework to support the development of .Net Windows 8 Metro-style applications, in particular those that link to web services. It simplifies accessing, displaying and editing data using standard Metro controls, and allows easy application of the MVVM pattern.

For more details, and news on the latest releases visit http://andyonwpf.blogspot.com

Current Features

• A navigation framework with,
  • Attribute based page and view model discovery using MEF
  • Automatic creation and wiring up of page and view model
  • Passing of parameters to view models upon activation
  • Persistence of navigation and state upon application suspension

• A data framework with,
  • Support for observable collections and data virtualization
  • An extensible framework for the retrieval, processing and display of data from the cloud

Documentation

• Introduction
• Base Types
  • ObservableVector<T>
  • VirtualizingVector<T>
• Cocoon Navigation Framework
  • Defining pages and view models
  • More to follow...
• Cocoon Data Framework (IDataListSource<T> and data lists)
  • Introduction
  • Example Code
  • SimpleDataListSource<T>
  • PagedDataListSource<T>
  • VirtualizingDataList<T>

Cocoon – A new framework for Windows 8 Development

To assist with Windows 8 Metro-style applications I would like to announce the Cocoon framework (http://cocoon.codeplex.com/). This aims to build on top of the learning from the Chrysalis project to provide a simple way to develop Metro-style applications in a manner that fits naturally with the MVVM design pattern.

It is likely that many Metro-style apps will be connected applications, downloading data from across the internet in response to user navigation. Modern applications are expected to do this in a seamless manner, retrieving data on demand and populating the user interface in response. In some ways this is at odds with the web API programming model that is based upon individual request-response calls, with paging used to retrieve large datasets. One of the first targets of the Cocoon framework is to simplify this process – bridging the world of stateless web API calls, with the “fast and fluid” interfaces expected by users.

 Navigation in Cocoon – MVVM for Metro-style apps

Navigation in Cocoon

Although not limited to this, the Cocoon framework is designed to work great with the Model-View-ViewModel (MVVM) pattern that has become common when designing XAML based applications. One problem when using this pattern is that you need some way of associating a view with a view-model. Often this is done by navigating directly to a page, and using a “ViewModelLocator” to identify and wire up the respective view-model.

In Cocoon a slightly different approach is used. Here, rather than navigating directly to a view, you navigate to a named page. Although the behaviour is extensible, by default Cocoon will use MEF (the built in composition framework included in .Net) to locate both the view and view-model associated with this page name, create and initialise instances of these and wire them together.

...

The Navigation Manager

In order to navigate between pages, Cocoon includes a navigation manager that can be accessed by importing the INavigationManager interface through MEF (simplified by the fact that all views and view models in Cocoon are themselves are composed by MEF).

Getting Started with Cocoon Navigation – The Cocoon Bootstrapper

Since the Cocoon navigation framework is built on top of the Managed Extensibility Framework (MEF), the application is composed with the required dependencies as the user navigates through the application. MEF is a composition framework that is built into the .Net framework, that enables the construction of loosely-coupled, easily maintainable and testable applications to be composed automatically at run time. An introductory guide for those who are not familiar with MEF is available here.

What I have not covered previously however was how to navigate to the application’s first page when it is launched,

Launching Navigation Using The Cocoon Bootstrapper

To simplify the initialization of Cocoon based applications the framework includes the ‘CocoonBootstrapper’ class that can be used at startup. This manages the configuration of MEF for the most common scenarios, initialization of services and activation of the application.

...

Here's a snip of the sample app running.

Note, to get the sample app to run, you'll need your own Flickr API Key.

Here's a snap of the Solution;

And some snaps of the code, showing a little bit of how MEF is used.

If you've thought, "I love MEF and I wonder if I can use it to compose Metro Style App's, without messing up navigation" or looking for a new data handling framework or just want to check out a cool framework, Cocoon, and all its source, is ready for you...

Links:

• Pomodoro Technique
• MVVM Light

Source Code

Mini-Tutorial

To install Knockout, just type install-package KnockoutJS in the Package Manager Console. To learn more, check out: knockoutjs.com.

For other episodes in this series, check out: http://bit.ly/mvcscreencasts.

Also visit Brandon's blog at http://www.userinexperience.com or follow Brandon on Twitter at @BrandonSatrom

Relevant links:

• John's blog and on Twitter (@john_papa)

• Laurent's blog and on Twitter (@lbugnion)

• Get MVVM Light

Laurent's videos

• Understanding the MVVM pattern at MIX10 
• Deep Dive MVVM at MIX 11  

Follow @SilverlightTV on Twitter for the latest updates.

Here are some of the reports we got from the users:

• The application is too slow when exchanging currencies
• It uses too much data traffic/should cache the exchange rates
• It doesn’t work for some currencies
• The results are inaccurate/using out-of-date exchange rates

So, what we can see from these comments is that we need a better data source, and that we should use some sort of caching mechanism…

I think I’ll go ahead and put some coffee on to boil!

To Bing or not to Bing…

The first version of Currency Converter used Bing to make the exchanges, which resulted in some of the reports you read above!

For this version, however, we decided to use MSN Money because it has more accurate and up-to-date data, and because it works every time no matter the currency!

MSN Money provides a very nice page on which we can see current currency exchange rates in relation to US Dollars; just open your Internet Explorer 8.0+ and navigate to the following URL:

http://moneycentral.msn.com/investor/market/exchangerates.aspx

As you can see here, we have all the data we need to convert from X to USD and from USD to X, and we can even convert from X to USD to Y.

So, why not just get all of this data on a single request, cache it, and use it offline to make the currency exchanges? J

Like before, we will retrieve the data we require from the page HTML by using Regular Expressions. To do so, open Internet Explorer Developer Tools (press F12), use the “Select element by click” option (Ctrl + B), and click on the “Argentine Peso” text; you’ll get something looking like this:

Using the information above, we can see a pattern in the code:

HTML

<tr>
    <td>CURRENCY</td>
    <td style=”text-align:right”><a SOMETHING>VALUE_IN_USD</a></td>
    <td style=”text-align:right”><a SOMETHING>VALUE_PER_USD</a></td>
</tr>

Now that we know the pattern, we are now able to build this regular expression:

C#

private static Regex _resultRegex = 
    new Regex("<tr><td>(?<currency>[^<>]+)</td><td style=""text-align:right"">.*?>(?<value>[0-9.,]+)</a></td></tr>");

Applying this Regular Expression to the retrieved HTML will allows us to get every row matching it, and retrieve the Currency Name and the “Per USD” Exchange Rate!

Time for some coding

Now that we know how to get all the currency rates from a single URL, it’s time to make the necessary changes to our code to accommodate the new data!

Like the previous article, we will maintain the MVVM pattern, showing the coding from the pattern’s bottom (Model) to the very top (View).

The (Re)Model

Here are the changes we need to make on our model in order to accommodate the retrieved and cached currency rates:

• Set each currency to save its exchange rate and last update
• Mark the base currency (US Dollar), giving it an exchange rate of 1.0 (trying to convert from USD to USD? Right…)
• Add an “Update Exchange Rates” operation to the service

And here is the full Model, with the changes in yellow:

C#

using System;public interface ICurrencyExchangeService
{
    ICurrency[] Currencies { get; }    ICurrency BaseCurrency { get; }    void ExchangeCurrency(double amount, ICurrency fromCurrency, ICurrency toCurrency, Action<ICurrencyExchangeResult> callback);    void UpdateCachedExchangeRates(Action<CachedExchangeRatesUpdateResult> callback, object state);
}public interface ICurrency
{
    string Name { get; }    double CachedExchangeRate { get; set; }    DateTime CachedExchangeRateUpdatedOn { get; set; }
}public interface ICurrencyExchangeResult
{
    Exception Error { get; }    string ExchangedCurrency { get; }    double ExchangedAmount { get; }
}public interface ICachedExchangeRatesUpdateResult
{
    Exception Error { get; }    object State { get; }
}

The ICurrencyExchangeService now has a new BaseCurrency property that we will set with the “US Dollar” currency instance, as well as an UpdateCachedExchangeRates method to update all the exchange rates.

For the ICurrency, we have two new properties: the CachedExchangeRate to store the currency exchange rate value, and the CachedExchangeRateUpdatedOn for the last update date.

A new interface called ICachedExchangeRatesUpdateResult has been added in order to return any exception thrown by the ICurrencyExchangeService.UpdateCachedExchangeRates method asynchronous execution to the caller.

Now let’s look at the interface’s implementation:

The first new thing to take note of is that we now have a CurrencyBase abstract class. From here, we extend the MsnMoneyCurrency class, adding a single Id property to store the numeric Id for the Currency found in MSN Money.

Next is the MsnMoneyV2CurrencyExchangeService, a direct implementation of the ICurrencyExchangeService.

Unlike BingCurrencyExchangeService from the previous version, notice that MsnMoneyV2CurrencyExchangeService does not extend the CurrencyExchangeServiceBase, and that it only requests online data in the UpdateCachedExchangeRates method and not on every ExchangeCurrency method call.

Here is the code for these classes:

C#

public class MsnMoneyV2CurrencyExchangeService : ICurrencyExchangeService
{
    private const string MsnMoneyUrl = "http://moneycentral.msn.com/investor/market/exchangerates.aspx?selRegion=1&selCurrency=1";    #region Static Globals    private static Regex _resultRegex = new Regex(@"<tr><td>(?<currency>[^<>]+)</td><td style=""text-align:right"">.*?>(?<value>[0-9.,]+)</a></td></tr>");    private static ICurrency[] _currencies = new ICurrency[] { 
        //The currencies exposed by MSN Money will go here
    };    #endregion    #region Properties    public ICurrency[] Currencies
    {
        get
        {
            return _currencies;
        }
    }    public ICurrency BaseCurrency { get; protected set; }    #endregion    public MsnMoneyV2CurrencyExchangeService()
    {
        BaseCurrency = Currencies.First(x => x.Name == "US Dollar");
    }    public void ExchangeCurrency(double amount, ICurrency fromCurrency, ICurrency toCurrency, bool useCachedExchangeRates, Action<ICurrencyExchangeResult> callback, object state)
    {
        if (useCachedExchangeRates)
        {
            try
            {
                ExchangeCurrency(amount, fromCurrency, toCurrency, callback, state);                return;
            }
            catch
            {
            }
        }        UpdateCachedExchangeRates(result =>
        {
            if (result.Error != null)
            {
                callback(new CurrencyExchangeResult(result.Error, state));                return;
            }            try
            {
                ExchangeCurrency(amount, fromCurrency, toCurrency, callback, state);
            }
            catch (Exception ex)
            {
                callback(new CurrencyExchangeResult(ex, state));
            }
        }, state);
    }    private void ExchangeCurrency(double amount, ICurrency fromCurrency, ICurrency toCurrency, Action<ICurrencyExchangeResult> callback, object state)
    {
        var fromExchangeRate = fromCurrency.CachedExchangeRate;
        var toExchangeRate = toCurrency.CachedExchangeRate;
        var timestamp = DateTime.Now;        if (fromCurrency == BaseCurrency)
            fromExchangeRate = 1.0;
        else
        {
            if (timestamp > fromCurrency.CachedExchangeRateUpdatedOn)
                timestamp = fromCurrency.CachedExchangeRateUpdatedOn;
        }        if (toCurrency == BaseCurrency)
            toExchangeRate = 1.0;
        else
        {
            if (timestamp > toCurrency.CachedExchangeRateUpdatedOn)
                timestamp = toCurrency.CachedExchangeRateUpdatedOn;
        }        if (fromExchangeRate > 0 && toExchangeRate > 0)
        {
            var exchangedAmount = amount / fromExchangeRate * toExchangeRate;            callback(new CurrencyExchangeResult(toCurrency, exchangedAmount, timestamp, state));
        }
        else
            throw new Exception("Conversion not returned!");
    }    public void UpdateCachedExchangeRates(Action<CachedExchangeRatesUpdateResult> callback, object state)
    {
        var request = HttpWebRequest.Create(MsnMoneyUrl);        request.BeginGetResponse(ar =>
        {
            try
            {
                var response = (HttpWebResponse)request.EndGetResponse(ar);                if (response.StatusCode == HttpStatusCode.OK)
                {
                    string responseContent;                    using (var streamReader = new StreamReader(response.GetResponseStream()))
                    {
                        responseContent = streamReader.ReadToEnd();
                    }                    foreach (var match in _resultRegex.Matches(responseContent).Cast<Match>())
                    {
                        var currencyName = match.Groups["currency"].Value.Trim();                        var currency = Currencies.FirstOrDefault(x => string.Compare(x.Name, currencyName, StringComparison.InvariantCultureIgnoreCase) == 0);                        if (currency != null)
                        {
                            currency.CachedExchangeRate = double.Parse(match.Groups["value"].Value, CultureInfo.InvariantCulture);
                            currency.CachedExchangeRateUpdatedOn = DateTime.Now;
                        }
                    }                    callback(new CachedExchangeRatesUpdateResult(ar.AsyncState));
                }
                else
                {
                    throw new Exception(string.Format("Http Error: ({0}) {1}",
                        response.StatusCode,
                        response.StatusDescription));
                }
            }
            catch (Exception ex)
            {
                callback(new CachedExchangeRatesUpdateResult(ex, ar.AsyncState));
            }
        }, state);
    }
}

Here’s how it works: when the ExchangeCurrency method is called, we pass a parameter (useCachedExchangeRates) that instructs the method to use (or not!) the previously cached exchange rates.

Next, make the exchange operation and return the results. If the operation throws an exception, or if we didn’t allow for cached exchange rates usage, call the UpdateCachedExchangeRates to update the exchange rates and then run the exchange operation with the new data.

And that’s about it for the Model!

The ViewModel

We maintained the full ViewModel from the previous version, but added some new functionality to it. Here’s the coding (main changes are in yellow):

C#

public class MainViewModel : INotifyPropertyChanged
{
    //Full previous code    #region Properties    [IgnoreDataMember]
    public ICurrencyExchangeResult Result
    {
        get
        {
            return _result;
        }
        protected set
        {
            if (_result == value)
                return;            _result = value;            RaisePropertyChanged("Result");
            RaisePropertyChanged("ExchangedCurrency");
            RaisePropertyChanged("ExchangedAmount");
            RaisePropertyChanged("ExchangedTimeStamp");
        }
    }    [IgnoreDataMember]
    public string ExchangedTimeStamp
    {
        get
        {
            if (_result == null)
                return string.Empty;            return string.Format("Data freshness:\n{0} at {1}",
                _result.Timestamp.ToShortDateString(),
                _result.Timestamp.ToShortTimeString());
        }
    }    [DataMember]
    public CurrencyCachedExchangeRate[] CurrenciesCachedExchangeRates
    {
        get
        {
            return Currencies
                .Select(x => new CurrencyCachedExchangeRate()
                {
                    CurrencyIndex = Array.IndexOf(Currencies, x),
                    CachedExchangeRate = x.CachedExchangeRate,
                    CachedExchangeRateUpdatedOn = x.CachedExchangeRateUpdatedOn
                })
                .ToArray();
        }
        set
        {
            foreach (var currencyData in value)
            {
                if (currencyData.CurrencyIndex >= Currencies.Length)
                    continue;                var currency = Currencies[currencyData.CurrencyIndex];                currency.CachedExchangeRate = currencyData.CachedExchangeRate;
                currency.CachedExchangeRateUpdatedOn = currencyData.CachedExchangeRateUpdatedOn;
            }
        }
    }    #endregion    //Full previous code    public void ExchangeCurrency()
    {
        if (Busy)
            return;        BusyMessage = "Exchanging amount...";        _currencyExchangeService.ExchangeCurrency(_amount, _fromCurrency, _toCurrency, true, CurrencyExchanged, null);
    }    public void UpdateCachedExchangeRates()
    {
        if (Busy)
            return;        BusyMessage = "Updating cached exchange rates...";        _currencyExchangeService.UpdateCachedExchangeRates(ExchangeRatesUpdated, null);
    }    private void CurrencyExchanged(ICurrencyExchangeResult result)
    {
        InvokeOnUiThread(() =>
        {
            Result = result;            BusyMessage = null;            if (result.Error != null)
            {
                if (System.Diagnostics.Debugger.IsAttached)
                    System.Diagnostics.Debugger.Break();
                else
                    MessageBox.Show("An error has ocorred!", "Error", MessageBoxButton.OK);
            }
        });
    }    private void ExchangeRatesUpdated(ICachedExchangeRatesUpdateResult result)
    {
        InvokeOnUiThread(() =>
        {
            BusyMessage = null;            Save();            if (result.Error != null)
            {
                if (System.Diagnostics.Debugger.IsAttached)
                    System.Diagnostics.Debugger.Break();
                else
                    MessageBox.Show("An error has ocorred!", "Error", MessageBoxButton.OK);
            }
        });
    }    private void InvokeOnUiThread(Action action)
    {
        var dispatcher = System.Windows.Deployment.Current.Dispatcher;        if (dispatcher.CheckAccess())
            action();
        else
            dispatcher.BeginInvoke(action);
    }    #region Auxiliary Classes    public class CurrencyCachedExchangeRate
    {
        [DataMember]
        public int CurrencyIndex { get; set; }        [DataMember]
        public double CachedExchangeRate { get; set; }        [DataMember]
        public DateTime CachedExchangeRateUpdatedOn { get; set; }
    }    #endregion
}

The first thing you will notice here is a new ExchangedTimeStamp read-only property that feeds the interface with the date string to denote when the used currency data was obtained. The interface is notified that this property value has changed when the Result property value is also changed.

Further down there’s another new property, CurrenciesCachedExchangeRates, that stores the cached exchange rates. For this to work, we have an auxiliary class called CurrencyCachedExchangeRate that stores the currency index along with the exchange rate as well as the update timestamp.

The UpdateCachedExchangeRates method allows users to manually force an update over the cached exchange rates.

The CurrencyExchanged and ExchangeRatesUpdated callbacks use the InvokeOnUiThread method to make sure that their codes run properly on the UI thread.

The View

Two simple changes have been made in the MainPage.xaml (our main View): an area on the screen has been added to show the exchange operation result timestamp, and a menu option has been added to force a full exchange rate update.

To make the first change, add a simple TextArea on the bottom StackPanel and bind it to the ExchangedTimeStamp property of the ViewModel:

XAML

<StackPanel x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
    <TextBlock Margin="12,0,0,-5" Style="{StaticResource PhoneTextSubtleStyle}">Amount</TextBlock>
    <TextBox InputScope="TelephoneNumber" Text="{Binding Amount, Mode=TwoWay, ValidatesOnExceptions=True, NotifyOnValidationError=True}" />
    <TextBlock Margin="12,10,0,-5" Style="{StaticResource PhoneTextSubtleStyle}">From</TextBlock>
    <toolkit:ListPicker ItemsSource="{Binding Currencies}" SelectedItem="{Binding FromCurrency, Mode=TwoWay}" FullModeHeader="FROM CURRENCY" Style="{StaticResource CurrencyListPicker}" />
    <TextBlock Margin="12,10,0,-5" Style="{StaticResource PhoneTextSubtleStyle}">To</TextBlock>
    <toolkit:ListPicker ItemsSource="{Binding Currencies}" SelectedItem="{Binding ToCurrency, Mode=TwoWay}" FullModeHeader="TO CURRENCY" Style="{StaticResource CurrencyListPicker}" />
    <StackPanel>
        <TextBlock Style="{StaticResource PhoneTextGroupHeaderStyle}" Text="{Binding ExchangedCurrency}"></TextBlock>
        <TextBlock Margin="25, 0, 0, 0" Style="{StaticResource PhoneTextTitle1Style}" Text="{Binding ExchangedAmount}"></TextBlock>
        <TextBlock Style="{StaticResource PhoneTextSubtleStyle}" Text="{Binding ExchangedTimeStamp}" TextWrapping="Wrap" TextAlignment="Right"></TextBlock>
    </StackPanel>
</StackPanel>

As for the “update exchange rates” menu option, add a new ApplicationBarMenuItem to the MenuItems collection, set the appropriate text, and add a handler for the click event:

XAML

<phone:PhoneApplicationPage.ApplicationBar>
    <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
        <shell:ApplicationBarIconButton IconUri="/Images/appbar.money.usd.png" Text="Exchange" Click="ExchangeIconButton_Click" />
        <shell:ApplicationBar.MenuItems>
            <shell:ApplicationBarMenuItem Text="update exchange rates" Click="UpdateExchangeRatesMenuItem_Click" />
            <shell:ApplicationBarMenuItem Text="about" Click="AboutMenuItem_Click" />
        </shell:ApplicationBar.MenuItems>
    </shell:ApplicationBar>
</phone:PhoneApplicationPage.ApplicationBar>

Now, all that is missing is implementing the UpdateExchangeRatesMenuItem_To do so, click the event handler in the MainPage.xaml.cs:

C#

private void UpdateExchangeRatesMenuItem_Click(object sender, EventArgs e)
{
    var viewModel = DataContext as MainViewModel;    if (viewModel == null)
        return;    Dispatcher.BeginInvoke(() =>
    {
        viewModel.UpdateCachedExchangeRates();
    });
}

Conclusion

The bottom line is that your application is as good as the data source you use. By utilizing a new (better) data source, some really simple changes to the code, we now have the Currency Converter—faster than ever!

And just in time: the coffee is ready!

About The Author

Pedro Lamas is a Portuguese .Net Senior Developer on Microsoft’s Partner DevScope, where he works with all the cool stuff that Microsoft .Net has to offer its developers!

He’s also one of the administrators of PocketPT.net, the largest Windows Phone Portuguese community, where his contribution is mostly visible on support for Windows Phone developers, and as a speaker for Windows Phone Development in Microsoft Portugal Events.

You can read his blog or contact him via twitter!

Using an message bus to process navigation messages, view models can publish messages that are then handled by a separate navigation service, successfully decoupling your view model from the Windows Phone navigation service. 

Get the finished source code here

Ever wonder what THAT means?! MVVM is a popular design pattern for coding the presentation layer in both Silverlight & Windows Presentation Foundation (WPF). It seems to be the rage that all the cool kids are doing these days, which means YOU should probably pay attention to it!  Get your development skills ready for MVVM (Model View View Model Design Pattern) and build some exciting applications for WPF, Silverlight or Windows Phone.

On March 21st, 2011 in New York City, Microsoft hosted a DevReady MVVM event along with DevExpress. This was a free full day training event.  We recorded the event, and now it is here on Channel 9 for your learning pleasure!

Pop on some headphones and listen & learn at your own pace!

The sessions were delivered by Microsoft MVP Miguel Castro, Microsoft Developer Evangelist Dani Diaz, and DevExpress Tech Evangelist Seth Juarez.

There are six sessions in total:

Demystifying XAML: Achieving Your Moment Of Clarity

Still find XAML intimidating? Well, throw in MVVM and certain design practices and it can get worse. But the truth is that it isn't as complicated as it appears to be. In this short session, I'll give you the basics of how XAML works. I'll cover its syntax, control usage, the visual tree, and the scariest animal of all, binding. I'll give you your moment of clarity, I promise.

Programming with MVVM - Part 1

WPF overwhelmed us with the most powerful data binding ever released in a development platform. It seemed there was so much to learn in order to use it, but it really isn't that complicated. However, to use it to its full potential, you really do need to introduce the Model-View-ViewModel pattern. The ideas and goal around this pattern seem to vary from person to person, but the one thing that they all share is that it provides a point of binding for XAML pages. In this session, I'll show you what MVVM is and how to use it and what to put in it, in order to get maximum potential out of XAML binding.

Programming with MVVM - Part 2

Now that you’ve sat through my MVVM session (what? you didn’t?), I want to take it to the next level by continuing your studies into this awesome and necessary pattern. In this session, I’ll cover more advanced topics you use when programming using Model-View-ViewModel. These include Design-Time Data, ViewModel-First, Validation, and the ever-so-popular MVVM Frameworks. There I’ll actually show and give you a small MVVM framework with which to launch your development. Though I will do a brief review on the fundamentals and goals of MVVM and its usage, this session does expect a little bit of knowledge on the pattern from you.

How Using MVVM Saved My Butt and How Laziness Came Back To Bite Me

Get a preview of upcoming Visual Studio features that will allow you to share code between Microsoft .NET platforms. You’ll learn how to structure applications to maximize the amount of shared code, how to write an app that’s used across Silverlight Desktop and Windows Phone, and how to build business logic and helper functions that work across all 3 Screens plus the cloud.

Leveraging MVVM Inside PRISM

Understanding an architecture pattern like MVVM is great but many companies invest in third-party control suites to make their application development less painful. In this session, you'll learn how to leverage some great controls from DevExpress in conjunction with MVVM to build applications in both WPF and Silverlight.

Ever wonder what THAT means?! MVVM is a popular design pattern for coding the presentation layer in both Silverlight & Windows Presentation Foundation (WPF). It seems to be the rage that all the cool kids are doing these days, which means YOU should probably pay attention to it!  Get your development skills ready for MVVM (Model View View Model Design Pattern) and build some exciting applications for WPF, Silverlight or Windows Phone.

On March 21st, 2011 in New York City, Microsoft hosted a DevReady MVVM event along with DevExpress. This was a free full day training event.  We recorded the event, and now it is here on Channel 9 for your learning pleasure!

Pop on some headphones and listen & learn at your own pace!

The sessions were delivered by Microsoft MVP Miguel Castro, Microsoft Developer Evangelist Dani Diaz, and DevExpress Tech Evangelist Seth Juarez.

There are six sessions in total:

Demystifying XAML: Achieving Your Moment Of Clarity

Still find XAML intimidating? Well, throw in MVVM and certain design practices and it can get worse. But the truth is that it isn't as complicated as it appears to be. In this short session, I'll give you the basics of how XAML works. I'll cover its syntax, control usage, the visual tree, and the scariest animal of all, binding. I'll give you your moment of clarity, I promise.

Programming with MVVM - Part 1

WPF overwhelmed us with the most powerful data binding ever released in a development platform. It seemed there was so much to learn in order to use it, but it really isn't that complicated. However, to use it to its full potential, you really do need to introduce the Model-View-ViewModel pattern. The ideas and goal around this pattern seem to vary from person to person, but the one thing that they all share is that it provides a point of binding for XAML pages. In this session, I'll show you what MVVM is and how to use it and what to put in it, in order to get maximum potential out of XAML binding.

Programming with MVVM - Part 2

Now that you’ve sat through my MVVM session (what? you didn’t?), I want to take it to the next level by continuing your studies into this awesome and necessary pattern. In this session, I’ll cover more advanced topics you use when programming using Model-View-ViewModel. These include Design-Time Data, ViewModel-First, Validation, and the ever-so-popular MVVM Frameworks. There I’ll actually show and give you a small MVVM framework with which to launch your development. Though I will do a brief review on the fundamentals and goals of MVVM and its usage, this session does expect a little bit of knowledge on the pattern from you.

How Using MVVM Saved My Butt and How Laziness Came Back To Bite Me

Get a preview of upcoming Visual Studio features that will allow you to share code between Microsoft .NET platforms. You’ll learn how to structure applications to maximize the amount of shared code, how to write an app that’s used across Silverlight Desktop and Windows Phone, and how to build business logic and helper functions that work across all 3 Screens plus the cloud.

Leveraging MVVM Inside PRISM

Understanding an architecture pattern like MVVM is great but many companies invest in third-party control suites to make their application development less painful. In this session, you'll learn how to leverage some great controls from DevExpress in conjunction with MVVM to build applications in both WPF and Silverlight.

Ever wonder what THAT means?! MVVM is a popular design pattern for coding the presentation layer in both Silverlight & Windows Presentation Foundation (WPF). It seems to be the rage that all the cool kids are doing these days, which means YOU should probably pay attention to it!  Get your development skills ready for MVVM (Model View View Model Design Pattern) and build some exciting applications for WPF, Silverlight or Windows Phone.

On March 21st, 2011 in New York City, Microsoft hosted a DevReady MVVM event along with DevExpress. This was a free full day training event.  We recorded the event, and now it is here on Channel 9 for your learning pleasure!

Pop on some headphones and listen & learn at your own pace!

The sessions were delivered by Microsoft MVP Miguel Castro, Microsoft Developer Evangelist Dani Diaz, and DevExpress Tech Evangelist Seth Juarez.

There are six sessions in total:

Demystifying XAML: Achieving Your Moment Of Clarity

Still find XAML intimidating? Well, throw in MVVM and certain design practices and it can get worse. But the truth is that it isn't as complicated as it appears to be. In this short session, I'll give you the basics of how XAML works. I'll cover its syntax, control usage, the visual tree, and the scariest animal of all, binding. I'll give you your moment of clarity, I promise.

Programming with MVVM - Part 1

WPF overwhelmed us with the most powerful data binding ever released in a development platform. It seemed there was so much to learn in order to use it, but it really isn't that complicated. However, to use it to its full potential, you really do need to introduce the Model-View-ViewModel pattern. The ideas and goal around this pattern seem to vary from person to person, but the one thing that they all share is that it provides a point of binding for XAML pages. In this session, I'll show you what MVVM is and how to use it and what to put in it, in order to get maximum potential out of XAML binding.

Programming with MVVM - Part 2

Now that you’ve sat through my MVVM session (what? you didn’t?), I want to take it to the next level by continuing your studies into this awesome and necessary pattern. In this session, I’ll cover more advanced topics you use when programming using Model-View-ViewModel. These include Design-Time Data, ViewModel-First, Validation, and the ever-so-popular MVVM Frameworks. There I’ll actually show and give you a small MVVM framework with which to launch your development. Though I will do a brief review on the fundamentals and goals of MVVM and its usage, this session does expect a little bit of knowledge on the pattern from you.

How Using MVVM Saved My Butt and How Laziness Came Back To Bite Me

Get a preview of upcoming Visual Studio features that will allow you to share code between Microsoft .NET platforms. You’ll learn how to structure applications to maximize the amount of shared code, how to write an app that’s used across Silverlight Desktop and Windows Phone, and how to build business logic and helper functions that work across all 3 Screens plus the cloud.

Leveraging MVVM Inside PRISM

Understanding an architecture pattern like MVVM is great but many companies invest in third-party control suites to make their application development less painful. In this session, you'll learn how to leverage some great controls from DevExpress in conjunction with MVVM to build applications in both WPF and Silverlight.

Ever wonder what THAT means?! MVVM is a popular design pattern for coding the presentation layer in both Silverlight & Windows Presentation Foundation (WPF). It seems to be the rage that all the cool kids are doing these days, which means YOU should probably pay attention to it!  Get your development skills ready for MVVM (Model View View Model Design Pattern) and build some exciting applications for WPF, Silverlight or Windows Phone.

On March 21st, 2011 in New York City, Microsoft hosted a DevReady MVVM event along with DevExpress. This was a free full day training event.  We recorded the event, and now it is here on Channel 9 for your learning pleasure!

Pop on some headphones and listen & learn at your own pace!

The sessions were delivered by Microsoft MVP Miguel Castro, Microsoft Developer Evangelist Dani Diaz, and DevExpress Tech Evangelist Seth Juarez.

There are six sessions in total:

Demystifying XAML: Achieving Your Moment Of Clarity

Still find XAML intimidating? Well, throw in MVVM and certain design practices and it can get worse. But the truth is that it isn't as complicated as it appears to be. In this short session, I'll give you the basics of how XAML works. I'll cover its syntax, control usage, the visual tree, and the scariest animal of all, binding. I'll give you your moment of clarity, I promise.

Programming with MVVM - Part 1

WPF overwhelmed us with the most powerful data binding ever released in a development platform. It seemed there was so much to learn in order to use it, but it really isn't that complicated. However, to use it to its full potential, you really do need to introduce the Model-View-ViewModel pattern. The ideas and goal around this pattern seem to vary from person to person, but the one thing that they all share is that it provides a point of binding for XAML pages. In this session, I'll show you what MVVM is and how to use it and what to put in it, in order to get maximum potential out of XAML binding.

Programming with MVVM - Part 2

Now that you’ve sat through my MVVM session (what? you didn’t?), I want to take it to the next level by continuing your studies into this awesome and necessary pattern. In this session, I’ll cover more advanced topics you use when programming using Model-View-ViewModel. These include Design-Time Data, ViewModel-First, Validation, and the ever-so-popular MVVM Frameworks. There I’ll actually show and give you a small MVVM framework with which to launch your development. Though I will do a brief review on the fundamentals and goals of MVVM and its usage, this session does expect a little bit of knowledge on the pattern from you.

How Using MVVM Saved My Butt and How Laziness Came Back To Bite Me

Get a preview of upcoming Visual Studio features that will allow you to share code between Microsoft .NET platforms. You’ll learn how to structure applications to maximize the amount of shared code, how to write an app that’s used across Silverlight Desktop and Windows Phone, and how to build business logic and helper functions that work across all 3 Screens plus the cloud.

Leveraging MVVM Inside PRISM

Understanding an architecture pattern like MVVM is great but many companies invest in third-party control suites to make their application development less painful. In this session, you'll learn how to leverage some great controls from DevExpress in conjunction with MVVM to build applications in both WPF and Silverlight.

Ever wonder what THAT means?! MVVM is a popular design pattern for coding the presentation layer in both Silverlight & Windows Presentation Foundation (WPF). It seems to be the rage that all the cool kids are doing these days, which means YOU should probably pay attention to it!  Get your development skills ready for MVVM (Model View View Model Design Pattern) and build some exciting applications for WPF, Silverlight or Windows Phone.

On March 21st, 2011 in New York City, Microsoft hosted a DevReady MVVM event along with DevExpress. This was a free full day training event.  We recorded the event, and now it is here on Channel 9 for your learning pleasure!

Pop on some headphones and listen & learn at your own pace! 

The sessions were delivered by Microsoft MVP Miguel Castro, Microsoft Developer Evangelist Dani Diaz, and DevExpress Tech Evangelist Seth Juarez.

There are six sessions in total:

Demystifying XAML: Achieving Your Moment Of Clarity

Still find XAML intimidating? Well, throw in MVVM and certain design practices and it can get worse. But the truth is that it isn't as complicated as it appears to be. In this short session, I'll give you the basics of how XAML works. I'll cover its syntax, control usage, the visual tree, and the scariest animal of all, binding. I'll give you your moment of clarity, I promise.

Programming with MVVM - Part 1

WPF overwhelmed us with the most powerful data binding ever released in a development platform. It seemed there was so much to learn in order to use it, but it really isn't that complicated. However, to use it to its full potential, you really do need to introduce the Model-View-ViewModel pattern. The ideas and goal around this pattern seem to vary from person to person, but the one thing that they all share is that it provides a point of binding for XAML pages. In this session, I'll show you what MVVM is and how to use it and what to put in it, in order to get maximum potential out of XAML binding.

Programming with MVVM - Part 2

Now that you’ve sat through my MVVM session (what? you didn’t?), I want to take it to the next level by continuing your studies into this awesome and necessary pattern. In this session, I’ll cover more advanced topics you use when programming using Model-View-ViewModel. These include Design-Time Data, ViewModel-First, Validation, and the ever-so-popular MVVM Frameworks. There I’ll actually show and give you a small MVVM framework with which to launch your development. Though I will do a brief review on the fundamentals and goals of MVVM and its usage, this session does expect a little bit of knowledge on the pattern from you.

How Using MVVM Saved My Butt and How Laziness Came Back To Bite Me

Get a preview of upcoming Visual Studio features that will allow you to share code between Microsoft .NET platforms. You’ll learn how to structure applications to maximize the amount of shared code, how to write an app that’s used across Silverlight Desktop and Windows Phone, and how to build business logic and helper functions that work across all 3 Screens plus the cloud.

Leveraging MVVM Inside PRISM

Understanding an architecture pattern like MVVM is great but many companies invest in third-party control suites to make their application development less painful. In this session, you'll learn how to leverage some great controls from DevExpress in conjunction with MVVM to build applications in both WPF and Silverlight.