s2 designing wp8 applications

M2: Designing Windows

Phone Applications

Andy Wigley | Microsoft Technical Evangelist

Rob Tiffany | Microsoft Enterprise Mobility Strategist

Target Agenda | Day 1

Module and Topic | 10-minute breaks after each session / 60-minute “meal break” Planned

Duration

1a - Introducing Windows Phone 8 Application Development | Part 1 50:00

1b - Introducing Windows Phone 8 Application Development | Part 2 50:00

2 - Designing Windows Phone Apps 50:00

3 - Building Windows Phone Apps 50:00

4 - Files and Storage on Windows Phone 8 50:00

Meal Break | 60-minutes 60:00

5 - Windows Phone 8 Application Lifecycle 50:00

6 - Background Agents 25:00

7 - Tiles and Lock Screen Notifications 25:00

8 - Push Notifications 30:00

9 - Using Phone Resources on Windows Phone 8 50:00

Target Agenda | Day 2

Module and Topic | 10-minute breaks after each session / 60-minute “meal break” Planned

Duration

10 - App to App Communication 35:00

11 - Network Communication on Windows Phone 8 50:00

12 - Proximity Sensors and Bluetooth 35:00

13 - Speech Input on Windows Phone 8 35:00

14 - Maps and Location on Windows Phone 8 35:00

15 - Wallet Support 25:00

16 - In App Purchasing 25:00

Meal Break | 60-minutes 60:00

17 - The Windows Phone Store 50:00

18 - Enterprise Applications in Windows Phone 8: Architecture and Publishing 50:00

19 - Windows 8 and Windows Phone 8 Cross Platform Development 50:00

20 – Mobile Web 50:00

• Windows Design Language

• Designing an App

• Introduction to XAML Layout

• Styles and Themes

• Design Time Data

• Data Binding

• Lists and the LongListSelector

Module Agenda In this and the next module, we will go through the essential techniques you need to build an app

Windows Phone Design

• The Windows Phone team have taken a lot of trouble over the

look and feel of the phone

• They have created a design style, inspired by metropolitan

signage, to express this

• Programs on the phone should reflect this style

The Windows Phone Design Style

Windows Design Principles

Principle: Pride in craftsmanship

Take care of the details

Make it safe and reliable

Uncompromising Sensitivity to Weight, Balance and Scale

Align to the grid

Principle: Be fast and fluid

Life is mobile

Delight with motion

Design for touch

Intuitive interaction

Be responsive and ready

Immersive and compelling

Principle: Do more with less

Be great at something

Focused and direct

Content before chrome

Inspire confidence

Principle: Authentically Digital

Don’t Try to be What It’s NOT

Cloud connected

Dynamic and alive

Beautiful use of typography

Bold vibrant colours

Motion

Principle: Win as one

Fit into the UI model

Reduce redundancy

Work together to complete scenarios

Tools and templates are designed to scale

Principles

Pride in craftsmanship

Be Fast and Fluid

Win as One

Do More with Less

Authentically Digital

• To make life easier, the Windows Phone design style is “baked in” to the developer tools

• The default appearance, behaviour and fonts of user elements all match the style

• If you want to find out more about the Windows Phone Design Style you can read the

“User Experience Design Guidelines for Windows Phone”

• http://msdn.microsoft.com/en-us/library/hh202915.aspx

Windows Phone 8 SDK and the Windows Phone Design Style

Designing an App

Design on Paper Before You Touch the Tools!

12/4/2012 17

12:38

Text

Text

Text

Text

CONTOSO COOKBOOK

regions

12:38

Text

CONTOSO COOKBOOK

indian rec CONTOSO COOKBOOK

recipes ind

pivot

Text

Text

Text

Text

Contoso Cookbook Shows recipes grouped by regional style. User can view recipes, also add pictures and notes

Design App Navigation Early!

12/4/2012 18

12:38 CONTOSO COOKBOOK

regions

12:38

Regional recipes

12:38

Recipe Detail

12:38

About

12:38

Notes & Photos

Back Back Back

Back

• One way to get good looking programs is to separate the graphical design aspects from

the programming

• The designer can work on the look and feel of the application

• The programmer can implement the required behaviours

• XAML and the Windows Phone developer tools are designed to support this way of

working

Now Start Building With the Tools

• A UX designer can use Blend to specify the

appearance of the user interface

