Upload
damian-chmielewski
View
227
Download
0
Embed Size (px)
Citation preview
8/2/2019 WP7 Tpa 3 Controls
1/24
TPA - Windows Phone
Controls, Themes & Styles
Prepared by: Kamil Kowalski
8/2/2019 WP7 Tpa 3 Controls
2/24
Agenda
Metro UI
Basic controls and Layout
System themes
Using Expression Blend
Control templates
Navigation
Q & A
8/2/2019 WP7 Tpa 3 Controls
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.
8/2/2019 WP7 Tpa 3 Controls
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.
8/2/2019 WP7 Tpa 3 Controls
5/24
Metro UI
Content, not Chrome The star of the show is information/content, not UI controls or interface.
8/2/2019 WP7 Tpa 3 Controls
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.
8/2/2019 WP7 Tpa 3 Controls
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/2/2019 WP7 Tpa 3 Controls
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_paradigm8/2/2019 WP7 Tpa 3 Controls
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).aspx8/2/2019 WP7 Tpa 3 Controls
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
8/2/2019 WP7 Tpa 3 Controls
11/24
Basic controls
8/2/2019 WP7 Tpa 3 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.
8/2/2019 WP7 Tpa 3 Controls
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.
8/2/2019 WP7 Tpa 3 Controls
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.
8/2/2019 WP7 Tpa 3 Controls
15/24
Layout
8/2/2019 WP7 Tpa 3 Controls
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:
8/2/2019 WP7 Tpa 3 Controls
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.
8/2/2019 WP7 Tpa 3 Controls
18/24
System themes
Small example:
8/2/2019 WP7 Tpa 3 Controls
19/24
Using Expression Blend
Expression Blend is used to design rich user experience for a XAMLbased application.
How to create fancyncoolappliaction UI sample.
8/2/2019 WP7 Tpa 3 Controls
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.
8/2/2019 WP7 Tpa 3 Controls
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).aspx8/2/2019 WP7 Tpa 3 Controls
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
8/2/2019 WP7 Tpa 3 Controls
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/8/2/2019 WP7 Tpa 3 Controls
24/24
Q & A
??