List of Figures
Chapter 1. A new phone, a new operating system
Figure 1.1. A variety of screen shots from Windows Phone 8: Starting with the Start Screen at bottom center and moving clockwise,
you can see the Application List, Office Hub, People Hub, Email application, and Lock Screen.
Figure 1.2. The three screen resolutions of Windows Phone 8: 800 * 480 (WVGA) on the left, 1280 * 768 (WXGA) in the center,
and 1280 * 720 (720p) on the right. All three images are running the sample application you’ll build in chapter 5. Notice
how the 720p image has extra space at the bottom of the screen due to the different scale factor.
Figure 1.3. Common signs in railways and airports. On the left are icons integrated with text, whereas on the right only icons
are used.
Figure 1.4. The Start Screen from the emulator containing several tiles of various formats and sizes
Figure 1.5. The three different sizes of a Flip tile. At the top of the image is the small-sized Flip tile showing only the
background image and count badge. The front and back of both the normal-sized and double-wide-sized tiles are also shown—displaying
the tile title, background image, count badge, and back-of-tile message.
Figure 1.6. Three different sizes of an iconic tile. Both the small and normal-sized tiles display the icon and the count
centered in the tile. The double-wide tile moves the icon and count to the corner to make room for three rows of text.
Figure 1.7. A Cycle tile caught in transition from one image to another
Figure 1.8. The Application List showing the tap-and-hold menu through which the user can uninstall an application or pin
it to the Start Screen
Figure 1.9. The Music + Videos Hub showing the Collection, History, New, Apps, and Xbox views
Figure 1.10. The Photos Hub showing the Collections, Favorites, What’s New, and Apps views
Figure 1.11. The sample application you’ll build in chapter 5 uses a launcher to send an SMS text message.
Figure 1.12. The Photo Editor application you’ll build in chapter 9 extends the Photos Hub.
Figure 1.13. A toast notification appears at the top of the screen and displays a title and a message.
Figure 1.14. In chapter 10 you’ll build applications that use the accelerometer, compass, and gyroscope.
Figure 1.15. In chapter 9 you’ll build VoiceRecorder, an application that integrates with the Music + Videos Hub.
Figure 1.16. Visual Studio Express 2012 for Windows Phone
Figure 1.17. Windows Phone Developer Registration tool
Figure 1.18. Application to deploy a binary (XAP) file to the device
Figure 1.19. Using the Isolated Storage Explorer Tool to list the files in isolated storage in the emulator
Figure 1.20. The Simulation Dashboard is used with the emulator to change network connectivity, lock the screen, and trigger
a reminder to obscure the screen.
Chapter 2. Creating your first Windows Phone application
Figure 2.1. The Windows Phone 8 in Action Hello World application. The screen on the left is shown when the application starts,
and the screen on the right is shown when the user taps the text box’s action icon.
Figure 2.2. Visual Studio’s New Project dialog box shows the available C# Windows Phone project templates.
Figure 2.3. Project files and folders in the Solution Explorer
Figure 2.4. The Target Deployment Device selector showing the default deployment target (Emulator WVGA 512MB), the list of
all the emulators, and a connected Windows Phone device
Figure 2.5. NavigationFailedEventArgs properties after renaming MainPage.xaml
Figure 2.6. HelloPage.xaml’s TitlePanel in the Visual Studio Designer
Figure 2.7. Use the device panel to switch between portrait and landscape layouts. The device panel also provides controls
for changing the theme, accent color, and device resolution.
Figure 2.8. Visual Studio’s System Resource menu shown when clicking the Advanced option button that appears on the right
edge of most properties in the property editor. The first item in the menu is the name of the property, which in this screen
shot is Background.
Figure 2.9. Theme text styles shown in the dark and light themes
Figure 2.10. Add a reference to the Windows Phone Toolkit with the Manage NuGet Packages dialog.
Figure 2.11. The PhoneTextBox from the Windows Phone Toolkit. The PhoneTextBox extends a normal TextBox with a hint watermark
and an action icon.
Figure 2.12. The navigation page stack resulting from GoBack (top) and Navigate (bottom) method calls—the white boxes represent
the visible page, whereas the shaded boxes are the pages in the background.
Figure 2.13. The navigation URI to the GreetingPage includes a query string parameter. The parameter is used to pass the name
entered in the PhoneTextBox from MainPage to GreetingPage. GreetingPage extracts the passed value and displays it in a TextBlock.
Figure 2.14. Application and secondary tiles for Hello World
Chapter 3. Fast application switching and resume
Figure 3.1. Application lifetime states and the actions that trigger state transition
Figure 3.2. The Lifetime sample application
Figure 3.3. Lifetime application after initial construction (left) and restart (right)
Figure 3.4. The dormant Lifetime application shown in the Task Switcher
Figure 3.5. The tombstone debugging option in the Project Properties page
Figure 3.6. The Lifetime sample application after being reactivated from a tombstoned state. The weird value for the launched
time is due to LaunchedTime defaulting to DateTime.MinValue.
Figure 3.7. The sample application obscured by a reminder. The reminder was triggered using the Simulation Dashboard.
Figure 3.8. The ToggleSwitch control from the Windows Phone Toolkit
Figure 3.9. The default fast application workflow. If the launch URI matches the active page’s URI, the active page is refreshed;
otherwise a new page is created.
Figure 3.10. The customized fast application resume workflow for the Lifetime sample application. When the URI of the active
page isn’t /MainPage.xaml, and the launch URI is /MainPage.xaml, the navigation will be canceled.
Chapter 4. Scheduled actions
Figure 4.1. The ScheduledActions sample application showing three reminders and a status message indicating that the user
disabled the application’s background agent
Figure 4.2. Adding an icon with the property editor. Icons included in the Windows Phone SDK appear in the popup selection
list. Once an icon is selected, it’s added to the /Assets/AppBar project folder.
Figure 4.3. The controls used on the ReminderPage to edit the reminder properties. A TextBlock is used for the TextBox’s label,
but the labels for the other four controls are provided through their Header properties.
Figure 4.4. Time and date pickers provided by the Windows Phone Toolkit. The left image contains the page shown to the user
when a TimePicker is tapped, and the right image is the corresponding page for the DatePicker.
Figure 4.5. The ListPicker displays a list when tapped. If the list contains five or fewer items, the control is expanded
in place. If the list contains more than five items, the list is shown on a new page.
Figure 4.6. A reminder and an alarm as displayed to the user. Reminders can display a custom title and allow the user to choose
a custom snooze interval. Alarms display only a stock title.
Figure 4.7. Screenshots showing the front and back of the ScheduleActions application’s Live Tile. The front of the tile reports
that there’s one more reminder today, whereas the back of the tile shows the time and title of the next reminder.
Figure 4.8. The Background Tasks page of the Settings application displays the periodic task’s description and allows a user
to disable the task. In the image on the right, the user has disabled the periodic task but will allow the application to
recreate the task the next time it runs.
Figure 4.9. In the left-hand image, the user has selected the ScheduledActions application as the detailed status provider
and the third quick status provider. The image on the right demonstrates how both detailed and quick status appear on the
Lock Screen.
Chapter 5. Launching tasks and choosers
Figure 5.1. The PhoneTasks application with hyperlinks and buttons for launching native applications
Figure 5.2. Phone dialer and in-call overlays
Figure 5.3. Error message displayed when an invalid phone number is specified
Figure 5.4. Messaging application
Figure 5.5. The Windows Phone Store Hub
Figure 5.6. The home page button’s content in trial and licensed modes
Figure 5.7. Saving an application-supplied phone number
Figure 5.8. Saving an application-supplied email address
Figure 5.9. Saving a ringtone (left) and selecting a custom ringtone for a contact (right)
Chapter 6. Contacts and calendars
Figure 6.1. The ContactsInAction sample application. On the left is the contactsearch pivot displaying the results of a search
for all contacts with the name Jones. On the right is the appointments search pivot displaying an upcoming appointment.
Figure 6.2. On the left is the screen you’ll build to add new contacts to a custom contact store. On the right you see how
a custom contact appears in the contacts search pivot item.
Figure 6.3. The Add icon from the Windows Phone SDK
Figure 6.4. The ContactPage uses TextBoxes to gather first and last names, a phone number, and an email address from the user.
Figure 6.5. When a contact store is created with the limited, read-only access mode, the UserData API will hide most of the
contact data, even though this data is visible from within the People Hub.
Figure 6.6. When a custom contact store is created with read/write system access, a user can choose the contact store when
adding new contacts in the People Hub.
Figure 6.7. The delete icon from the Windows Phone SDK
Chapter 7. Storing data
Figure 7.1. Application file system overview
Figure 7.2. The High Scores sample application
Figure 7.3. Application settings are written to a file in the local storage folder.
Figure 7.4. High scores are written to an XML file located in a new folder in local storage.
Figure 7.5. High scores are written to a database located in a new folder in local storage.
Figure 7.6. Editing the name associated with a high score
Figure 7.7. Database schema as created and upgraded by the application
Figure 7.8. Taking a snapshot with the Isolated Storage Explorer. Before taking the snapshot, the devices are enumerated,
and the appropriate device index is used in the subsequent invocation of ISETool.
Chapter 8. Working with the camera
Figure 8.1. The PhotoEditor sample application
Figure 8.2. A screenshot of the built-in Photo Chooser application with Camera button
Figure 8.3. The left-hand image is a screen shot showing a successful result from the PhotoChooserTask displayed to the user.
A gray box is shown with the message “Cancel” when a result other than OK is returned, such as when the user presses the Back
button.
Figure 8.4. The Camera application in the emulator. A colored square moves along the border of the screen while the camera
is active. When a picture is snapped, the result is the same image—a field of gray with a colored box along the edge.
Figure 8.5. A picture taken in landscape orientation but displayed right-side up when the application is in portrait orientation.
The CameraCaptureTask rotates the picture based on the phone’s orientation when the picture is snapped.
Figure 8.6. The custom camera feature showing a live preview
Figure 8.7. The phone is designed to treat the right edge as the top of the camera’s view. When an application displays a
raw camera feed in a portrait orientation, it must transform the image by 90 degrees.
Figure 8.8. Orientation problems when using PhotoCamera. On the left is the picture as it appeared in the viewfinder with
the phone held in portrait orientation. When the photograph was snapped and the image was copied into the photo container,
it appeared rotated with the top of the image toward the left side of the phone, as shown on the right.
Figure 8.9. Different ways of holding the camera produce different photo output and Exif orientation values.
Figure 8.10. When the Photo-Editor is running in custom camera mode and the user switches away from and then returns to the
application, the viewfinder is blank.
Figure 8.11. A picture stamped with “Windows Phone 8 in Action”
Chapter 9. Integrating with the Photos and Music + Videos Hubs
Figure 9.1. Phone picture albums in the Windows File Explorer. A portable device folder is added to the computer node in the
File Explorer hierarchy. The Pictures library shown in File Explorer is equivalent to the RootPictureAlbum property of the
MediaLibrary class.
Figure 9.2. Selecting, editing, and saving a photo in the sample application
Figure 9.3. Four different sections of the panorama can be seen in this Photos Hub. The first image presents a list of categories.
The second shows the pictures the user has identified as their favorites. The third is a running list of new pictures added
to the user’s social networks. The last image shows the apps list, which provides a list of applications registered as Photos
Hub extensions.
Figure 9.4. The photo viewer page showing installed Photos_Extra_Image_Editor applications
Figure 9.5. The five different sections of the Music + Videos Hub. The first image is the list of media collections in the
media library. The second lists the media recently played by the user. Newly downloaded media is shown in the third section.
The app picker lists applications that extend the Music + Videos Hub. The last section contains links to the Xbox Music Store.
Figure 9.6. The VoiceRecorder sample application
Figure 9.7. The Stop and Record application bar buttons in the VoiceRecorder sample application
Figure 9.8. The Play button and recording message as displayed in the VoiceRecorder user interface
Figure 9.9. The sample application displaying several recordings in the LongListSelector
Figure 9.10. When using the MediaHistory methods, tiles representing an application’s media files are displayed in the Music
+ Videos Hub.
Figure 9.11. Voice recordings in the Universal Volume Control
Chapter 10. Using sensors
Figure 10.1. The x, y, z coordinate system as defined by a Windows Phone
Figure 10.2. The Sensors sample application displays bars representing the x, y, and z values reported by the Accelerometer,
Gyrometer, and Inclinometer.
Figure 10.3. A Bar control with a scale value of 2.0 and a current value of –1.0
Figure 10.4. Controlling acceleration with the emulator’s Accelerometer Tool
Figure 10.5. Acceleration from the forces on a device at rest. Each of the arrows represents the acceleration due to the force
holding the device in the stated position.
Figure 10.6. Acceleration due to the motion of sliding the device across a table
Figure 10.7. The compass measures the device’s heading, which is the angle between magnetic north and the direction the device
is pointed.
Figure 10.8. A screen shot of the heading TextBlock showing the HeadingMagneticNorth and HeadingTrueNorth properties. Note
that the heading values differ by 7 degrees.
Figure 10.9. Examples of positive and negative declination for two different locations on the Earth’s surface
Figure 10.10. The device frame aligns with the world frame when the device is lying flat and pointed north.
Figure 10.11. The device rotated 270 degrees around the z axis
Figure 10.12. The device rotated 270 degrees around the z axis and 90 degrees around the x axis
Chapter 11. Network communication with push notifications
Figure 11.1. The networking sample application
Figure 11.2. Device information as displayed in the sample application
Figure 11.3. Phone network information as displayed in the sample application
Figure 11.4. Network interface information as displayed in the sample application
Figure 11.5. Toast notification
Figure 11.6. Push notification workflow
Figure 11.7. The completed notification client
Figure 11.8. The client’s connections status and URI as displayed in the sample application
Figure 11.9. The navigation URI from a toast notification as displayed in the sample application
Figure 11.10. The Packaging tab of the manifest file editor. Publisher ID is shown at the bottom of the image. The NotificationClient
and NotificationSimulator must have the same publisher ID to allow the client to launch the simulator using the Installation
Manager.
Figure 11.11. The NotificationSimulator
Figure 11.12. The message box displaying the MPN Service response
Chapter 12. Using the Speech API
Figure 12.1. The Speech Settings pages
Figure 12.2. A MessageBox triggered by a BookmarkReached event
Figure 12.3. Adding a new VCD file to a project
Figure 12.4. Choosing a VCD file
Figure 12.5. Permission voice UI screens
Figure 12.6. Voice prompt UI screens
Figure 12.7. Opening app from voice prompt
Figure 12.8. Voice prompt command recognized
Figure 12.9. Voice Help screens
Figure 12.10. Voice Help screens for an application
Figure 12.11. The Listening screen
Figure 12.12. The Thinking screen
Figure 12.13. The Heard You Say screen
Figure 12.14. The Did You Say screen
Figure 12.15. The Error screen
Chapter 13. ApplicationBar and context menus
Figure 13.1. The application bar with expanded menu in portrait, landscape left, and landscape right orientations
Figure 13.2. Visual Studio’s designer support for the ApplicationBar. The ApplicationBar, or any of its menus or buttons,
can be selected in the Document Outline.
Figure 13.3. Visual Studio’s property editor, displaying icons that already exist in the project and the stock icons that
ship with the SDK. When a stock icon is selected, Visual Studio automatically copies the icon to the project.
Figure 13.4. Application page obscured by a semitransparent application bar
Figure 13.5. The application bar in default (left) and minimized mode (right)
Figure 13.6. A context menu demonstrating the zoom effect and a complex menu item header
Chapter 14. Panorama and pivot controls
Figure 14.1. The sample Panorama application with three items
Figure 14.2. The Panorama sample application with fixed-width items
Figure 14.3. A wide PanoramaItem that calculates its own width
Figure 14.4. Title alignment when the second item isn’t the default (left) and when it is the default (right)
Figure 14.5. The Office Hub with an image in the panorama title
Figure 14.6. The sample Pivot application with three pivots
Figure 14.7. Pivot selection events
Chapter 15. Building a media player
Figure 15.1. The MediaPlayback sample application
Figure 15.2. Adding sample.wmv to the Assets folder in the sample application project with the Build Action property set to
Content
Figure 15.3. Copying sample.wmv from the install folder to the local storage folder
Figure 15.4. The sample video playing in the built-in Media Player application, launched by the MediaPlayerLaucher task. The
video plays in landscape orientation with playback controls visible.
Figure 15.5. The error message displayed to the user when a file doesn’t exist at the specified URI
Figure 15.6. Showing the system progress indicator when a video is loading. The system progress indicator appears at the top
of the screen with a label. The indeterminate version of the progress bar consists of a series of small balls or dots moving
from left to right.
Figure 15.7. A example error code returned by the MediaFailed event
Figure 15.8. A slider control is used to control the sound volume of the media player. Dragging the slider all the way to
the left silences the player.
Chapter 16. Using Maps
Figure 16.1. The MapsTasks sample application
Figure 16.2. Searching for a local pizzeria with the MapsTask. The current location is shown on the map as a black diamond
with a dot in the center, colored with the system’s theme accent color. Locations or landmarks matching the search term are
marked with labeled and numbered pushpins.
Figure 16.3. Turn-by-turn directions as displayed in the Maps application. The starting point is labeled with a lettered pushpin,
and each turning point in the list is marked on the map with a numbered dot. The route is also marked as a line between each
of the turning points.
Figure 16.4. The LocationAndMaps sample application
Figure 16.5. The LocationAndMaps sample application displaying a map
Figure 16.6. After calling GetGeopositionAsync, the Map control’s Center property is assigned to the retrieved coordinate.
The longitude and latitude are also displayed in the sample application.
Figure 16.7. Latitude is the angle measured from the equator to a particular location, as shown in the left image. The right
image demonstrates how longitude is measured as the angle from the prime meridian to a particular location.
Figure 16.8. The Map control displays custom objects as overlays placed into one or more layers.
Figure 16.9. The LocationAndMaps sample application with a UserLocationMarker centered on the device’s current location.
Figure 16.10. A Map control displaying a numbered Pushpin and a UserLocationMarker
Figure 16.11. The address retrieved by reverse geocoding a coordinate
Figure 16.12. The LocationAndMaps application continuously tracking location. The start position is identified with a pushpin,
the current position with a location marker, and the route from start to end drawn over the map. While tracking, the map appears
tilted, and position information is displayed.
Figure 16.13. The status message
Figure 16.14. The position information displayed in the user interface includes altitude, heading, speed, and distance traveled,
along with the estimated accuracy of the position and the length of time elapsed since the last update.
Figure 16.15. A MapPolyline drawn on a Map control. When using the polyline’s collection of points as input into the Map’s
SetView method, the Map will ensure the entire route is displayed.
Chapter 17. Building HTML applications
Figure 17.1. The completed HTML5 sample application
Figure 17.2. The generated Html5App project files as seen in the Visual Studio Solution Explorer. As with any other application,
the project contains App.xaml and MainPage.xaml.
Figure 17.3. The user interface generated by the Windows Phone HTML5 App project template, including forward and back navigation
buttons and a menu item that takes the user back to a home page
Figure 17.4. The navigation failed error message, shown in a message box by the Html5App sample application, appears on the
left. On the right you see the navigation failed message shown by the WebBrowser control when the NavigationFailed event isn’t
handled.
Figure 17.5. This book’s page on the Manning website, shown in Internet Explorer launched by WebBrowserTask
Figure 17.6. The user interface built by the updated index.html. Notice that this doesn’t match the Windows Phone style, and
the application title doesn’t fit on a single line.
Figure 17.7. After correcting the viewport width, the application title no longer wraps.
Figure 17.8. The Html5App sample application styled to resemble a standard Windows Phone XAML application
Figure 17.9. Adding jQuery to the sample application project. At the time of this writing, the latest version of jQuery is
1.9.1.
Figure 17.10. The Scripts folder containing the jQuery JavaScript library
Figure 17.11. The WebBrowser control displays an alert message in a message box.
Figure 17.12. A sequence diagram showing the code execution from JavaScript to C# and back
Chapter 18. Releasing and monetizing apps
Figure 18.1. An app with both free and paid versions
Figure 18.2. Adding AdControl to a page using drag-and-drop
Figure 18.3. pubCenter Registration screen
Figure 18.4. pubCenter Overview page
Figure 18.5. Registering an app in pubCenter
Figure 18.6. Creating a mobile ad unit in pubCenter
Figure 18.7. The Windows Phone Store
Figure 18.8. The Windows Phone Dev Center benefits page
Figure 18.9. Setting a conditional compilation symbol
Figure 18.10. The results of automated tests performed by the Store Test Kit, including a list of security capabilities used
by the application
Figure 18.11. Submit App page
Figure 18.12. App Info page
Figure 18.13. Upload and describe your XAP
Figure 18.14. Uploading app icons, images, and screenshots
Figure 18.15. App download report
Figure 18.16. Crash count report
Figure 18.17. A consumable product
Figure 18.18. A durable product
Figure 18.19. App Details page
Figure 18.20. Product ID of an app
Figure 18.21. In-app product properties
Figure 18.22. In-app product Description page
Appendix A. XAML, the Extensible Application Markup Language
Figure A.1. The default application
Appendix B. Model-View-ViewModel (MVVM)
Figure B.1. The interactions between the View, Model, and ViewModel
Figure B.2. View of the MVVM sample