• A version of Blend for the phone is

supplied as part of the phone SDK

Tools for the Job: Graphical Design

• A Developer can take the user interface

design and use Visual Studio build the

program to make it work

• Visual Studio provides a design

environment but it is not as

advanced as Blend

Tools for the Job: Code Creation

• As programmers we probably start of just worrying about making the program work

• This is a very good place to start

• But in modern systems the “look and feel” of the user interface is very important

• No matter how good the code is, if the program is hard to use it will

not be popular

• You should pay careful attention to the user interface when making phone programs

• If you know any Graphic Designers it is worth getting them on your development team

Design Style and Programming

Project Templates and Components

• Windows Phone SDK provides a set of project templates

• Each of them maps onto a particular style of application

• Windows Phone App

• Basic single page app

• Windows Phone Databound App

• Project for creating a Windows Phone application using List and navigation controls

with a basic Model-View-ViewModel architecture

• Windows Phone Pivot App

• User can “pivot” between different screens by flicking left and right

• Windows Phone Panorama application

• A single panoramic background with pages of controls that the user

can pan between

Application Templates

Application Types

• Three application types provide quite different user experiences

• Select the one that you feel is the most appropriate

Introduction to XAML

Layout

• This is a Pivot page that displays details of a recipe

• Picture and directions on one pane

• Ingredients list on another pane

The Contoso Cookbook Recipe Details Page

Pivot Pages

• <phone:PhoneApplicationPage x:Class="ContosoCookbook.RecipeDetailPage" ... /> <Grid x:Name="LayoutRoot" Background="Transparent"> <phone:Pivot Title=“PIVOT APPLICATION">  <phone:PivotItem Header=“item1"> <Grid> </Grid> </phone:PivotItem>  <phone:PivotItem Header=“item2"> <Grid> </Grid> </phone:PivotItem> </phone:Pivot> </Grid> </phone:PhoneApplicationPage>

Pivot

Control Pivot

Headers

Pivot

Items

Control

• Every XAML element is a declaration of an object

• XAML stands for XML Application Markup Language

• XAML is a way of describing a UI using XML

• This is a declarative way of expressing your UI

• XAML elements == objects in the

System.Windows.Controls namespace

• Each of the items on the screen of the application shown

is a graphical rendering of an object

XAML and Objects

XAML Display Elements

Pivot title

Pivot item headers

Image

TextBlock

TextBlock

TextBlock

• Each of the elements contains properties that define how it appears on the screen

• Position on the screen

• Height and width

• Font colour and size etc..

• These values are used by XAML when the display is drawn

• If these value are changed by the program the appearance of the element will change

Display Element Properties

XAML Element Class Hierarchy

• The XAML class hierarchy is quite complex

• Everything is based on the FrameworkElement class which contains the fundamental properties of all elements

• You can derive your own components if you wish

FrameworkElement

TextBlock

TextBox ContentControl

ButtonBase

Button

Control

Elements and XAML

 <phone:PivotItem Header="recipe"> <Grid> <Grid.RowDefinitions> <RowDefinition Height="240"/> <RowDefinition Height="*"/> <RowDefinition Height="Auto"/> </Grid.RowDefinitions> <Image x:Name="RecipeImage" Stretch="UniformToFill"/> <ScrollViewer Grid.Row="1"> <TextBlock x:Name="DirectionsTextBlock" TextWrapping="Wrap" /> </ScrollViewer> <StackPanel Grid.Row="2" Orientation="Horizontal"> <TextBlock Text="Prep time: " /> <TextBlock MinWidth="200" x:Name="PrepTimeTextBlock" /> </StackPanel> </Grid> </phone:PivotItem>

Grid Container Element

 <phone:PivotItem Header="recipe"> <Grid> <Grid.RowDefinitions> <RowDefinition Height="240"/> <RowDefinition Height="*"/> <RowDefinition Height="Auto"/> </Grid.RowDefinitions> <Image x:Name="RecipeImage" Stretch="UniformToFill"/> <ScrollViewer Grid.Row="1"> <TextBlock x:Name="DirectionsTextBlock" TextWrapping="Wrap" /> </ScrollViewer> <StackPanel Grid.Row="2" Orientation="Horizontal" > <TextBlock Text="Prep time: " /> <TextBlock MinWidth="200" x:Name="PrepTimeTextBlock" /> </StackPanel> </Grid> </phone:PivotItem>

