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'l start by brainstorming using a low-tech mockup to design the interactions and screens we want in our app.
2. We'l 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'l 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:
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:
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 automatical y 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:
When you do that, there are a few side effects. See what happened to me:
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:
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:
If I were to try and run the application at this point (F5), I would experience an error at
runtime:
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:
We'll need to add two Capabilities:
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).
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:
1. We'l 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'l create a helper method calls UpdateMap() that wil 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:
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).
And it does!
Recap
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.
No comments:
Post a Comment