Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Oliver Scheer
Senior Technical Evangelist
Microsoft Deutschland
http://the-oliver.com
Designing Windows Phone
Applications
Agenda
Designing Windows Phone Applications
In this and the
next module, we
will go through
the essential
techniques you
n...
3/17/2014Microsoft confidential3
Windows Phone
Design
The Windows Phone Design Style
• The Windows Phone team have taken a lot of trouble over the
look and feel of the phone
• ...
Windows Design Principles
Principle: Pride in craftsmanship
Take care of the details
Make it safe and reliable
Uncompromising Sensitivity to Weight,...
Principle: Be fast and fluid
Life is mobile
Delight with motion
Design for touch
Intuitive interaction
Be responsive and r...
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 typograp...
Principle: Win as one
Fit into the UI model
Reduce redundancy
Work together to complete scenarios
Tools and templates are ...
Principles
Pride in craftsmanship
Be Fast and Fluid
Win as One
Do More with Less
Authentically Digital
Windows Phone 8 SDK and the Windows Phone Design Style
• To make life easier for us the Windows Phone design style is “bak...
Designing an App
3/17/201414
Design on Paper Before You Touch the Tools!
3/17/2014Microsoft confidential15
12:38
Text
Text
Text
Text
CONTOSO COOKBOOK
r...
Design App Navigation Early!
3/17/2014Microsoft confidential16
12:38
CONTOSO COOKBOOK
regions
12:38
Regional recipes
12:38...
Now Start Building With the Tools
• One way to get good looking programs is to separate the graphical design aspects from
...
Tools for the Job: Graphical Design
• A UX designer can use Blend to specify the appearance
of the user interface
• A vers...
Tools for the Job: Code Creation
• A Developer can take the user interface design and use Visual Studio build the program ...
Design Style and Programming
• As programmers we probably start of just worrying about making the program work
• This is a...
Project Templates and Components
• Windows Phone SDK provides a
set of project templates
• Each of them maps onto a
partic...
Application Templates
• Windows Phone App
• Basic single page app
• Windows Phone Databound App
• Project for creating a W...
Application Types
• Three application types provide quite different user experiences
• Select the one that you feel is the...
Introduction to XAML
Layout
3/17/201424
The Contoso Cookbook Recipe Details Page
• This is a Pivot page that displays details of a recipe
• Picture and directions...
Pivot Pages
• <phone:PhoneApplicationPage
x:Class="ContosoCookbook.RecipeDetailPage"
... />
<Grid x:Name="LayoutRoot" Back...
XAML and Objects
• Every XAML element is a declaration of an object
• XAML stands for XML Application Markup Language
• XA...
XAML Display Elements
• Pivot title
• Pivot item headers
• Image
• TextBlock
• TextBlock
• TextBlock
28
Display Element Properties
• Each of the elements contains properties that define how it appears on the screen
• Position ...
XAML Element Class Hierarchy
• The XAML class hierarchy is
quite complex
• Everything is based on the FrameworkElement
cla...
Elements and XAML
31
<!--Pivot item one-->
<phone:PivotItem Header="recipe">
<Grid>
<Grid.RowDefinitions>
<RowDefinition H...
Grid Container Element
32
<!--Pivot item one-->
<phone:PivotItem Header="recipe">
<Grid>
<Grid.RowDefinitions>
<RowDefinit...
• Alignment of UI elements is important!
• The magic number in Windows Phone UI is 12px, or multiples of 12
• Your page sh...
• Poor alignment of content with header
• Page Margin not 24px
• No spacing between elements
Fixing the Alignment of the R...
• Button at bottom of Designer window can be used to
show a 12px alignment Grid
• Useful for setting alignment of elements...
• All new projects include AlignmentGrid.png in the Assets folder
• You can overlay the grid at design and runtime by unco...
Using the Alignment Grid
3/17/2014Microsoft confidential37
<Image Source="/Assets/AlignmentGrid.png" VerticalAlignment="To...
<phone:PivotItem Header="recipe">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="240"/>
<RowDefinition Height="*"/>
<...
Demo 1:
Laying out a
Page
Styles and Themes
3/17/2014
• You can set colors and font sizes for elements directly in XAML:
<ScrollViewer Grid.Row="1">
<TextBlock x:Name="Directio...
Foreground Colors and Themes
3/17/2014Microsoft confidential42
<phone:PivotItem Header="recipe">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="240"/>
<RowDefinition Height="*"/>
<...
New in VS2012 – Apply Styles in Visual Studio
3/17/2014Microsoft confidential44
Demo 2:
Working with
Styles
Design-Time Data
Design-time data is essential for
designers toget the full benefits
ofWYSIWYG designing
Blend allows you tocreate
sample d...
Creating Sample Data From Class
Edit Design-Time Data Format and Values
EasilyeditthenumberofwordsExpressionBlend
generatesforeachstringfield
Editthemaxim...
Edit Design-Time Data Format and Values
Edit the sample data XMLfile that Blend
generates
Demo 3:
Design-Time Data
Data Binding
Data Binding
• Simplest way to program UI controls is to write your own “glue” to get and set properties
of controls
• e.g...
Data Binding in XAML
• Properties of controls can be bound to a public property of a data object
• In the example above, t...
Data Binding Modes
• The Mode property determines how changes are synchronized between the target control
and data source
...
INotifyPropertyChanged
 Data objects that take part in OneWay or TwoWay binding must implement the
