Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
The final step in completing our UnitsConverter app is going to be that we're adding an About page. This is going to help us understand how to add new pages, how to do basic navigation between one page and another, and also adding an About page is something that Microsoft says is a good practice, because it helps your users communicate feedback to you and helps them find other applications that you have in the Windows phone marketplace. And we will also update the icon and trim down the list of capabilities in the WMAppManifest.xml file.
So to begin we're going to come over here and add another page, doing something similar to what we did when we added a new class, we're going to right-click on Units Converter, come down to select Add. We're going to say New Item, and we're going to come up here and select Windows Phone Portrait Page--because it matches the same style for the rest of the UnitsConverter app--and we're going to call it About. When you add a page, you get both a XAML and a code behind file. What we're going to do here is we're actually just going to select all of this XAML and replace it, and let's take a quick look at what XAML is that we just added.
Everything up here at the top is all the standard things. We titled the ApplicationTitle UNITS CONVERTER just as we did with our main page. Our PageTitle is about and down here in the ContentPanel we first have a TextBlock where we're going to put some text about which is the version number of this app and a few other details. We set the TextAlignment of this to Center so that the text shows up nicely when we take a look at it. Then we added three buttons. Scroll down here. As you can see, all three buttons, and go back here and look at each button in turn.
So the first button says, Suggest a new feature, and it goes off to Suggestion_Click. The second button says, More from DreamTimeStudios, this is how you can learn more about the other apps we have in the store, and finally, we have a Learn how to build this application button that directs you to this class. So when you buy this app in the store, which will be free, you'll be able to actually direct yourself back to this course. So now let's go over here and open up the code behind, and once again we're going to select the entire thing and paste in our class, and let's take a look what's in the class.
We've got our standard set of usings here at the top. In our constructor we initialize the text property of our text block so that we can see the version number and copyright message, and then we have our three click handlers. What's useful to know about these three click handlers is that we're using two of the launchers that are built into the Windows Phone operating system. The first is the EmailComposeTask. What we're doing here is we're saying we're going to create a new instance of the EmailComposeTask, we can set the Subject, we can set the To line, and then we let the operating system display the pane which allows the user to type in his message.
We can't demonstrate the functionality of this on the Emulator, because there is no mail clients in the emulator, but when you run this on a device, it will actually open up your mail client, and it will allow you to send a mail. We look at the More_Click handler and the Learn_Click handler, and you can see we're going to use the WebBrowserTask, and this is going to allow us to launch the built-in Internet Explorer and direct it at a specific URI. In one case, it's our dreamtimestudioz web site and in the other case it's my author landing page here at lynda.com.
Now that we've built our About page, we need to go back to our main page and implement the menu item to be able to see our About page and the code behind that which actually navigates to the new page. So let's come back to MainPage.xaml, and we're going to open the CS file and come down here at the bottom and add the code. And if we look at this click handler, we can see it's using something called the NavigationService. Every page has a reference to the NavigationService which is how you open up one page from another.
In our case, we're telling it to go ahead and open up the About page, and this actually pushes the current page on the stack, and goes to the About page. When the user clicks the Back button as you will see in a minute, it will bring us back to the main page. So next thing we have to do is to open up our XAML and come down to the bottom, and in addition to our Temperature and Teaspoon/ Tablespoon menu items, we're going to add one more for the About page which goes off to the About_ Click handler and now when we run our application.
We'll first see the Settings class in action, because the last thing we did was convert tablespoons to teaspoons in order to make our popcorn, and when we pop up the application bar. We'll now see three menu items here in the application bar. Now one of the things you might find interesting here is that if you look in our XAML, the text for the top menu item has Temperature with a capital T, the second one has Teaspoons and Tablespoons with two capital Ts and the last one has About with a capital A. Microsoft in their Metro Design Guidelines enforces in this particular case that all these things should always be lowercase, because they want to make sure that the flavor of the design aspects of the Metro remains consistent throughout.
So let's select our About page, and there we go, you can see our About page, here's our centered text which we added programmatically, and here's our buttons. So let's click here, and go take a look at the course page on lynda.com. The first time you run Internet Explorer in the Emulator, it asks you whether you want to send your browsing history to Microsoft, and sometimes, it also fails to navigate on the first try. But once you've been through that the first time, then you have functionality, and that particular glitch doesn't happen on the devices.
But you might see it because that was your first time using the Internet Explorer on the Emulator. Then if we click the Back button to go back to our app, we click the Back button again, we navigate back to our UnitsConverter. And that's it We've now built a complete end to end app with the user experience, with controls on the screen, and click handlers that go along with those controls, in this particular case our GetFocus thing so that we can know which value we're going to convert. We've implemented a Settings class which we're going to be using in many of these applications we're building that allow you to have persistent settings using the Isolated Storage Settings API, and we've added an About page.
Ok so that's the code for our app, it's ready to go. To get it ready for the marketplace, we have two more things we have to do. First, we have to update the icons and secondly we need to go update that WMAppManifest in order to edit the capabilities. So let's exit the app in the Emulator, jump back to Visual Studio, open up the Solution Explorer and come over here, and we'll say once again Add Existing Item. We'll navigate to the desktop, into our exercise files folder, and pick up the icon from the End state of our UnitsConverter example files.
We need both the application icon and the background, remember the application icon is the 62x62 pixel image that shows up in the application list, and the background icon is the 173x173 image that shows up on the homepage. And now when we run our app one more time and click back to here, we'll see, ah, this is a good thing to know It didn't update this, because we didn't rebuild.
So we will come back to Visual Studio, stop our debugger, rebuild the solution which will cause it to re-add those application icon resources to the binary, and then we'll run it again. There is our UnitsConverter, there is our new icon, and when we pin to start, there is a new icon from the Background.png. And that's it! We're done with the icon update.
Now let's go take a look at the capabilities update, back to the Solution Explorer, open up the Properties folder, and open up WMAppManifest.xml. Now for this particular application let's see what we need. We don't need Gamer Services, not identifying our device or our user, we're not using location services, we're not using the media library or the microphone. We are using networking, because we're using the web browser. We're not using phone dialer or push notifications or the settings.
We'll leave in the web Browser Component. We're not using the camera, or the context, or the appointments. Again, remember it's important to narrow this down as much as possible, because the uptake of your app by users is inversely proportional to the number of capabilities that you need. People feel comfortable having your app ask for only the capabilities that it actually needs. And that's it! We're done with the UnitsConverter and ready to move on.
Get unlimited access to all courses for just $25/month.Become a member
82 Video lessons · 101476 Viewers
61 Video lessons · 88227 Viewers
71 Video lessons · 72109 Viewers
56 Video lessons · 103869 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.
Your file was successfully uploaded.