Demo 1: Laying out a Page

Styles and Themes

• You can set colors and font sizes for elements directly in XAML:

<ScrollViewer Grid.Row="1">

<TextBlock x:Name="DirectionsTextBlock" TextWrapping="Wrap"

Margin="12,0,0,0" Foreground="White" FontSize="12" />

</ScrollViewer>

<StackPanel Grid.Row="2" Orientation="Horizontal" Margin="12" HorizontalAlignment="Left" >

<TextBlock Text="Prep time: " Margin="0" Foreground="White"/>

<TextBlock x:Name="PrepTimeTextBlock" Foreground="LightGray" FontSize="24" />

</StackPanel>

• This is generally a BAD IDEA!

• Difficult to match builtin styles

• Difficult to work with Windows Phone Themes

Applying Styles to Elements

Foreground Colors and Themes

<phone:PivotItem Header="recipe">

<Grid>

<Grid.RowDefinitions>

<RowDefinition Height="240"/>

<RowDefinition Height="*"/>

<RowDefinition Height="Auto"/>

</Grid.RowDefinitions>

<Image x:Name="RecipeImage" Margin="12" Stretch="UniformToFill"/>


<TextBlock x:Name="DirectionsTextBlock" TextWrapping="Wrap"

Margin="12,0,0,0" Style="{StaticResource PhoneTextSmallStyle}" />

</ScrollViewer>


<TextBlock Text="Prep time: " Margin="0" Style="{StaticResource PhoneTextNormalStyle}" />

<TextBlock x:Name="PrepTimeTextBlock" Style="{StaticResource PhoneTextSubtleStyle}" />

</StackPanel>

</Grid>

</phone:PivotItem>

Use Built-In Styles

New in VS2012 – Apply Styles in Visual Studio

• Alignment of UI elements is important!

• The magic number in Windows Phone UI is 12px, or multiples of 12

• Your page should have a nice, visually crisp line that is 24 pixels from the left of the

device’s screen

• Gap between controls should be at least 12px

• Align on 12px increments… though 6px or 18px may also be appropriate

Alignment of Elements

Poor alignment of content with header

Page Margin not 24px

No spacing between elements

Fixing the Alignment of the Recipe Page

Visual Studio and Blend Alignment Grid

• Button at bottom of Designer window can be used to show a 12px alignment Grid

• Useful for setting alignment of elements

• Available in Blend

• Now also available in Visual Studio

• All new projects include AlignmentGrid.png in the Assets folder

• You can overlay the grid at design and runtime by uncommenting

the XAML that shows it

• Included near the foot of MainPage.xaml

• Copy to other pages to show on those





Alignment Grid Overlay

Using the Alignment Grid

<Image Source="/Assets/AlignmentGrid.png" VerticalAlignment="Top" Height="800" Width="480" Margin="0,-32,0,0" Grid.Row="0" Grid.RowSpan="2" IsHitTestVisible="False" />

<phone:PivotItem Header="recipe">

<Grid>


<RowDefinition Height="240"/>

<RowDefinition Height="*"/>

<RowDefinition Height="Auto"/>


<Image x:Name="RecipeImage" Margin="12" Stretch="UniformToFill"/>


<TextBlock x:Name="DirectionsTextBlock" TextWrapping="Wrap" Margin="12,0,0,0" />

</ScrollViewer>


<TextBlock Text="Prep time: " Margin="0" />

<TextBlock x:Name="PrepTimeTextBlock" />

</StackPanel>

</Grid>

</phone:PivotItem>

Use Margin Property to Insert Spacing

Demo 2:

Working with

Styles and

Alignment

Design-Time Data

Design-time data is essential for designers to get the full benefits of WYSIWYG designing

Blend allows you to create sample data, to import it from XML or generate it from an existing class

Generating Design-Time Data

Easiest way is to define your data class in Visual Studio

Use ‘Create Sample Data from Class’ feature in Expression Blend to generate the design-time data

Creating Sample Data From Class

Easily edit the number of words Expression Blend generates for each string field

Edit the maximum length of each word

Edit Design-Time Data Format and Values

Edit Design-Time Data Format and Values

Edit the sample data XML file that Blend generates

Demo 3:

Design-Time Data

Data Binding

• Simplest way to program UI controls is to write your own “glue” to get and set

