Phone_81_Development_for_Absolute_Beginners

I’ll use the F12 technique to create the method stub in the MainPage.xaml.cs file. Here, I’ll want to set the DataContext for the page to the collection of MapNotes in the OnNavigatedTo() method (like we’ve demonstrated before). I’ll also Frame.Navigate() to

AddMapNote.xaml when the user clicks the AppBarButton:

Back on the MainPage.xaml, I’ll lay out the main area of the page by (1) surrounding the Grid with a ScrollViewer so that we can view a long list of items, (2) I’ll add two RowDefinition

Windows Phone 8.1 Development for Absolute Beginners – Page 340

objects to create an area for the app title and for the list of items, (3) I’ll add a TextBlock with the title of the app into that first RowDefinition with the style set to the built-in HeaderTextBlockStyle:

I’ll add a ListView control into the second RowDefinition, binding its ItemsSource to the Page’s DataContext, and setting properties to ensure that a given list item can be tapped, not selected. This involves setting the SelectionMode to none, the IsItemClickEnabled to true, and creating an event handler for the ItemClick event. Furthermore, I’ll add the ItemTemplate and

DataTemplate so that we can begin fleshing those out in the next step:

Each list view item will be comprised of two TextBlocks … one bound to the Title of the note, the other to the Note property of the MapNote:

Windows Phone 8.1 Development for Absolute Beginners – Page 341

Now, we’ll move on to the AddMapNote.xaml page. Here, I’ll add four row definitions and set the margins on the Grid:

<Grid Margin="10,0,10,0"> <Grid.RowDefinitions>

<RowDefinition Height="40" /> <RowDefinition Height="Auto" /> <RowDefinition Height="*" /> <RowDefinition Height="Auto" />

</Grid.RowDefinitions>

</Grid>

I’ll leave the top row empty in order to give the app some vertical spacing. I suppose I could add my app’s title or other branding elements there as well. In the second row, I’ll add a

StackPanel containing the Title and Note TextBoxes:

<StackPanel Grid.Row="1"> <TextBlock Text="Title:" />

<TextBox x:Name="titleTextBox" TextWrapping="Wrap" /> <TextBlock Text="Note:"/>

<TextBox x:Name="noteTextBox" TextWrapping="Wrap" Height="125" /> </StackPanel>

Next, I’ll drag-and-drop a Map Control to the desginer which adds the MapControl and its namespace to the Page. I’ll clean out the extraneous properties and set it to the third row:

Windows Phone 8.1 Development for Absolute Beginners – Page 342

<Maps:MapControl x:Name="MyMap" Grid.Row="2" />

In the fourth row, I’ll add two buttons in a StackPanel along with event handler methods for their Click events:

<StackPanel Orientation="Horizontal" Grid.Row="3">

<Button x:Name="addButton" Content="Add" Click="addButton_Click" Margin="0,0,10,0" />

<Button x:Name="cancelButton" Content="Cancel" Click="cancelButton_Click" /> </StackPanel>

When I’m finished, the preview looks like this:

Windows Phone 8.1 Development for Absolute Beginners – Page 343

While the name of the page is AddMapNote.xaml, I intend to use it for two scenarios: adding a MapNote and viewing / deleting a MapNote. To accomplish this I’ll need to often determine the current scenario I’m in … am I adding or viewing / deleting?

We see how that affects the OnNavigatedTo() event handler … if I’m adding a new MapNote, then I’ll want to determine the current location of the Phone. However, if I’m viewing / deleting a MapNote, I’ll want to retrieve the location from the existing MapNote and set the Map Control to display it on the Page.

I’ll start with the “Add” scenario. I’ll use the Geolocator object to determine the current position:

Windows Phone 8.1 Development for Absolute Beginners – Page 344

I still have a lot of work to do here, such as set the Map Control to the current Geopoint, however this is a good start.

The note reminds me I need to add a Capability for Location. I’ll open the

Package.appxmanifest file, go to the Capabilities page, and click the check box next to Location:

Windows Phone 8.1 Development for Absolute Beginners – Page 345

Back in the AddMapNote.xaml, I’ll handle the “Add” scenario for the addButton_Click() event handler method. I’ll need to resolve some namespaces, and I’ll need to fix a problem with the names of one of my properties which I misspelled (will do that in the next step). Here, we’ll create a new instance of the MapNote class, set its properties including the Latitude and Longitude, then call the App.DataModel.AddMapNote() passing in the new instance of

MapNote. Finally, I’ll navigate back to the MainPage.xaml:

As I said a moment ago, I realize I forgot the letter ‘d’ on the property named Created. I’ll fix that back in the MapNote class:

Back in the AppNoteNote.xaml.cs, I want to think about the OnNavigatedTo() event handler again. This time, I want to think about how I’ll handle both the “add” and “view / delete” scenarios. I’ll use the NavigationEventArgs input parameter that contains the input

Windows Phone 8.1 Development for Absolute Beginners – Page 346

parameter from the previous page. If the parameter is empty (null), that will signal the “add” scenario. Otherwise, it will signal the “view / delete” scenario. The objective of either case is to determine the Geopoint so that I can set the map to it:

I’ll copy and paste the code I previously had added to OnNavigatedTo() into the “add”

case:

Windows Phone 8.1 Development for Absolute Beginners – Page 347

Then in the “view / delete” case I’ll cast the NavigationEventArg’s Parameter property to MapNote and populate the textboxes. I’ll also create a Geopoint based on the latitude and longitude of the MapNote. Finally, outside of the if statement, I attempt to call MyMap.TrySetViewAsync() passing in the Geopoint that was created in either case, as well as a default zoom level:

Windows Phone 8.1 Development for Absolute Beginners – Page 348

I realize that when I click the Add button, I’ll need some way to determine whether we’re currently in the “add” or “view / edit” scenario, so I create a bool flag called isViewing:

In the “add” scenario, I set it to false:

In the “view / delete” scenario, I set it to true. Now I can tell what scenario I’m handling anywhere in the AddMapNote.xaml.cs:

Windows Phone 8.1 Development for Absolute Beginners – Page 349