02.Designing Windows Phone Application
-
Upload
nguyen-tuan -
Category
Mobile
-
view
72 -
download
1
description
Transcript of 02.Designing Windows Phone Application
Nguyen Tuan | Microsoft Certified Trainer
• Windows Design
• Designing an Applications
• Working with XAML Layout
• Styles & Themes in WP8.
• Design Considerations
• Model-View-ViewModel
• Application Lifecycle
Agenda
8/16/2014 3
Windows Phone Design
Metro styles or Windows Phone Design Style?
• 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
4
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
Principles: 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
13
Paper prototyping
User Experience Bar Document
18
19
20
21
22
23
24
Introduction to XAML Layout
8/16/201425
Pivot Pages• <phone:PhoneApplicationPage
x:Class="ContosoCookbook.RecipeDetailPage"... />
<Grid x:Name="LayoutRoot" Background="Transparent"><phone:Pivot Title=“PIVOT APPLICATION">
<!--Pivot item one--><phone:PivotItem Header=“item1">
<Grid></Grid>
</phone:PivotItem><!--Pivot item two--><phone:PivotItem Header=“item2">
<Grid></Grid>
</phone:PivotItem></phone:Pivot>
</Grid></phone:PhoneApplicationPage>
27
Pivot Control
Pivot Headers
Pivot Items Control
29
30
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
31
FrameworkElement
TextBlock
TextBox ContentControl
ButtonBase
Button
Control
Elements and XAML
32
<!--Pivot item one--><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
33
<!--Pivot item one--><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>
8/16/2014 34
• 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
Visual Studio and Blend Alignment Grid
8/16/2014 35
• 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
<!--Uncomment to see an alignment grid to help ensure your controls are
aligned on common boundaries. The image has a top margin of -32px to
account for the System Tray. Set this to 0 (or remove the margin altogether)
if the System Tray is hidden.
Before shipping remove this XAML and the image itself.-->
<!--<Image Source="/Assets/AlignmentGrid.png" VerticalAlignment="Top" Height="800" Width="480" Margin="0,-32,0,0" Grid.Row="0"
Grid.RowSpan="2" IsHitTestVisible="False" />-->
Alignment Grid Overlay
36
Using the Alignment Grid
8/16/2014 37
<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>
<Grid.RowDefinitions><RowDefinition Height="240"/><RowDefinition Height="*"/><RowDefinition Height="Auto"/>
</Grid.RowDefinitions><Image x:Name="RecipeImage" Margin="12" Stretch="UniformToFill"/><ScrollViewer Grid.Row="1">
<TextBlock x:Name="DirectionsTextBlock" TextWrapping="Wrap" Margin="12,0,0,0" /></ScrollViewer><StackPanel Grid.Row="2" Orientation="Horizontal" Margin="12" HorizontalAlignment="Left" >
<TextBlock Text="Prep time: " Margin="0" /><TextBlock x:Name="PrepTimeTextBlock" />
</StackPanel></Grid>
</phone:PivotItem>
Use Margin Property to Insert Spacing
38
DemoGridsRowsAndColumns
Styles and Themes
8/16/2014
• 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
8/16/2014 41
Foreground Colors and Themes
8/16/2014 42
<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"/><ScrollViewer Grid.Row="1"><TextBlock x:Name="DirectionsTextBlock" TextWrapping="Wrap"
Margin="12,0,0,0" Style="{StaticResource PhoneTextSmallStyle}" /></ScrollViewer><StackPanel Grid.Row="2" Orientation="Horizontal" Margin="12" HorizontalAlignment="Left" ><TextBlock Text="Prep time: " Margin="0" Style="{StaticResource PhoneTextNormalStyle}" /><TextBlock x:Name="PrepTimeTextBlock" Style="{StaticResource PhoneTextSubtleStyle}" />
</StackPanel></Grid>
</phone:PivotItem>
Use Built-In Styles
43
New in VS2012 – Apply Styles in Visual Studio
8/16/2014 44
DemoAlignmentAndMargins
The MVVM pattern
From MVC
Model View
Controller
Presentation Model(ViewModel)
To MVVM
Model View
The relationships
View
ViewModel
DataBinding Commands ServicesMessages
Model
Commands
“Point of entry” for a method Can be data boundICommand interface
Execute methodCanExecute methodCanExecuteChanged event
Implementing commands
It’s quite a lot of workMost toolkits and frameworks have a “relay” implementation
RelayCommand (MVVM Light)DelegateCommand (PRISM)…
Why MVVM?
Model
public class KittenObject{
public KittenObject() { }public string KittenImage { get; set; }public string KittenName { get; set; }public string KittenAge { get; set; }
}
Why MVVM?
ViewModel
public class MainViewModel : INotifyPropertyChanged{
public event PropertyChangedEventHandler PropertyChanged;private void NotifyPropertyChanged(String propertyName){
PropertyChangedEventHandler handler = PropertyChanged;if (null != handler){
handler(this, new PropertyChangedEventArgs(propertyName));}
}}
Why MVVM?
ViewModel
private string _sampleProperty = "my start value";public string SampleProperty{
get { return _sampleProperty; }set{
_sampleProperty = value;NotifyPropertyChanged("SampleProperty");
}}
Why MVVM?
View
<TextBlock Text="{Binding SampleProperty, Mode=TwoWay}" />
Why MVVM?
View
<phone:LongListSelectorItemsSource="{Binding MyListOfItems}"SelectedItem="{Binding MySelectedItem, Mode=TwoWay}" />
Model-View-ViewModel
View
ViewModel
Commands
Data Binding
Model
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="ContentText" Text="{Binding LineThree, Mode=OneWay}"/>
• In the XAML snippet, make sure that the DataContext is set to an instance of the ViewModel class.
• The ViewModel class exposes an AddCommand property of type AddItemCommand
• The ViewModel is responsible for actually adding a new item
Commands
<Button Command="{Binding AddCommand}"
CommandParameter="Untitled" Content="Button"
HorizontalAlignment="Center"
VerticalAlignment="Center"/>
class AddItemCommand : ICommand
{
ViewModel _viewModel;
public AddItemCommand(ViewModel viewModel)
{
_viewModel = viewModel;
}
public event EventHandler CanExecuteChanged;
public bool CanExecute(object parameter)
{
return true;
}
public void Execute(object title)
{
_viewModel.AddItem(title as string);
}
}
MVVM Benefits
• Reuse Model and View-Model code
• Test the ViewModel with unit tests
• Maintainability
• Can show design-time data in Expression Blend and the Visual Studio designer
DemoSimpleDataBinding
MVVM Libraries
http://caliburnmicro.codeplex.com/http://mvvmlight.codeplex.com/
Rob EisenbergLaurent Bugnion
Not running
Running
Launching
Running
Not running
Running
LaunchingClosing
Deactivating
Dormant
ExitApplication_Closing
DeactivateApplication_Deactivated
Closing vs Deactivating
Dormant
Not running
Running
LaunchingClosing
DeactivatingActivating
Dormant
Dormant
Tombstoned
Not running
Running
LaunchingClosing
DeactivatingActivating
Dormant
Tombstoned
Tombstoned
Not running
Running
LaunchingClosing
DeactivatingActivating
Dormant
Tombstoned or Dormant?
private void Application_Activated(object sender, ActivatedEventArgs e){
if (e.IsApplicationInstancePreserved){
// Dormant - objects in memory intact}else{
// Tombstoned - need to reload}
}
Fast Application Resume
Tombstoned
Not running
Running
LaunchingClosing
DeactivatingActivating
Dormant
Enabling FAR in Properties\WMAppManifest.xml
<Tasks><DefaultTask Name ="_default" NavigationPage="MainPage.xaml">
<BackgroundExecution><ExecutionType Name="LocationTracking" />
</BackgroundExecution></DefaultTask>
</Tasks>
<Tasks><DefaultTask Name ="_default“ NavigationPage="MainPage.xaml“ />
</Tasks>
Why Not Use FAR All The Time?
Launch from Start
Page 1 Page 2
Launch from Start
Page 2deep link
Why Not Use FAR All The Time?
Launch from Start
Page 1 Page 2
Launch from Start
Page 2FARPage 1
Demo1. AppLifeCycle2. Lifetime
Review
• Windows Phone Design has five key principles:• Clean, Light, Open, Fast• Celebrate Typography• Alive in Motion• Content, Not Chrome• Authentically Digital
• WP8 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