properties of controls

• e.g. , textBox1.Text = "Hello, world";

• In complex applications, such code quickly becomes unwieldy and error prone.

• Use XAML data binding to link your UI to a class in your application that contains

your application data

• A data class that is a source for data binding is called a ViewModel

• UI controls can get their display values automatically from properties of viewmodel class

• Changing the property, updates the display

• User input can automatically update the bound property of the viewmodel class

Data Binding

Data Binding in XAML

• Properties of controls can be bound to a public property of a data object • In the example above, the Text property of the TextBlock is bound to the Directions

property of some data source

• Define the data source by setting • The DataContext property of any containing FrameworkElement-derived class (a

containing control, the page, or the frame),

or • The ItemsSource property of a List control

<TextBlock x:Name="DirectionsTextBlock" TextWrapping="Wrap" Margin="12,0,0,0" Text="{Binding Directions}" />

Data Binding Modes

• The Mode property determines how changes are synchronized between the target control and data source • OneTime – Control property is set once to the data value and any subsequent

changes are ignored • OneWay – Changes in the data object are synchronized to the control property,

but changes in the control are not synchronized back to the data object • TwoWay – Changes in the data object are synchronized to the control property

and vice-versa

<TextBlock x:Name="DirectionsTextBlock" TextWrapping="Wrap" Margin="12,0,0,0" Text="{Binding Directions, Mode=OneWay}" />

INotifyPropertyChanged

• Data objects that take part in OneWay or TwoWay binding must implement the INotifyPropertyChanged interface • This interface requires only that the object publishes the PropertyChanged event

• Object must fire the PropertyChanged event whenever the value of one of its public properties changes

• The XAML runtime subscribes to this event and uses it to update databound UI elements

public class ItemViewModel : INotifyPropertyChanged { public event PropertyChangedEventHandler PropertyChanged; … }

Old style of implementation was error-prone because of use of ‘magic strings’

ViewModel Implementation in Windows Phone 7.1

