Download the source code for this lesson at http://absolutebeginner.codeplex.com/

In this final lesson, we’ll build the MapNotes app.  It is a GPS-aware note app that records not just the note you take but also where you took that note and displays it on a map.  Then you’ll be able to read that note and see a map of where you took the note.  You can then delete the note or continue on from there. 



In addition to working with Phone storage, the Map control and Geolocation, I’ll also add some nice little touches like truncating long note titles replacing the remainder of the title with an ellipsis and adding a MessageDialog to ask the user to confirm an operation:



To begin, I’ll open the New Project dialog, and (1) create a new Blank App project template (2) called MapNotes, then (3) click the OK button:



First, I’ll add a DataModel folder:



Then will add a new file to that folder.  In the Add New Item dialog, I’ll add (1) a class (2) called DataSource.cs, then (3) I’ll click the Add button:



In the new DataSource.cs file, I’ll create a model called MapNote, adding a number of properties that represent the note, where the note was created, etc.:



The DataSource class will be our primary focus.  You’ll notice how similar it is to other DataSource classes we created in the past.  In fact, as I was developing this, I merely copied code and renamed the data class to MapNote (since that is the type of data we’re working with in this app).  While I don’t advocate copy and paste always, as a means of templating some common functionality, it can be useful.

I’ll start by creating a private ObservableCollection<MapNote> that the remainder of the methods in the DataSource class will manage… adding new items, deleting items, saving and retrieving from Phone storage, etc.:



We’ll begin by providing access to the _mapNotes through the GetMapNotes() method.  Again, note the templated nature of this method from what we’ve used earlier.  GetMapNotes() called a helper method called ensureDataLoaded().  The ensureDataLoaded() method checks the count of items in the collection, and if it is empty will call the getMapNoteDataAsync() which has the responsibility of hydrating the object graph of MapNotes from Phone storage into memory.



We’ve talked about methods similar to getMapNoteDataAsync() in the past.  In a nut shell, we’ll use a DataContractJsonSerializer to open a file from the Phone’s LocalFolder storage and de-serialize the file’s contents into an in-memory collection of MapNotes.



We’ll need to create a constant with the fileName since we’ll be using it to both save and retrieve data on disk.



We want to allow the user to create new MapNote objects and save them to the Phone’s storage.  The AddMapNote() method will add a new MapNote to the private  ObservableCollection<MapNote>, then persist that to storage by calling saveMapNoteDataAsync().  The saveMapNoteDataAsync() is the corollary to getMapNoteDataAsync() … it, too, uses a DataContractJsonSerializer to save a file to the Phone’s Local Folder.



Finally, we want to allow a user to delete a note.  We’ll call Remove() on the collection of MapNotes, then again, call saveMapNotDataAsync() to make sure that change is saved to the Phone’s storage:



We want to make our DataSource class available throughout all pages in our app, so I decided to create an instance of DataSource as a public static field on the App claass.  In the App’s constructor, I create an instance of DataSource and set it to the DataModel field:



Now, we’re ready to create a page that will allow a user to add a new note or look at an existing note.  While looking at an existing note, we’ll allow the user to delete the note as well.  We’ll use a single page for both purposes, changing out the names of the buttons and their operation depending on the current state of the current MapNote.

I’ll add a new item, a new Blank Page called AddMapNote.xaml:



Before I begin to lay out the controls on the new AddMapNote.xaml page, I need a way to navigate from the MainPage.xaml to the AddMapNote.xaml page.  There will be two ways to do this … the first will be to click a button in the MainPage.xaml’s CommandBar to add a new note.  The second way will be to tap an existing note’s title / entry in the list of notes on that page to view (and potentially delete) that note.

First, I want to add a CommandBar and CommandBarButton.  I’ll put my mouse cursor in the Page definition, and in the Properties window I’ll click the New button next to BottomAppBar:



That action will create a Page.BottomAppBar and a CommandBar.  Now, I’ll put my mouse cursor in the CommandBar and then select the ellipsis button next to PrimaryCommandButton:

<img title="clip_image032" src="https://files.channel9.msdn.com/wlwimages/19940ab4423a448c83e6a3180155d1c1/clip_image032_thumb%5B1%5D-7.jpg" alt="clip_image032" width="