Part 24: Getting Started with the AroundMe Project

Play Part 24: Getting Started with the AroundMe Project
Sign in to queue


Source Code:

Now that we've finished our first app, let's move on to building a second app. This time let's build an app that is both location-aware and social in nature... so, it will use the Phone's GPS to determine where the current user is standing, and then use the latitude and longitude to search for photos that others have taken within a few meters of where the user is standing.

How will we do that? We'll call on Flickr, the social photo sharing website, to provide the data. Whenever you take a photo with a camera that supports Geotagging, extra meta data is added to the photo that includes the latitude and longitude (amongst other) data. Then, when you upload the photos to Flickr, it will store that extra data and make it available so that others can search based on a specific latitude and longitude.

Our app should not only allow me to search for photos "around me", but it should be able to let me pick my favorite Flickr photos as lock screen background images. That would be cool!

Now that we have some ideas of how it should work, let's spend a few moments mocking up how we want to app to behave. That will be the target that we build to throughout the remainder of this series.

Our game plan in this lesson:

  1. We'll start by brainstorming using a low-tech mockup to design the interactions and screens we want in our app.
  2. We'll create a new project and take some preliminary steps towards building our app by including a map control in our project ... Even though we haven't designed the app just yet, I anticipate that the map control will come into play at some point so we'll learn how to use it in this lesson.


1. Create a low-tech mockup for the AroundMe app.

Again, we should spend some time thinking about the functionality of the app, about the interaction between the user and the app, how the information should be displayed to the user and we'll do that through a "low-tech mockup" using the templates available from Microsoft:

Generic Episode Image


After some brainstorming, we come up with some good design ideas. The MainPage will show the user the map control that displays the user's current location. Below that, a Textbox where the user can add an optional search phrase to refine which photos are returned. And below that, an application bar with a search button.

When the user clicks the search button, we'll make a call to Flickr's web-callable API using the user's current locale and the search phrase. We'll get back a list of images that we'll display in a grid. The user can select photos and click a button in the application bar which will cache those photos on the phone and randomly use them as the lock screen image. This will require we use a background agent to run every 30 minutes or so.

Now that we have a basic idea of the interactions, functionality and screen elements we'll need, let's start building towards that design.


2. Create the AroundMe Solution and Project

You should be familiar with this process already, however for the sake of completeness, begin the process by going to the File menu, New | Project ... submenu. That will open the New Project dialog:

Generic Episode Image


  1. Make sure you're in the Visual C# | Windows Phone project templates.
  2. Select the "Windows Phone App" project template.
  3. Change the name to AroundMe.
  4. The Solution name should automatically change as well ... just make sure it has already been changed to AroundMe.
  5. Click OK.

The MainPage.xaml should open in the main area of Visual Studio.


3. Add a Map Control from the Toolbox to the visual XAML Editor

Up to now, we've been working with XAML directly. Now that you're comfortable with typing in XAML, I feel comfortable to showing you a shortcut ... you can drag elements from the Toolbox into the visual XAML Editor:

Generic Episode Image

When you do that, there are a few side effects. See what happened to me:

Generic Episode Image


In my case, it created a left-margin of 368 and a top-margin of 101. That's not what I wanted, but I can easily edit that out in the XAML itself.

It's for this reason that I prefer to work directly with XAML ... especially if I remember the name of the control I want to use.

However, in this particular case, there's a huge upside to using the drag and drop technique. Look at the code that was added in line 8:


Generic Episode Image


By dragging and dropping the Maps control, an XAML Namespace was added to the XAML document. This is necessary because the Maps control lives in a different Namespace and Assembly from the other controls I had been using.

Nonetheless, I now have a Map control. I edit it to simply sport a Name attribute. I want this because I know I'll be working with it in C# in just a moment:


Generic Episode Image


If I were to try and run the application at this point (F5), I would experience an error at runtime:


Generic Episode Image


The problem is that the Map control requires the Mapping and Location capabilities of the phone and we've not told the Windows Phone operating system we want to use those capabilities in our app.

The mapping functionality of the Windows Phone 8 Operating System has changed dramatically from the previous version based on Bing maps. The new mapping features were built in conjunction with Nokia and are more integrated into the Phone's operating system than before in an effort to make the maps more performant. So this is why we need to request permission to use this capability of the phone ... it is now a core feature of the phone.

To learn more about the rationale for the changes to mapping in Windows Phone 8:

To remedy this, we'll make changes in the WPAppManifest.xml ... open the WMAppManifest.xml file:


Generic Episode Image


We'll need to add two Capabilities:


Generic Episode Image


In the WPAppManifest.xml visual designer ...

  1. Choose the Capabilities tab.
  2. Place a check next to ID_CAP_LOCATION.
  3. Place a check next to ID_CAP_MAP.

Save your changes and re-run the app (F5).


Generic Episode Image


The Map control appears, but it's at a very high level because no location is set. We'll do that next.

In the MainPage.xaml.cs:


Generic Episode Image


  1. We'll handle the Loaded event for the MainPage ... use the little technique I demonstrated earlier to create a method stub for MainPage_Loaded (hint: hover over the M in "MainPage_Loaded").
  2. We'll create a helper method calls UpdateMap() that will contain the code to set the coordinates and other information to initialize the Map control.
  3. Create the method stub for the UpdateMap() method.

Inside the UpdateMap() we'll add the following code:


Generic Episode Image


The SetView() method combines several property settings into one convenient call. We'll pass in a GeoCoordinate hardcoded to a specific place (in Chicago ... more on that in a moment) and a scaling factor of 17. You can experiment with these numbers. 19 is zoomed in really close and 5 is really far away.

By the way, I've suffixed each of the values with the letter "D" which is for Double ... this is just a way to ensure we're working with Double literals.

Now I'll test to make sure it works (F5).


Generic Episode Image

And it does!



To recap, the big take away from this lesson is how to use the new Map control in the Windows Phone 8. We'll become even more familiar with it as we go through these lessons, but at a minimum, we know that it requires us to set a Capability in the WMAppManifest.xml file. We also learned how to change the focus of the map and the zoom level. We learned about the GeoCoordinate class that represents a position on the globe based on its latitude and longitude. We still need to learn how to retrieve the current position of the Phone, and we'll do that soon, but this is a good start.



The Discussion

Add Your 2 Cents