INotifyPropertyChanged...
ViewModel Implementation in Windows Phone 7.1
Old style of implementation was error-prone because of use of „magic strings...
ViewModel Implementation in Windows Phone 8.0
New style of implementation – CallerMemberName Attribute
public class ItemVi...
Binding to Lists
•List controls can bind to collections of items
•Set the ItemsSource property to a collection of data obj...
Observable Collections
60
/// <summary>
/// A collection for ItemViewModel objects.
/// </summary>
public ObservableCollec...
MVVM
• MVVM stands for Model – View – ViewModel
• MVVM is an architectural pattern that employs Databinding and strict sep...
Demo 4:
Data Binding
62
Designing Lists
LongListSelector
• ListBox++
• Flat lists
• Grouped lists – with headers
• Jump List
• Supports full UI and data virtualiz...
List Item Rendering
• All Lists – ListBox, LongListSelector – have no default rendering for
data items
• If you simply bin...
Generating Lists from Design-time Data
• In Blend, if you drag a collection from the Data window onto the design surface w...
Lists and Templates
• All the different elements that affect how a list displays content can be customised
• Each aspect i...
• Right-click on the list control, then
access the Edit Additional Templates
menu
• Design the controls in the
template
Mo...
<phone:PhoneApplicationPage.Resources>
<DataTemplate x:Key="RecipeDataGroupTemplate">
<Grid Margin="5" >
<Grid.ColumnDefin...
Demo 5:
Data Templates and
Lists
70
Review
• Windows Phone Design has five key principles:
• Clean, Light, Open, Fast
• Celebrate Typography
• Alive in Motion...
The information herein is for informational
purposes only an represents the current view of
Microsoft Corporation as of th...
Windows Phone 8 - 2 Designing WP8 Applications
Upcoming SlideShare
Loading in …5
×

Windows Phone 8 - 2 Designing WP8 Applications

2,878 views

Published on

Published in: Technology
  • Be the first to comment

