Objective

The goal of this MP is to get ourselves familiarize with phone specific UI Elements, interaction interface, and data binding capabilities.

Specification

We will use the building of a: “select a media resource from a list with multiple presentations, and manipulate the selection” as an example application for purposes of practices. Here is my implementation for this assignment based on working with images on the phone: example implementation of this app. Here are the technical specifications:

1. At least two user interaction pages:

a. Your application must have at least two user interaction pages, with the main page being the Presentation page, and at least one Media Selection Page. In my example, these are the main page (with “Kelvin’s Excellent Photo Viewer” text on top of the page), and the photo selection page (with “My Photographs” text on top of the page).

2. The Presentation Page: This will be the main page of your application. On this page:

a. The Application Bar must support at least two buttons with customized icons:

i. View Media Button: A button to trigger the navigation to the Medial Selection Page. In my application, this is the view photos button on the left of the Application Bar.

ii. Collect New Media Button: A button to trigger the sensor device on the phone to let user collect new media. In my application, this is the “take picture” button on the right of the Application Bar. Please refer to item-4 in the following for more information on this button).

b. Result status: The result of either of the above Application Bar buttons is a selected media that will be displayed on the Presentation Page. In my application, the selected image is displayed. You application must at least:

i. Echo result of selection: this is the status text at the bottom of the Presentation Page. I choose to display file name (because of my lack of imagination), you can choose to display relevant (and unique) information regarding the selected media.

ii. Display the selection: this is the image that is displayed in my application.

c. The newly created (or selected) media shall be displayed in the Presentation Page where the user can interactively manipulate and explore the media using the touch screen.

i. In my application, the user can zoom/scale the image.

ii. If you choose to work with audio, your user must be able to touch/slide to control the audio volume, and touch/scroll to view other relevant information regarding the audio, that include at least: creation date, album, and artist.

iii. If you choose to work with video, your user must be able to scroll forward/backward in the video (Warning: I do not know how to do this, I don’t think this is difficult, but, I have never done it before. Let me know if you want to do video and you need help.).

3. The Media Selection Page: must support at least two different presentations using the Panorama UI Element. In class we learned about Pivot, and here I want us to experience with Panorama. In my example, this is the page you will navigate to after pressing the “view photos” button (left button on the Application Bar).

a. The two presentations must show the same media collection in different ways. In my case, these are the “By Name” and “By Photo” presentations.

b. The user must be allowed to navigate between the two presentations and select any of the media presented from either presentation.

c. Once a selection is made, the application will return to the Presentation Page where the user will be able to further explore the selected media (refer to above item-2c for the details of what you must support).

4. The Application Bar Collect New Media Button: as discussed in item-2a.ii above, this is the button that will trigger the phone sensor to allow the user to collect a new media. In my case, this is the “take picture” button that triggers the phone camera. If you want to work with different medium (audio, or video), you can trigger the voice or video recorder. In all cases, you do not need to store the new result on the phone.

Credit Distribution:

1.	Presentation Page		45%
	a. Buttons on Application Bar with custom icons b. Navigation to Selection Page c. Invocation of Phone Sensor d. Status echo + showing selection e. Touch-based manipulation f. General appearance of the page	5% 5% 5% 10% 10% 10%
2.	Media Selection Page		40%
	a. Panorama with at least two presentations b. Each presentation display all media information c. The two presentation displays different information d. Information presentation is based on data binding e. General appearance of the page	10% 5% 5% 15% 10%
3.	Media Collection based on Phone Sensor		10%
	a. Ability to call up the media sensor b. Proper returning of selection result	5% 10%
4.	Softcopy submission requirement		5%
	a. Zip file with all source code b. Proper zip file name c. Removed all useless files: Bin, obj, .cache, .user

This mp counts 15% towards CSS490 and 12% towards CSS590 final grade.

Hints:

· If you want to work with the Silverlight toolkit, make sure you remember to include the following declaration in the corresponding page’s Xaml file:

xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"

· The Transform on Image UIElement is: RenderTransform

· Remember to allocate a new CompositeTransform object for the Transform field before using it.