public class ItemViewModel : INotifyPropertyChanged { private string _id; /// Sample ViewModel property; this property is used to identify the object. public string ID { get { return _id; } set { if (value != _id) { _id = value; NotifyPropertyChanged("ID"); } } } public event PropertyChangedEventHandler PropertyChanged; private void NotifyPropertyChanged(String propertyName) { PropertyChangedEventHandler handler = PropertyChanged; if (null != handler) { handler(this, new PropertyChangedEventArgs(propertyName)); } } }

New style of implementation – CallerMemberName Attribute

ViewModel Implementation in Windows Phone 8.0

public class ItemViewModel : INotifyPropertyChanged { private string _id; public string ID { get { return _id; } set { this.SetProperty(ref this._id, value); } } public event PropertyChangedEventHandler PropertyChanged; protected bool SetProperty<T>(ref T storage, T value, [CallerMemberName] String propertyName = null) { if (object.Equals(storage, value)) return false; storage = value; this.OnPropertyChanged(propertyName); return true; } protected void OnPropertyChanged([CallerMemberName] string propertyName = null) { var eventHandler = this.PropertyChanged; if (eventHandler != null) eventHandler(this, new PropertyChangedEventArgs(propertyName)); } }

• List controls can bind to collections of items

• Set the ItemsSource property to a collection of data objects

• For one way or two way databinding to work, this must be an ObservableCollection

• Items inside an ObservableCollection need to implement INotifyPropertyChanged

Binding to Lists

<ListBox x:Name="IngredientsLIstBox" ItemTemplate="{StaticResource StringTemplate}" ItemsSource="{Binding Ingredients}"/>

Observable Collections

/// <summary> /// A collection for ItemViewModel objects. /// </summary> public ObservableCollection<ItemViewModel> Items { get; private set; } public void LoadData() { this.Items.Add(new ItemViewModel() { ID = "0", LineOne = "runtime one", LineTwo = ... }); this.Items.Add(new ItemViewModel() { ID = "1", LineOne = "runtime two", LineTwo = ... }); this.Items.Add(new ItemViewModel() { ID = "2", LineOne = "runtime three", LineTwo = ... }); }

MVVM

• MVVM stands for Model – View – ViewModel

• MVVM is an architectural pattern that employs Databinding and strict separation of concerns • Model – a class or classes that exposes the data of your application, either fetched from local data

storage or externally such as a web service • ViewModel – a class or classes that has properties and methods that can be used to databind to a

View • View – a class or classes that implement the presentation functionality of your application, displaying

data and accepting user input. A View should contain no application logic and is bound to a ViewModel class

• See • Implementing the Model-View-ViewModel Pattern in a Windows Phone Application:

http://msdn.microsoft.com/en-us/library/windowsphone/develop/gg521153(v=vs.92).aspx • MVVMLite framework: http://galasoft.ch/mvvm/

http://msdn.microsoft.com/en-us/library/windowsphone/develop/gg521153(v=vs.92).aspx



http://galasoft.ch/mvvm/

Demo 4: Data Binding

Designing Lists

LongListSelector

• ListBox++

• Flat lists

• Grouped lists – with headers

• Jump List

• Supports full UI and data virtualization

• Formerly in the Silverlight Toolkit • Now in ROM for good performance • Use instead of ListBox – this is the

preferred List control!

List Item Rendering

• All Lists – ListBox, LongListSelector – have no default rendering for data items

• If you simply bind the ItemsSource property to a collection of objects, all you get displayed in the list for each item is the name of the data object type

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"> <phone:LongListSelector x:Name="lstGroups" ItemsSource="{Binding ItemGroups}" SelectionChanged="lstGroups_SelectionChanged" > </phone:LongListSelector> </Grid>

• In Blend, if you drag a

collection from the Data

window onto the design

surface while in List mode, it

generates a ListBox and

attempts a default rendering

for list items

• Manually change to a

phone:LongListSelector in

the XAML

Generating Lists from Design-time Data

‘List’

mode

• All the different elements that affect how a list displays content can be customised

• Each aspect is controlled by a template. For the LongListSelector, there are many:

• GroupFooterTemplate – area that shows at end of each group if LLS used to show grouped items

• GroupHeaderTemplate – area that shows at top of each group if LLS used to show grouped items

• ItemTemplate – layout for each data item

• JumpListStyle – layout of items in the Jump List, if enabled

• ListFooterTemplate – area that shows at the foot of the whole list

• ListHeaderTemplate – area that shows at the top of the whole list

• To change the layout of how each data item displays, we need to modify the ItemTemplate

Lists and Templates

Modifying the ItemTemplate in Blend

• Right-click on the list control,

then access the Edit Additional

Templates menu

• Design the controls in the

template

<phone:PhoneApplicationPage.Resources>

<DataTemplate x:Key="RecipeDataGroupTemplate">

<Grid Margin="5" >

<Grid.ColumnDefinitions>

<ColumnDefinition Width="150"/>

<ColumnDefinition Width="*"/>

</Grid.ColumnDefinitions>


<RowDefinition/>

<RowDefinition/>


<Image Source="{Binding BackgroundImage}" Width="150" Stretch="UniformToFill" Grid.RowSpan="2"/>

<TextBlock Text="{Binding Title}" Grid.Column="1" Grid.Row="0" Style="{StaticResource …}"/>

<TextBlock Text="{Binding Description}" Grid.Column="1" Grid.Row="1" Style="{StaticResource …}" />

</Grid>

</DataTemplate>

</phone:PhoneApplicationPage.Resources>

DataTemplate in XAML

Demo 5:

Data Templates and Lists

• Windows Phone Design has five key principles:

• Clean, Light, Open, Fast

• Celebrate Typography

• Alive in Motion

• Content, Not Chrome

• Authentically Digital

• Windows Phone applications use XAML to express the design of their user interface

• The design is expressed in a XAML text file that defines and arranges display elements

• There are a set of project templates for applications based on the Windows Phone design

• In Blend, you can create design-time data to aid during design of a UI

• Databinding in XAML allows you to declaratively markup UI elements to link them to a property of a data class

• List controls define layout using XAML Templates

Review

The information herein is for informational

purposes only an represents the current view of

Microsoft Corporation as of the date of this

presentation. Because Microsoft must respond

to changing market conditions, it should not be

interpreted to be a commitment on the part of

Microsoft, and Microsoft cannot guarantee the

accuracy of any information provided after the

date of this presentation.

© 2012 Microsoft Corporation.

All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.

MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION

IN THIS PRESENTATION.

s2 designing wp8 applications

Documents

app windows phone design

windows phone http

windows phone team

windows phone store

building windows phone

phone resources

windows design language

app design