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
Dont Try to be What Its 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
<Grid>
<Image x:Name="RecipeImage" Stretch="UniformToFill"/>
<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:
<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
<Grid>
<Image x:Name="RecipeImage" Margin="12" Stretch="UniformToFill"/>
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
devices 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" />
<Grid>
<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
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
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
{
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");
}
}
}

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
{
private string _id;
public string ID
{
get { return _id; }
set { this.SetProperty(ref this._id, value); }
}


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/
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

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

S2 Designing WP8 Applications

Uploaded by

Copyright:

Available Formats

M2: Designing Windows

You might also like