WP7 Tpa 3 Controls

8/2/2019 WP7 Tpa 3 Controls

1/24

TPA - Windows Phone

Controls, Themes & Styles

Prepared by: Kamil Kowalski


2/24

Agenda

Metro UI

Basic controls and Layout

System themes

Using Expression Blend

Control templates

Navigation

Q & A


3/24

Metro UI

Metro is the UI design style for Windows Phone.

Metro is defined by two things: Metro Design Principles and

Metro Design Language.

The Metro Design Principles are the pillars (usually abstractconcepts) that guide the creation of experiences for Windows

Phone.

The Metro Design Language is a set of concrete user

interaction, visual design, motion and application flow

elements and rules.


4/24

Metro UI

The Windows Phone Design Principles are:

Light, Clean, Open, Fast (Fierce Reduction) Fierce Reduction starts with the application/experience flow - only after that it goes to user

interface design.


5/24

Metro UI

Content, not Chrome The star of the show is information/content, not UI controls or interface.


6/24

Metro UI Typography

Metro is not 100% about Typography. Typography in Metro is just another way to conveyinformation. Typography however, offers unique visual design possibilities to conveystructured information to the user.


7/24

Metro UI

Motion Motion is there to serve and contribute to making Information the star of the show. Use

motion to emphasize (or de-emphasize) your application flow.

Authentically Digital Being honest with the fact that we are designing for a screen, made out of RGBA pixels, and

for a screen with a specific dimensions.

Users care more about being able to consume information than having representations ofphysical world objects inside their phones.


8/24

Metro UI The Windows Phone Design Language is determined by concrete

elements: Navigation. Layout. Composition Typography

There is a concrete navigation system in Metro called Hub & Spoke (more here).

Theres a concrete typographic style using Segoe in different weights and sizes to convey structuredinformation.

Motion

Iconography

Images & Photos

Themes & Personalization

Touch Gestures & Targets Theres a concrete set of gestures like tap, double tap, tap & hold, flick, pan .

UI controls Theres a concrete set of UI controls like buttons, radio buttons and checkboxes, sliders and others UI

metaphors.

Theres concrete application interaction metaphors like Pivot, Panoramas and Pages.

Hardware, Services, Marketplace and Branding
http://en.wikipedia.org/wiki/Spoke-hub_distribution_paradigmhttp://science.howstuffworks.com/transport/flight/modern/airline3.htmhttp://msdn.microsoft.com/en-us/library/hh202879(v=VS.92).aspxhttp://msdn.microsoft.com/en-us/library/hh202879(v=VS.92).aspxhttp://science.howstuffworks.com/transport/flight/modern/airline3.htmhttp://en.wikipedia.org/wiki/Spoke-hub_distribution_paradigm


9/24

Metro UI

The Metro Design Language for Windows Phone is definedvia three different sources:

The Windows Phone UX Guidelines

The Windows Phone SDK Control Library (and the Silverlight Toolkit

for Windows Phone)

The out-of-box apps and services in Windows Phone (email, text

messages, people hub, music/video hub, phone app)

31 Weeks of Windows Phone Metro Design
http://msdn.microsoft.com/en-us/library/hh202915(v=vs.92).aspxhttp://create.msdn.com/en-us/home/getting_startedhttp://www.microsoft.com/windowsphone/en-US/features/default.aspxhttp://ux.artu.tv/?page_id=190http://ux.artu.tv/?page_id=190http://www.microsoft.com/windowsphone/en-US/features/default.aspxhttp://www.microsoft.com/windowsphone/en-US/features/default.aspxhttp://www.microsoft.com/windowsphone/en-US/features/default.aspxhttp://www.microsoft.com/windowsphone/en-US/features/default.aspxhttp://www.microsoft.com/windowsphone/en-US/features/default.aspxhttp://create.msdn.com/en-us/home/getting_startedhttp://msdn.microsoft.com/en-us/library/hh202915(v=vs.92).aspx


10/24

Basic controls

Most of the controls is same as in Silverlight, but with Metro

UI style applied as default look and feel.

You can use any style (looknfeel) you want, but you should

follow Metro style.

The following controls are available:

Border, Button, Canvas, CheckBox, ContentControl, ContentPresenter,

