TPA - Windows Phone

More controls

Prepared by: Kamil Kowalski

Agenda
Panorama control Pivot control Map control Media element control Progress bar controls Application bar Silverlight Toolkit, Coding4fun Q&A

Panorama control
Panorama control allows sliding through a horizontal page with different contents and blocks. Panorama control allows sliding through a big content without having to completely hide the previous contents. Panorama control is used to browse back and forth the page items with in the specified content block to get rich user experience. We will be having only one Panorama control per page. Panorama control is a container for PanoramaItems which contain content and controls such as lists, buttons, images etc.

Panorama control
Each PanoramaItem has:
Header - this is the ContentControl that is used to display and animate the header.(Header is optional) Content - this is the ContentPresenter that displays the PanoramaItem content. Orientation property - setting the orientation to Horizontal will allow the item to be of a larger size than the control. By default, this property is Vertical, which means that panning or flicking should bring you to the next panorama section.

The recommended dimensions for a Panorama background image is a height of 800 pixels and a width less than 2000 pixels.

Panorama control
Panorama control is layered in to 4 layers:
Background the base layer, the background of the panorama control. Title the top layer used to display the title of the page. Header this layer is used to display the Panorama Item block title. Content this layer will be used to show the Panorama Item content.

Panorama control
If a Panorama control is using an image for the background, its Build Action should be set to Resource.
Otherwise, it will not appear immediately when the application is first displayed.

Setting the Build Action to Content would cause it to be loaded asynchronously. Key Property:
DefaultItem - sets the default item that moves into display. Allows your app to store the user's most recently used panorama item to return to it later.

Key Event:
SelectionChanged - This event occurs when the currently selected item changes

Pivot control
Pivot control allows presenting different slices (categories) of the same data.
In the Calendar on Windows Phone, you can flip between the agenda and day views. They present the same data, but in two completely different views.

Pivot control allows sliding back and forth and providing related datas in a much easier view using any of the available controls. We will be having only one Pivot control per page. Pivot control is the base control and inside contains a multiple Pivotitem controls where we can individual page content such as controls lists, buttons, images, etc. inside each page.

Pivot control
Each PivotItem has:
Content - The ContentPresenter control that displays the PivotItem content.

Key Events:
LoadedPivotItem - Event for indicating that an item has fully loaded LoadingPivotItem - Event for offering an opportunity to dynamically load or change the content of a pivot item before it is displayed SelectionChanged - This event occurs when the currently selected item changes UnloadedPivotItem - Event for notifying that the pivot item has been completely unloaded from the visual pivot. UnloadingPivotItem - Event for offering an opportunity to dynamically load, change or remove the content of a pivot item as it is removed.

Pivot control
Pivot Control is layered into 2 layers, with each layer contain a Grid inside as the layout root:
Pivot Headers this layer is for showing the header title. Pivot Items this layer is for showing single Pivotitem to show data.

(bing) Map control

Map Control combines the power of Silverlight and Bing maps to get mapping experience for the developers and the end users. You need to register for the Bing Map developers account to get the keys which are used in developing the application with the Bing Maps.
http://www.bingmapsportal.com/ - use your Windows Live ID

You will be requested to provide the application details:

Application name: a valid application name Application URL: a valid application URL to access Application type: a valid application type to be selected from the list

(bing) Map control

Media element control

Media element control helps the application developers to stream video and audio files and to use the integrated Music and video Hubs to select the media files. Media element control incorporates the audio and video files using the inbuilt device media player.

Progress bar controls

Progress bar controls show the users that an operation is making progress, without overloading him with too many details. Progress bar controls can show progres information in two different ways:
indeterminate mode - cannot determine how long the operation will take to complete. Indeterminate mode Progress Bars show their status by having dots move from left to right in an animation. IsIndeterminate checkbox determine mode - can determine approximately how long an operation takes to complete. Use the Determinate mode to let the user know the percentage that is left in the operation.

Progress bar controls

With Windows Phone 7.5 Mango, you have 2 choices for Progress Bars:
Progress Bar A control that you can put anywhere in your Silverlight page. Progress Indicator A control which lives in the System Tray.

Application bar
Application Bar is a set of icons that can be configured at the bottom of the application for each page or also we can configure it for multiple pages. Buttons can be used to navigate to frequently used pages across the application which enables users to navigate quickly and easily. Application bar has some set of options along with the buttons we can configure the menu items especially for some navigation which are not that much frequently used. Application bar automatically adjusts its icons and button as the screen orientation changes as and when.

Application bar
The text based menu items are displayed as a list rather from the icons been shown in the screen. The menu items as well as icons are by default be taken in lower case to have a consistent user experience.

Silverlight Toolkit
http://silverlight.codeplex.com Windows Phone Toolkit provide the developer community with new components, functionality, and an efficient way to help shape product development. Toolkit releases include open source code, samples & docs, plus design-time support for the Windows Phone platform.

Coding4fun tools
http://coding4fun.codeplex.com Controls and tools for WP Many others interesting projects: http://channel9.msdn.com/coding4fun

Coding4fun tools

Q&A
??