Phone_81_Development_for_Absolute_Beginners

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:

Windows Phone 8.1 Development for Absolute Beginners – Page 330

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:

Windows Phone 8.1 Development for Absolute Beginners – Page 331

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.:

Windows Phone 8.1 Development for Absolute Beginners – Page 332

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.

Windows Phone 8.1 Development for Absolute Beginners – Page 333

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.

Windows Phone 8.1 Development for Absolute Beginners – Page 334

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:

Windows Phone 8.1 Development for Absolute Beginners – Page 335

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:

Windows Phone 8.1 Development for Absolute Beginners – Page 336

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:

And the PrimaryCommandButton editor dialog appears.

Windows Phone 8.1 Development for Absolute Beginners – Page 337

I’ll (1) click the Add button to add a new AppBarButton, (2) select the newly added button in the Items list box on the left, then (3) make sure to change the Icon to type SymbolIcon, and (4) select the Map symbol from the dropdown list:

(1) I’ll scroll down to the Label property and set that to “Add Note”, then (2) click the OK

button:

Windows Phone 8.1 Development for Absolute Beginners – Page 338

Finally, in the XAML editor, I want to add a click event handler for the new button, so I’ll add a Click=”AppBarButton_Click” event handler method.

Windows Phone 8.1 Development for Absolute Beginners – Page 339