This document provides an overview and agenda for building Windows Phone applications using various controls like buttons, text boxes, lists and list items. It discusses core controls, styles, templates, user controls, list controls and templates, grouping data, progressive item rendering and references for additional information. The goal is to introduce developers to essential controls and best practices for creating user interfaces and handling lists of data on Windows Phone.

1. Building Windows Phone
Applications
Nguyen Tuan | Microsoft Certified Trainer

2. Agenda
• Controls:
• Border.
• Button.
• Canvas.
• Checkbox.
• RadioButton.
• HyperlinkButton.
• TextBox.
• PasswordBox.
• TextBlock.
• Lists, List Items:
• Lists and List Items
• List Controls and capabilities
• Creating list items
• Grouped lists and grouping navigation
• Long lists and best practices

3. controls

4. Controls
• Reusable units for presentation
• Defined UI/Interaction patterns
• Input
• Feedback
• Consistency with OS
• Familiarity to the user

5. Content model
• ContentControl
• ButtonBase
• Button, RepeatButton, ToggleButton  RadioButton, CheckBox
• UserControl
• ItemsControl
• ListBox, DataGrid, TreeView, ToolBar, TabControl, GridView (Win8),
ListView

6. Core Controls
ToggleSwitch
CheckBox
Button
Hyperlink Button
Radio buttons
ProgressBar
(indeterminate)
ProgressBar
(determinate)
ProgressRing
Slider

7. Core Controls (part 2 )
TextBox
PasswordBox
TextBox
(Multiline)
ComboBox
(with header)
ListBox
Image
Popup

8. Core Controls (part 3 )
Date & Time pickers
WebView

10. styles and templates

11. A collection of property values
• Grouped in a Style object
• Usually defined as a resource
Styles

12. Styles
<Style />
This is a text
And another

13. Extending Styles (BasedOn)

14. Lookless Controls
Controls have behavior
Visuals separate from implementation
• Defined in Xaml
• Defined by a designer
• Controls usually have a default “style”

15. Templates

17. TemplateBinding
• Template should honor control properties
• Background, Padding, etc.
• TemplateBinding connects properties
• Projects control properties onto the screen

18. UserControl
• Logical grouping of items.
• Can be reused.
• Has XAML front end and code-behind.

19. Demo:
PhoneToolkitSample

20. visual state manager

21. Visual States
[TemplateVisualState(GroupName = "CommonStates", Name = "Pressed")]
[TemplateVisualState(GroupName = "CommonStates", Name = "MouseOver")]
[TemplateVisualState(GroupName = "CommonStates", Name = "Normal")]
[TemplateVisualState(GroupName = "CommonStates", Name = "Disabled")]
[TemplateVisualState(GroupName = "FocusStates", Name = "Unfocused")]
[TemplateVisualState(GroupName = "FocusStates", Name = "Focused")]
public class Button : ButtonBase
{
…
}

22. Visual states
Click

23. VisualStateManager

25. • ListView
• GridView
• ListBox (last resort)
Controls for Lists of Things

26. ListView
• Vertical list of items
• Good for:
• Simple lists
• Grouped lists

27. GridView
• Grid of items
• Usually image-based items

28. List Control Templates
• HeaderTemplate
• FooterTemplate
• ItemTemplate
• ItemContainerStyle
• ItemsPanel
• GroupStyle
• ContainerStyle
• HeaderTemplate

29. List Headers and Footers
• HeaderTemplate displays at top of list
• FooterTemplate displays at bottom of list
• Scroll with list content (not sticky)
Reference:
http://msdn.microsoft.com/en-us/library/windows/apps/hh465319.aspx

30. List Item Templates
• ItemTemplate
• displays item data

31. List Item Templates
• ItemTemplate
• displays item data
• ItemContainerStyle
• displays item state

32. List Item Templates
• ItemTemplate
• displays item data
• ItemContainerStyle
• displays item state
• ItemsPanel
• manages item-by-item layout
<ItemsPanelTemplate x:Key="SampleItemsPanel">
<ItemsStackPanel Orientation="Vertical" />
</ItemsPanelTemplate>
<ItemsPanelTemplate x:Key="SampleItemsPanel">
<ItemsWrapGrid Orientation=“Horizontal" />
</ItemsPanelTemplate>

34. Reordering
• Items shift into floating UI
• Reordered with Tap-Hold + Drag
• Windows Phone
• Windows
• Grouped Lists cannot be reordered
MyListView.ReorderMode = ListViewReorderMode.Enabled;
MyListView.CanReorderItems = false;

