Source Code: https://aka.ms/absbeginnerdevwp8
PDF Version: https://aka.ms/absbeginnerdevwp8pdf

Update to Video:  Bob made a mistake and left out two key things in SearchResults_Loaded event.  Note the async and await which aren’t in the video.  These are in the text below, source code samples, and the PDF.

private async void SearchResults_Loaded(object sender, RoutedEventArgs e) {
        var images = await FlickrImage.GetFlickrImages(flickrApiKey, _latitude, _longitude);
        DataContext = images;
}

Now we have a map and a single image returned from Flickr, we have the basic building blocks for our app. But our eventual aim is to show a list of images instead of just one. So, in this lesson we'll do that by adding a SearchResults page and displaying all the images returned by our search.

Our game plan in this lesson:

1. We'll add the AroundMe assets for the tile image and so on
2. We'll add an Application Bar and Search button that will navigate to a new page that will ultimately display Flickr images, sending along the latitude and longitude as parameters
3. We'll add a new page, the SearchResults.xaml page, we'll add a text block to the page, and we'll add code that retrieves the parameters sent from the MainPage to the new SearchResults page and display the latitude and longitude values, just to make sure we are correctly passing that data
4. We'll clean up and refactor the code we've written into class files, and clean up the code that calls our new class file methods so that it more closely resembles our original diagrams / low-tech mock ups of the user interface and user interaction

1. Add AroundMe assets to project

In the downloads available for this series, there's a subfolder called AroundMe_Assets. We'll be copying (dragging and dropping) the files and subfolders in that directory to Visual Studio to make them part of our project's Assets.

First, delete everything inside of the Assets folder ...

... then in Windows Explorer, drag and drop the files in the AroundMe_Assets folder to Visual Studio's Solution Explorer beneath the Assets folder. When you're finished it should look like this:

The number of files may look the same, but their contents are different ... i.e., the ApplicationIcon.png is for the AroundMe application. There's also an icon called feature.search.png ... it will be used in this lesson as the icon for the Application Bar's Search button.

2. Make sure assets appear in the WMAppManifest.xml correctly

The assets (images) we copied into our project's Assets folder should match the names of the default assets added by the project template. Just to make sure, let's take a look at the WMAppManifest.xml and see if the new image assets appear as expected.

Find the WMAppManifest.xml file in the Properties folder of the project. Double-click to open:

In the WMAppManifest.xml designer, the App Icon should have the appearance of the skyline of my home town (and Clint's home town), Chicago.

Furthermore, we'll want to make sure that Tile Template is set to TemplateCycle, and that the Tile Images (Small, Cycle 1) look like the App Icon:

3. Add an Application Bar and Search Button

We've added an Application Bar in a previous lesson, so much of this should look familiar:

1. I'll create a new instance of the ApplicationBar class
2. I'll create a new instance of the ApplicationBarIconButton class ... in the constructor, I'll reference the location of the Search icon we added a moment ago.
3. I'll add the text that will be displayed under the button, and attach the SearchClick event handler method to the Click event of the button. Obviously, that method doesn't exist just yet. We'll come back to this in a moment and implement it.
4. I'll add the new Search button to the Application Bar.

Now, let's go back and implement the SearchClick method (from #3, above). There's a little blue bar under the 'S' in 'SearchClick'. Hover your mouse cursor until a tiny menu appears. It will drop down to another menu option to generate a method stub for the SearchClick method:

If you click that menu option, it will generate a method stub as promised. We'll implement that method in the next step...

4. Navigate to a new page, pass data to the page

I add the following code to the event handler method:

1. In this line, we create a string that represents the path to a page called SearchResults.xaml. We've not yet added that page to our application -- we'll do that in a moment. If you look at the string we're building, we're passing additional information in the form of a query string. 
   
   We've already talked about query strings and passing data in a previous lesson. The only wrinkle is that this time we're sending two bits of data from the MainPage.xaml to a new page we've yet to create called SearchResults.xaml. You use the ampersand character & to separate name / value pairs in a query string. Additionally, we're using String.Format() to substitute the actual latitude and longitude values into the Uri string.
2. In line 140, we're using a class called the NavigationManager to Navigate() from the MainPage.xaml to a new page as defined in the new Uri object. The NavigationService not only knows how to navigate from one page to another, but is also responsible for keeping a history of previous navigations so that, when you use the back button on your Windows Phone 8, it can take you back to both the page AND the state of that page as you left it previously.

Now that we've created the Application Bar's Search button and have implemented the Click event handler for that button, we'll want to display the Application Bar.

5. Show the Application Bar

We'll merely add a call to the BuildLocalizedApplicationBar() method we created a moment ago.

Let's test the app:

... and now at the bottom of our app, we can see the Search icon. Clicking the ellipsis in the upper-right hand corner of the App Bar, we can see it expand to show the Text property of the button as well.

If we were to click it, the NavigationService.Navigate() method would probably throw an exception because we do not have a page called SearchResults,xaml in our project. Let's add it.

6. Add a new item to the project, call it SearchResults.xaml

Right-click project name in Solution Explorer, select Add | New Item ... In the Add New Item dialog:

1. Make sure you're in the Visual C# templates
2. Select Windows Phone Portrait Page
3. Make sure you call this: SearchResults.xaml
4. Click Add

Next, we'll want to quickly test to make sure the code we wrote correctly navigates to our new page AND sends along those query string values.

7. Validate that the values are being passed correctly between the MainPage and SearchResults page

In the content panel of the SearchResults.xaml page, I've removed everything, then added a TextBlock control and named it LocationTextBlock.

Now, I'll write C# code to retrieve the values from the query string and display them in the LocationTextBlock ... just to make I can grab those values that were passed in the query string.

1. I create two private fields (variables) to hold the values I'll retrieve from the query string.
2. The OnNavigatedTo() event will fire after the page class has been instantiated, but before the Page_Loaded event fires. This is a perfect opportunity to process the query string. I use the NavigationContext class' Query string property