Control, Grid, HyperlinkButton, Image, InkPresenter, ListBox,

MediaElement, MultiScaleImage, Panel, PasswordBox, ProgressBar,

RadioButton, ScrollViewer, Slider, StackPanel, TextBlock, TextBox,UserControl


11/24

Basic controls


12/24

Layout

The layoutdescribes the process of sizing and positioning

objects in your app. To position UI elements such as buttons,

checkboxes, shapes, text, and other content presented on the

screen.

You must put basic controls in one of these panel (container

object) elements: Canvas, StackPanel or Grid.

Canvas - defines an area within which you can explicitly

position child objects by specifying x and y coordinates in

pixels. The x and y coordinates are often specified by using the Canvas.Left

and Canvas.Top that determine the position of the child(inside)

element.


13/24

Layout

StackPanel arranges child elements into a single line that can

be oriented either horizontally or vertically.

You can change its orientation via its Orientation property. By defaultif you do not change anything the orientation is set to vertical.


14/24

Layout

Grid - defines a table layout consisting of columns and rows. By default, a Grid contains one row and one column.

To define multiple rows and columns use the ColumnDefinitionsand

RowDefinitions collections.

You can specify the size of the particular rows/columns via

RowDefinition and ColumnDefinition objects.

You can position objects in specific cells of the Grid by using the

Grid.Column and Grid.Row attached properties.

"*" sizing distributes remaining available space proportionally.

"Auto

" sizing distributes space evenly based on the size of the content

that is within a column or row.


15/24

Layout


16/24

System themes

User has the ability to change the theme on the phone fromDark to Light, and also set an accent color.

Two themes on the same application:


17/24

System themes

Developer need to think about what application will look likewhen the phone has the another theme and differnt accent

color assigned.

Use Expression Blend to work on colors of your application.


18/24

System themes

Small example:


19/24

Using Expression Blend

Expression Blend is used to design rich user experience for a XAMLbased application.

How to create fancyncoolappliaction UI sample.


20/24

Control templates

ControlTemplate specifies the visual structure and visualbehavior of a control.

You can completely customize the look and feel of a control

by giving it a new ControlTemplate.

When you create a ControlTemplate, you replace theappearance of an existing control without changing its

functionality.

When changing the ControlTemplate you can customize the shape of

the buttons in your application but the button will still raise the Click

event.


21/24

Control templates

In most of the cases (when using Data Binding) you canchange the appearance of any particular control through

different DataTemplates.

Change the ControlTemplate only if necessary and there is

not another option, like for example when you want tocustomize the VisualStates or the whole behavior of a

particular control.

ControlTemplate is a part of the control Style. It is set through

the Template property.
http://msdn.microsoft.com/en-us/library/system.windows.style(v=vs.95).aspxhttp://msdn.microsoft.com/en-us/library/system.windows.controls.control.template(v=vs.95).aspxhttp://msdn.microsoft.com/en-us/library/system.windows.controls.control.template(v=vs.95).aspxhttp://msdn.microsoft.com/en-us/library/system.windows.style(v=vs.95).aspx


22/24

Navigation

Navigating between pages is important, because we shouldnot design an application that fits into a single page.

Basic navigation in WP is similar to the web navigation NavigationService.Navigate(new Uri("/Page1.xaml", UriKind.Relative));

Basic navigation can be done in two ways:

just pass between the pages, without parametres pass value from one page to other based on the user inputs to show

the details by passing parameters

Navigation events:

OnNavigatedTo : Triggered when the page is loaded.

OnNavigatingFrom : Triggered just before the page unload event, wecan use this if we need to stop the navigation.

OnNavigatedFrom : Triggered after the page is navigated.

OnBackKeyPress : Triggered when the user presses the Back Button


23/24

Navigation

Advanced, more sophisticated navigation can be build basedon NavigationService

Easy Windows-Phone 7 Navigation

source page:

target page:
http://www.sharpregion.com/easy-windows-phone-7-navigation/http://www.sharpregion.com/easy-windows-phone-7-navigation/http://www.sharpregion.com/easy-windows-phone-7-navigation/http://www.sharpregion.com/easy-windows-phone-7-navigation/


24/24

Q & A

??

WP7 Tpa 3 Controls

Documents

Transcript of WP7 Tpa 3 Controls