windows phone 8 - 2 designing wp8 applications
TRANSCRIPT
![Page 1: Windows Phone 8 - 2 Designing WP8 Applications](https://reader033.vdocument.in/reader033/viewer/2022060110/555ad947d8b42a024a8b4e40/html5/thumbnails/1.jpg)
Oliver Scheer
Senior Technical Evangelist
Microsoft Deutschland
http://the-oliver.com
Designing Windows Phone Applications
![Page 2: Windows Phone 8 - 2 Designing WP8 Applications](https://reader033.vdocument.in/reader033/viewer/2022060110/555ad947d8b42a024a8b4e40/html5/thumbnails/2.jpg)
AgendaDesigning 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
![Page 3: Windows Phone 8 - 2 Designing WP8 Applications](https://reader033.vdocument.in/reader033/viewer/2022060110/555ad947d8b42a024a8b4e40/html5/thumbnails/3.jpg)
04/12/2023Microsoft confidential3
Windows Phone Design
![Page 4: Windows Phone 8 - 2 Designing WP8 Applications](https://reader033.vdocument.in/reader033/viewer/2022060110/555ad947d8b42a024a8b4e40/html5/thumbnails/4.jpg)
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
![Page 5: Windows Phone 8 - 2 Designing WP8 Applications](https://reader033.vdocument.in/reader033/viewer/2022060110/555ad947d8b42a024a8b4e40/html5/thumbnails/5.jpg)
Windows Design Principles
![Page 6: Windows Phone 8 - 2 Designing WP8 Applications](https://reader033.vdocument.in/reader033/viewer/2022060110/555ad947d8b42a024a8b4e40/html5/thumbnails/6.jpg)
Principle: Pride in craftsmanship
Take care of the details
Make it safe and reliableUncompromising Sensitivity to Weight, Balance and Scale
Align to the grid
![Page 7: Windows Phone 8 - 2 Designing WP8 Applications](https://reader033.vdocument.in/reader033/viewer/2022060110/555ad947d8b42a024a8b4e40/html5/thumbnails/7.jpg)
Principle: Be fast and fluid
Life is mobile
Delight with motion
Design for touch
Intuitive interaction
Be responsive and ready
Immersive and compelling
![Page 8: Windows Phone 8 - 2 Designing WP8 Applications](https://reader033.vdocument.in/reader033/viewer/2022060110/555ad947d8b42a024a8b4e40/html5/thumbnails/8.jpg)
Principle: Do more with less
Be great at something
Focused and direct
Content before chrome
Inspire confidence
![Page 9: Windows Phone 8 - 2 Designing WP8 Applications](https://reader033.vdocument.in/reader033/viewer/2022060110/555ad947d8b42a024a8b4e40/html5/thumbnails/9.jpg)
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
![Page 10: Windows Phone 8 - 2 Designing WP8 Applications](https://reader033.vdocument.in/reader033/viewer/2022060110/555ad947d8b42a024a8b4e40/html5/thumbnails/10.jpg)
Principle: Win as one
Fit into the UI model
Reduce redundancy
Work together to complete scenarios
Tools and templates are designed to scale
![Page 11: Windows Phone 8 - 2 Designing WP8 Applications](https://reader033.vdocument.in/reader033/viewer/2022060110/555ad947d8b42a024a8b4e40/html5/thumbnails/11.jpg)
Principles
Pride in craftsmanshipBe Fast and FluidWin as OneDo More with LessAuthentically Digital
![Page 12: Windows Phone 8 - 2 Designing WP8 Applications](https://reader033.vdocument.in/reader033/viewer/2022060110/555ad947d8b42a024a8b4e40/html5/thumbnails/12.jpg)
![Page 13: Windows Phone 8 - 2 Designing WP8 Applications](https://reader033.vdocument.in/reader033/viewer/2022060110/555ad947d8b42a024a8b4e40/html5/thumbnails/13.jpg)
13
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
![Page 14: Windows Phone 8 - 2 Designing WP8 Applications](https://reader033.vdocument.in/reader033/viewer/2022060110/555ad947d8b42a024a8b4e40/html5/thumbnails/14.jpg)
Designing an App
04/12/202314
![Page 15: Windows Phone 8 - 2 Designing WP8 Applications](https://reader033.vdocument.in/reader033/viewer/2022060110/555ad947d8b42a024a8b4e40/html5/thumbnails/15.jpg)
04/12/2023Microsoft confidential15
Design on Paper Before You Touch the Tools!
12:38
Tex
t
Tex
t
Tex
t
Tex
t
CONTOSO COOKBOOK
regions
12:38
Text
CONTOSO COOKBOOK
indian recCONTOSO COOKBOOK
recipes ind
pivot
Tex
t
Tex
t
Tex
t
Tex
t
12:38Contoso Cookbook
Shows recipes grouped by regional style. User can view recipes, also add pictures and notes
![Page 16: Windows Phone 8 - 2 Designing WP8 Applications](https://reader033.vdocument.in/reader033/viewer/2022060110/555ad947d8b42a024a8b4e40/html5/thumbnails/16.jpg)
04/12/2023Microsoft confidential16
Design App Navigation Early!
12:38CONTOSO COOKBOOK
regions
12:38
Regional recipes
12:38
Recipe Detail
12:38
About
12:38
Notes & Photos
Back BackBack
Back
![Page 17: Windows Phone 8 - 2 Designing WP8 Applications](https://reader033.vdocument.in/reader033/viewer/2022060110/555ad947d8b42a024a8b4e40/html5/thumbnails/17.jpg)
17
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
![Page 18: Windows Phone 8 - 2 Designing WP8 Applications](https://reader033.vdocument.in/reader033/viewer/2022060110/555ad947d8b42a024a8b4e40/html5/thumbnails/18.jpg)
18
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
![Page 19: Windows Phone 8 - 2 Designing WP8 Applications](https://reader033.vdocument.in/reader033/viewer/2022060110/555ad947d8b42a024a8b4e40/html5/thumbnails/19.jpg)
19
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
![Page 20: Windows Phone 8 - 2 Designing WP8 Applications](https://reader033.vdocument.in/reader033/viewer/2022060110/555ad947d8b42a024a8b4e40/html5/thumbnails/20.jpg)
20
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
![Page 21: Windows Phone 8 - 2 Designing WP8 Applications](https://reader033.vdocument.in/reader033/viewer/2022060110/555ad947d8b42a024a8b4e40/html5/thumbnails/21.jpg)
21
Project Templates and Components
•Windows Phone SDK provides
a set of project templates
• Each of them maps onto a
particular style of application
![Page 22: Windows Phone 8 - 2 Designing WP8 Applications](https://reader033.vdocument.in/reader033/viewer/2022060110/555ad947d8b42a024a8b4e40/html5/thumbnails/22.jpg)
22
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
![Page 23: Windows Phone 8 - 2 Designing WP8 Applications](https://reader033.vdocument.in/reader033/viewer/2022060110/555ad947d8b42a024a8b4e40/html5/thumbnails/23.jpg)
23
Application Types
• Three application types provide quite different user experiences
• Select the one that you feel is the most appropriate
![Page 24: Windows Phone 8 - 2 Designing WP8 Applications](https://reader033.vdocument.in/reader033/viewer/2022060110/555ad947d8b42a024a8b4e40/html5/thumbnails/24.jpg)
Introduction to XAML Layout
04/12/202324
![Page 25: Windows Phone 8 - 2 Designing WP8 Applications](https://reader033.vdocument.in/reader033/viewer/2022060110/555ad947d8b42a024a8b4e40/html5/thumbnails/25.jpg)
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
![Page 26: Windows Phone 8 - 2 Designing WP8 Applications](https://reader033.vdocument.in/reader033/viewer/2022060110/555ad947d8b42a024a8b4e40/html5/thumbnails/26.jpg)
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
![Page 27: Windows Phone 8 - 2 Designing WP8 Applications](https://reader033.vdocument.in/reader033/viewer/2022060110/555ad947d8b42a024a8b4e40/html5/thumbnails/27.jpg)
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
![Page 28: Windows Phone 8 - 2 Designing WP8 Applications](https://reader033.vdocument.in/reader033/viewer/2022060110/555ad947d8b42a024a8b4e40/html5/thumbnails/28.jpg)
28
XAML Display Elements
• Pivot title
• Pivot item headers
• Image
• TextBlock
• TextBlock
• TextBlock
![Page 29: Windows Phone 8 - 2 Designing WP8 Applications](https://reader033.vdocument.in/reader033/viewer/2022060110/555ad947d8b42a024a8b4e40/html5/thumbnails/29.jpg)
29
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
![Page 30: Windows Phone 8 - 2 Designing WP8 Applications](https://reader033.vdocument.in/reader033/viewer/2022060110/555ad947d8b42a024a8b4e40/html5/thumbnails/30.jpg)
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
FrameworkElement
TextBlock
TextBox ContentControl
ButtonBase
Button
Control
![Page 31: Windows Phone 8 - 2 Designing WP8 Applications](https://reader033.vdocument.in/reader033/viewer/2022060110/555ad947d8b42a024a8b4e40/html5/thumbnails/31.jpg)
31
Elements and XAML
<!--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>
![Page 32: Windows Phone 8 - 2 Designing WP8 Applications](https://reader033.vdocument.in/reader033/viewer/2022060110/555ad947d8b42a024a8b4e40/html5/thumbnails/32.jpg)
32
Grid Container Element
<!--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>
![Page 33: Windows Phone 8 - 2 Designing WP8 Applications](https://reader033.vdocument.in/reader033/viewer/2022060110/555ad947d8b42a024a8b4e40/html5/thumbnails/33.jpg)
• 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
04/12/202333
![Page 34: Windows Phone 8 - 2 Designing WP8 Applications](https://reader033.vdocument.in/reader033/viewer/2022060110/555ad947d8b42a024a8b4e40/html5/thumbnails/34.jpg)
04/12/2023Microsoft confidential34
• Poor alignment of content with
header
• Page Margin not 24px
•No spacing between elements
Fixing the Alignment of the Recipe Page
![Page 35: Windows Phone 8 - 2 Designing WP8 Applications](https://reader033.vdocument.in/reader033/viewer/2022060110/555ad947d8b42a024a8b4e40/html5/thumbnails/35.jpg)
04/12/2023Microsoft confidential35
• 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
![Page 36: Windows Phone 8 - 2 Designing WP8 Applications](https://reader033.vdocument.in/reader033/viewer/2022060110/555ad947d8b42a024a8b4e40/html5/thumbnails/36.jpg)
36
• 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
![Page 37: Windows Phone 8 - 2 Designing WP8 Applications](https://reader033.vdocument.in/reader033/viewer/2022060110/555ad947d8b42a024a8b4e40/html5/thumbnails/37.jpg)
04/12/2023Microsoft confidential37
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" />
![Page 38: Windows Phone 8 - 2 Designing WP8 Applications](https://reader033.vdocument.in/reader033/viewer/2022060110/555ad947d8b42a024a8b4e40/html5/thumbnails/38.jpg)
Microsoft confidential38
<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
![Page 39: Windows Phone 8 - 2 Designing WP8 Applications](https://reader033.vdocument.in/reader033/viewer/2022060110/555ad947d8b42a024a8b4e40/html5/thumbnails/39.jpg)
Demo 1: Laying out a Page
![Page 40: Windows Phone 8 - 2 Designing WP8 Applications](https://reader033.vdocument.in/reader033/viewer/2022060110/555ad947d8b42a024a8b4e40/html5/thumbnails/40.jpg)
04/12/2023
Styles and Themes
![Page 41: Windows Phone 8 - 2 Designing WP8 Applications](https://reader033.vdocument.in/reader033/viewer/2022060110/555ad947d8b42a024a8b4e40/html5/thumbnails/41.jpg)
04/12/2023Microsoft confidential41
• 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
![Page 42: Windows Phone 8 - 2 Designing WP8 Applications](https://reader033.vdocument.in/reader033/viewer/2022060110/555ad947d8b42a024a8b4e40/html5/thumbnails/42.jpg)
04/12/2023Microsoft confidential42
Foreground Colors and Themes
![Page 43: Windows Phone 8 - 2 Designing WP8 Applications](https://reader033.vdocument.in/reader033/viewer/2022060110/555ad947d8b42a024a8b4e40/html5/thumbnails/43.jpg)
Microsoft confidential43
<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
![Page 44: Windows Phone 8 - 2 Designing WP8 Applications](https://reader033.vdocument.in/reader033/viewer/2022060110/555ad947d8b42a024a8b4e40/html5/thumbnails/44.jpg)
04/12/2023Microsoft confidential44
New in VS2012 – Apply Styles in Visual Studio
![Page 45: Windows Phone 8 - 2 Designing WP8 Applications](https://reader033.vdocument.in/reader033/viewer/2022060110/555ad947d8b42a024a8b4e40/html5/thumbnails/45.jpg)
Demo 2: Working withStyles
![Page 46: Windows Phone 8 - 2 Designing WP8 Applications](https://reader033.vdocument.in/reader033/viewer/2022060110/555ad947d8b42a024a8b4e40/html5/thumbnails/46.jpg)
Design-Time Data
![Page 47: Windows Phone 8 - 2 Designing WP8 Applications](https://reader033.vdocument.in/reader033/viewer/2022060110/555ad947d8b42a024a8b4e40/html5/thumbnails/47.jpg)
Design-time data is essential for designers to get the full benefits of WYSIWYG designingBlend allows you to create sample data, to import it from XML or generate it from an existing class
Generating Design-Time Data
47
![Page 48: Windows Phone 8 - 2 Designing WP8 Applications](https://reader033.vdocument.in/reader033/viewer/2022060110/555ad947d8b42a024a8b4e40/html5/thumbnails/48.jpg)
Creating Sample Data From Class
Use ‘Create Sample Data from Class’ feature in Expression Blend to generate the design-time data
Easiest way is to define your data class in Visual Studio
![Page 49: Windows Phone 8 - 2 Designing WP8 Applications](https://reader033.vdocument.in/reader033/viewer/2022060110/555ad947d8b42a024a8b4e40/html5/thumbnails/49.jpg)
Edit Design-Time Data Format and Values
Easily edit the number of words Expression Blend generates for each string field
Edit the maximum length of each word
![Page 50: Windows Phone 8 - 2 Designing WP8 Applications](https://reader033.vdocument.in/reader033/viewer/2022060110/555ad947d8b42a024a8b4e40/html5/thumbnails/50.jpg)
Edit Design-Time Data Format and Values
Edit the sample data XML file that Blend generates
![Page 51: Windows Phone 8 - 2 Designing WP8 Applications](https://reader033.vdocument.in/reader033/viewer/2022060110/555ad947d8b42a024a8b4e40/html5/thumbnails/51.jpg)
Demo 3: Design-Time Data
![Page 52: Windows Phone 8 - 2 Designing WP8 Applications](https://reader033.vdocument.in/reader033/viewer/2022060110/555ad947d8b42a024a8b4e40/html5/thumbnails/52.jpg)
Data Binding
![Page 53: Windows Phone 8 - 2 Designing WP8 Applications](https://reader033.vdocument.in/reader033/viewer/2022060110/555ad947d8b42a024a8b4e40/html5/thumbnails/53.jpg)
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
![Page 54: Windows Phone 8 - 2 Designing WP8 Applications](https://reader033.vdocument.in/reader033/viewer/2022060110/555ad947d8b42a024a8b4e40/html5/thumbnails/54.jpg)
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}" />
![Page 55: Windows Phone 8 - 2 Designing WP8 Applications](https://reader033.vdocument.in/reader033/viewer/2022060110/555ad947d8b42a024a8b4e40/html5/thumbnails/55.jpg)
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}" />
![Page 56: Windows Phone 8 - 2 Designing WP8 Applications](https://reader033.vdocument.in/reader033/viewer/2022060110/555ad947d8b42a024a8b4e40/html5/thumbnails/56.jpg)
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;…}
![Page 57: Windows Phone 8 - 2 Designing WP8 Applications](https://reader033.vdocument.in/reader033/viewer/2022060110/555ad947d8b42a024a8b4e40/html5/thumbnails/57.jpg)
ViewModel Implementation in Windows Phone 7.1Old 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)); } }}
![Page 58: Windows Phone 8 - 2 Designing WP8 Applications](https://reader033.vdocument.in/reader033/viewer/2022060110/555ad947d8b42a024a8b4e40/html5/thumbnails/58.jpg)
ViewModel Implementation in Windows Phone 8.0New 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)); } }
![Page 59: Windows Phone 8 - 2 Designing WP8 Applications](https://reader033.vdocument.in/reader033/viewer/2022060110/555ad947d8b42a024a8b4e40/html5/thumbnails/59.jpg)
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}"/>
![Page 60: Windows Phone 8 - 2 Designing WP8 Applications](https://reader033.vdocument.in/reader033/viewer/2022060110/555ad947d8b42a024a8b4e40/html5/thumbnails/60.jpg)
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 = ... });}
![Page 61: Windows Phone 8 - 2 Designing WP8 Applications](https://reader033.vdocument.in/reader033/viewer/2022060110/555ad947d8b42a024a8b4e40/html5/thumbnails/61.jpg)
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/
![Page 62: Windows Phone 8 - 2 Designing WP8 Applications](https://reader033.vdocument.in/reader033/viewer/2022060110/555ad947d8b42a024a8b4e40/html5/thumbnails/62.jpg)
Demo 4: Data Binding
62
![Page 63: Windows Phone 8 - 2 Designing WP8 Applications](https://reader033.vdocument.in/reader033/viewer/2022060110/555ad947d8b42a024a8b4e40/html5/thumbnails/63.jpg)
Designing Lists
![Page 64: Windows Phone 8 - 2 Designing WP8 Applications](https://reader033.vdocument.in/reader033/viewer/2022060110/555ad947d8b42a024a8b4e40/html5/thumbnails/64.jpg)
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!
![Page 65: Windows Phone 8 - 2 Designing WP8 Applications](https://reader033.vdocument.in/reader033/viewer/2022060110/555ad947d8b42a024a8b4e40/html5/thumbnails/65.jpg)
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>
04/12/202365
![Page 66: Windows Phone 8 - 2 Designing WP8 Applications](https://reader033.vdocument.in/reader033/viewer/2022060110/555ad947d8b42a024a8b4e40/html5/thumbnails/66.jpg)
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
![Page 67: Windows Phone 8 - 2 Designing WP8 Applications](https://reader033.vdocument.in/reader033/viewer/2022060110/555ad947d8b42a024a8b4e40/html5/thumbnails/67.jpg)
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
ItemTemplate04/12/202367
![Page 68: Windows Phone 8 - 2 Designing WP8 Applications](https://reader033.vdocument.in/reader033/viewer/2022060110/555ad947d8b42a024a8b4e40/html5/thumbnails/68.jpg)
• Right-click on the list control, then
access the Edit Additional
Templates menu•Design the controls in the
template
Modifying the ItemTemplate in Blend
04/12/202368
![Page 69: Windows Phone 8 - 2 Designing WP8 Applications](https://reader033.vdocument.in/reader033/viewer/2022060110/555ad947d8b42a024a8b4e40/html5/thumbnails/69.jpg)
04/12/2023Microsoft confidential69
<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
![Page 70: Windows Phone 8 - 2 Designing WP8 Applications](https://reader033.vdocument.in/reader033/viewer/2022060110/555ad947d8b42a024a8b4e40/html5/thumbnails/70.jpg)
Demo 5: Data Templates and Lists
70
![Page 71: Windows Phone 8 - 2 Designing WP8 Applications](https://reader033.vdocument.in/reader033/viewer/2022060110/555ad947d8b42a024a8b4e40/html5/thumbnails/71.jpg)
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
![Page 72: Windows Phone 8 - 2 Designing WP8 Applications](https://reader033.vdocument.in/reader033/viewer/2022060110/555ad947d8b42a024a8b4e40/html5/thumbnails/72.jpg)
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.