35. MultiSelection
• Displays checkboxes for multi-selection
MyListView.SelectionMode =
ListViewSelectionMode.Multiple;

37. Grouping Data
• Grouping requires data as a
CollectionViewSource
• Or a list of lists (no JumpList)
37

38. Grouping Data
• JumpLists Require
- KeyedList
• or
- AlphaKeyGroup

39. Grouping Data – KeyedList
- Start with a list of data
- Use a KeyedList class
- Format the data using the following
LINQ query
var groupedItems =
from item in items
orderby item.SortProperty
group item by item.SortProperty into itemsByProperty
select new KeyedList<string, MyObject>(itemsByProperty);
List<KeyedList<string, SampleItem>> KeyedList = groupedItems.ToList();

40. Grouping Data – AlphaKeyGroup
- Start with a list of data
- Create an AlphaKeyGroup class
- Create grouping with:
var alphaKeyGroup = AlphaKeyGroup<SampleItem>.CreateGroups(
items, // basic list of items
(SampleItem s) => { return s.Title; }, // the property to sort
true); // order the items
// returns type List<AlphaKeyGroup<SampleItem>>

41. Grouping Data – CollectionViewSource
• Set DataContext to your page
• Place a CollectionViewSource in the Resources:
<CollectionViewSource
x:Key="ItemsGrouped"
IsSourceGrouped="True"
ItemsPath="InternalList"
Source="{Binding MyKeyedList, Source={Binding}}"/>
<ListView ItemsSource="{Binding Source={StaticResource ItemsGrouped}}" />

42. Grouping List UI
• Grouping Style and Template
<ListView.GroupStyle>
<GroupStyle HidesIfEmpty="True" >
<GroupStyle.HeaderTemplate>
…
<TextBlock Text="{Binding Key}" />
…
<GroupStyle.HeaderTemplate>
</GroupStyle>
</ListView.GroupStyle>

43. Grouping List Navigation
• Semntic Zoom
<SemanticZoom>
<SemanticZoom.ZoomedInView>
<!-- ListView or GridView -->
<!-- ItemsSource binds to
CollectionViewSource -->
</SemanticZoom.ZoomedInView>
<SemanticZoom.ZoomedOutView>
<!-- ListView or GridView -->
<!-- ItemsSource bound to
CollectionViewSource,
Path=CollectionGroups -->
</SemanticZoom.ZoomedOutView>
</SemanticZoom>

44. • ZoomedInView – default view
• ZoomedOutView
• triggered by group item interaction
• overlays the screen (Flyout)
• transparent background
Semantic Zoom Design
Reference:
http://msdn.microsoft.com/en-us/library/windows/apps/hh465319.aspx

47. Group layouts are virtualized
List controls renders elements near the viewport
Item Rendering and Group Virtualization

48. Progressive Item Rendering
Sed nec sodale
Alpine Ski House
Sed nec sodale
Alpine Ski House

49. ContainerContentChanging
Fires when item is realized
Items can be rendered in phases
<ListView ItemTemplate="{StaticResource SampleDataTemplate}"
ContainerContentChanging="IncrementalUpdateHandler" >
private void IncrementalUpdateHandler(ListViewBase sender, ContainerContentChangingEventArgs
args)
{
args.Handled = true;
if (args.Phase != 0)
throw new Exception("we will always be in phase 0");
else
{
// show a placeholder shape
args.RegisterUpdateCallback(ShowText);
}
}

50. ContainerContentChanging
Later phases will be skipped if too much time is needed
private void ShowText(ListViewBase sender, ContainerContentChangingEventArgs args)
{
args.Handled = true;
if (args.Phase != 1)
throw new Exception("we should always be in phase 1");
else
{
// show text from the template
args.RegisterUpdateCallback(ShowImage);
}
}

51. Phase priorities
1. Simple shapes (placeholder visuals)
2. Key text (title)
3. Other text (subtitle)
4. Images

52. Performance tip
Do not use Visibility to show/hide UIElements
this will fire a new ContainerContentChanging event
Instead, use “Opacity=0”

53. References
• http://msdn.microsoft.com/en-
us/library/windowsphone/develop/jj735581%28v=vs.105%29.aspx
• http://msdn.microsoft.com/en-
us/library/windows/apps/windows.ui.xaml.controls.semanticzoom.aspx