WP7 Tpa 4 More Controls

8/2/2019 WP7 Tpa 4 More Controls

1/20

TPA - Windows Phone

More controls

Prepared by: Kamil Kowalski


2/20

Agenda

Panorama control

Pivot control

Map control

Media element control

Progress bar controls

Application bar

Silverlight Toolkit, Coding4fun

Q & A


3/20

Panorama control

Panorama controlallows sliding through a horizontal page

with different contents and blocks.

Panorama controlallows 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.


4/20

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 backgroundimage is a height of 800 pixels and a width less than 2000

pixels.


5/20

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.


6/20

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


7/20

Pivot control

Pivot controlallows presenting different slices (categories)of the same data.

In the Calendar on Windows Phone, you can flip between theagenda and day views.

They present the same data, but in two completely different views. Pivot controlallows sliding back and forth and providing

related datas in a much easier view using any of the availablecontrols.

We will be having only one Pivot control per page.

Pivot controlis the base control and inside contains amultiple Pivotitem controls where we can individual pagecontent such as controls lists, buttons, images, etc. insideeach page.


8/20

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.


9/20

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.


10/20

(bing) Map control

Map Controlcombines 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
http://www.bingmapsportal.com/http://www.bingmapsportal.com/


11/20

(bing) Map control


12/20

Media element control

Media elementcontrol helps theapplication developers to stream video and

audio files and to use the integrated Music

and video Hubs to select the media files.

Media elementcontrol incorporates theaudio and video files using the inbuilt

device media player.


13/20


Progress bar controls show the users that an operation ismaking progress, without overloading him with too manydetails.

Progress bar controls can show progres information in twodifferent ways:

indeterminate mode - cannot determine how long the operation willtake to complete.

Indeterminate mode Progress Bars show their status by having dotsmove from left to right in an animation.

IsIndeterminate checkbox

determine mode - can determine approximately how long an operationtakes to complete.

Use the Determinate mode to let the user know the percentage that isleft in the operation.


14/20


With Windows Phone 7.5 Mango, you have 2 choices forProgress Bars:

Progress Bar A control that you can put anywhere in your Silverlight

page.

Progress Indicator A control which lives in the System Tray.


15/20

Application bar

Application Baris a set of icons that can be configured at thebottom 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 quicklyand 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.


16/20

Application bar

The text based menu items aredisplayed 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 havea consistent user experience.


17/20

Silverlight Toolkit

http://silverlight.codeplex.com

Windows Phone Toolkit provide the

developer community with new

components, functionality, and an

efficient way to help shape productdevelopment.

Toolkit releases include open source

code, samples & docs, plus design-time

support for the Windows Phoneplatform.
http://silverlight.codeplex.com/http://silverlight.codeplex.com/


18/20

Coding4fun tools

http://coding4fun.codeplex.com

Controls and tools for WP

Many others interesting projects:

http://channel9.msdn.com/coding4fun
http://coding4fun.codeplex.com/http://channel9.msdn.com/coding4funhttp://channel9.msdn.com/coding4funhttp://coding4fun.codeplex.com/


19/20

Coding4fun tools


20/20

Q & A

??

Documents

WP7 Tpa 4 More Controls