Windows Phone 8 - 2 Designing WP8 Applications

  1. 1. Oliver Scheer Senior Technical Evangelist Microsoft Deutschland http://the-oliver.com Designing Windows Phone Applications
  2. 2. Agenda Designing Windows Phone Applications In this and the next module, we will go through the essential techniques you need to build an application In this module: • Windows Design Language • Designing an App • Introduction to XAML Layout • Styles and Themes • Design Time Data • Data Binding • Lists and the LongListSelector
  3. 3. 3/17/2014Microsoft confidential3 Windows Phone Design
  4. 4. The 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
  5. 5. Windows Design Principles
  6. 6. 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
  7. 7. Principle: Be fast and fluid Life is mobile Delight with motion Design for touch Intuitive interaction Be responsive and ready Immersive and compelling
  8. 8. Principle: Do more with less Be great at something Focused and direct Content before chrome Inspire confidence
  9. 9. 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
  10. 10. Principle: Win as one Fit into the UI model Reduce redundancy Work together to complete scenarios Tools and templates are designed to scale
  11. 11. Principles Pride in craftsmanship Be Fast and Fluid Win as One Do More with Less Authentically Digital
  12. 12. Windows Phone 8 SDK and the Windows Phone Design Style • To make life easier for us the Windows Phone design style is “baked in” to the developer tools • The default appearance, behaviour and fonts of the 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 13
  13. 13. Designing an App 3/17/201414
  14. 14. Design on Paper Before You Touch the Tools! 3/17/2014Microsoft confidential15 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
  15. 15. Design App Navigation Early! 3/17/2014Microsoft confidential16 12:38 CONTOSO COOKBOOK regions 12:38 Regional recipes 12:38 Recipe Detail 12:38 About 12:38 Notes & Photos Back BackBack Back
  16. 16. Now Start Building With the Tools • 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 17
  17. 17. Tools for the Job: Graphical Design • 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 18
  18. 18. Tools for the Job: Code Creation • 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 19
  19. 19. Design Style and Programming • 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 20
  20. 20. Project Templates and Components • Windows Phone SDK provides a set of project templates • Each of them maps onto a particular style of application 21
  21. 21. Application Templates • 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 22
  22. 22. Application Types • Three application types provide quite different user experiences • Select the one that you feel is the most appropriate 23
  23. 23. Introduction to XAML Layout 3/17/201424
  24. 24. The Contoso Cookbook Recipe Details Page • This is a Pivot page that displays details of a recipe • Picture and directions on one pane • Ingredients list on another pane
  25. 25. 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> 26 Pivot Control Pivot Headers Pivot Items Control
  26. 26. XAML and Objects • 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
  27. 27. XAML Display Elements • Pivot title • Pivot item headers • Image • TextBlock • TextBlock • TextBlock 28
  28. 28. Display Element Properties • 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 29
  29. 29. 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 30 FrameworkElement TextBlock TextBox ContentControl ButtonBase Button Control
  30. 30. Elements and XAML 31 <!--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>
  31. 31. Grid Container Element 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>
  32. 32. • 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 3/17/201433
  33. 33. • Poor alignment of content with header • Page Margin not 24px • No spacing between elements Fixing the Alignment of the Recipe Page 3/17/2014Microsoft confidential34
  34. 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 3/17/2014Microsoft confidential35
  35. 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
  36. 36. Using the Alignment Grid 3/17/2014Microsoft confidential37 <Image Source="/Assets/AlignmentGrid.png" VerticalAlignment="Top" Height="800" Width="480" Margin="0,-32,0,0" Grid.Row="0" Grid.RowSpan="2" IsHitTestVisible="False" />
  37. 37. <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 Microsoft confidential38
  38. 38. Demo 1: Laying out a Page
  39. 39. Styles and Themes 3/17/2014
  40. 40. • 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 3/17/2014Microsoft confidential41
  41. 41. Foreground Colors and Themes 3/17/2014Microsoft confidential42
  42. 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 Microsoft confidential43
  43. 43. New in VS2012 – Apply Styles in Visual Studio 3/17/2014Microsoft confidential44
  44. 44. Demo 2: Working with Styles
  45. 45. Design-Time Data
  46. 46. Design-time data is essential for designers toget the full benefits ofWYSIWYG designing Blend allows you tocreate sample data, toimport it from XMLor generate it from an existing class Generating Design-Time Data 47
  47. 47. Creating Sample Data From Class
  48. 48. Edit Design-Time Data Format and Values EasilyeditthenumberofwordsExpressionBlend generatesforeachstringfield Editthemaximumlengthofeachword
  49. 49. Edit Design-Time Data Format and Values Edit the sample data XMLfile that Blend generates
  50. 50. Demo 3: Design-Time Data
  51. 51. Data Binding
  52. 52. 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 the viewmodel class • Changing the property, updates the display • User input can automatically update the bound property of the viewmodel class
  53. 53. 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}" />
  54. 54. 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}" />
  55. 55. 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; … }
  56. 56. ViewModel Implementation in Windows Phone 7.1 Old style of implementation was error-prone because of use of „magic strings‟ 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)); } } }
  57. 57. ViewModel Implementation in Windows Phone 8.0 New style of implementation – CallerMemberName Attribute 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)); } }
  58. 58. Binding to Lists •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 <ListBox x:Name="IngredientsLIstBox" ItemTemplate="{StaticResource StringTemplate}" ItemsSource="{Binding Ingredients}"/>
  59. 59. Observable Collections 60 /// <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 = ... }); }
  60. 60. 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/
  61. 61. Demo 4: Data Binding 62
  62. 62. Designing Lists
  63. 63. 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!
  64. 64. 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> 3/17/201465
  65. 65. Generating Lists from Design-time Data • 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 66 „List‟ mode
  66. 66. Lists and Templates • 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 3/17/201467
  67. 67. • Right-click on the list control, then access the Edit Additional Templates menu • Design the controls in the template Modifying the ItemTemplate in Blend 3/17/201468
  68. 68. <phone:PhoneApplicationPage.Resources> <DataTemplate x:Key="RecipeDataGroupTemplate"> <Grid Margin="5" > <Grid.ColumnDefinitions> <ColumnDefinition Width="150"/> <ColumnDefinition Width="*"/> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition/> <RowDefinition/> </Grid.RowDefinitions> <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 3/17/2014Microsoft confidential69
  69. 69. Demo 5: Data Templates and Lists 70
  70. 70. Review • 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
  71. 71. 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.

×