Building Windows PhoneApplications

Nguyen Tuan | Microsoft Certified Trainer

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

controls

Controls

• Reusable units for presentation

• Defined UI/Interaction patterns

• Input

• Feedback

• Consistency with OS

• Familiarity to the user

Content model

• ContentControl

• ButtonBase• Button, RepeatButton, ToggleButton RadioButton, CheckBox

• UserControl

• ItemsControl

• ListBox, DataGrid, TreeView, ToolBar, TabControl, GridView (Win8), ListView

Core Controls

ToggleSwitch

CheckBox

Button

Hyperlink Button

Radio buttons

ProgressBar(indeterminate)

ProgressBar(determinate)

ProgressRing

Slider

Core Controls (part 2 )

TextBox

PasswordBox

TextBox(Multiline)

ComboBox(with header)

ListBox

Image

Popup

Core Controls (part 3 )

Date & Time pickers

WebView

styles and templates

A collection of property values

• Grouped in a Style object

• Usually defined as a resource

Styles

Styles

<Style />

This is a text

And another

Extending Styles (BasedOn)

Lookless ControlsControls have behavior

Visuals separate from implementation

• Defined in Xaml

• Defined by a designer

• Controls usually have a default “style”

Templates

TemplateBinding• Template should honor control properties

• Background, Padding, etc.

• TemplateBinding connects properties

• Projects control properties onto the screen

UserControl• Logical grouping of items.

• Can be reused.

• Has XAML front end and code-behind.

Demo:PhoneToolkitSample

visual state manager

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{

… }

Visual states

Click

VisualStateManager

• ListView

• GridView

• ListBox (last resort)

Controls for Lists of Things

ListView• Vertical list of items

• Good for:• Simple lists

• Grouped lists

GridView• Grid of items

• Usually image-based items

List Control Templates• HeaderTemplate

• FooterTemplate

• ItemTemplate

• ItemContainerStyle

• ItemsPanel

• GroupStyle• ContainerStyle

• HeaderTemplate

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

List Item Templates

• ItemTemplate• displays item data

List Item Templates• ItemTemplate

• displays item data

• ItemContainerStyle• displays item state

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>

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;

MultiSelection• Displays checkboxes for multi-selection

MyListView.SelectionMode = ListViewSelectionMode.Multiple;

Grouping Data• Grouping requires data as a

CollectionViewSource

• Or a list of lists (no JumpList)

37

Grouping Data• JumpLists Require

- KeyedList

• or

- AlphaKeyGroup

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 itemsorderby item.SortPropertygroup item by item.SortProperty into itemsByPropertyselect new KeyedList<string, MyObject>(itemsByProperty);

List<KeyedList<string, SampleItem>> KeyedList = groupedItems.ToList();

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

Grouping Data – CollectionViewSource

• Set DataContext to your page

• Place a CollectionViewSource in the Resources:

<CollectionViewSourcex:Key="ItemsGrouped"IsSourceGrouped="True"ItemsPath="InternalList"Source="{Binding MyKeyedList, Source={Binding}}"/>

<ListView ItemsSource="{Binding Source={StaticResource ItemsGrouped}}" />

Grouping List UI• Grouping Style and Template

<ListView.GroupStyle>

<GroupStyle HidesIfEmpty="True" >

<GroupStyle.HeaderTemplate>…<TextBlock Text="{Binding Key}" />…

<GroupStyle.HeaderTemplate>

</GroupStyle>

</ListView.GroupStyle>

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>

• 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

Group layouts are virtualized

List controls renders elements near the viewport

Item Rendering and Group Virtualization

Progressive Item Rendering

Sed nec sodaleAlpine Ski House

Sed nec sodaleAlpine Ski House

ContainerContentChanging

Fires when item is realized

Items can be rendered in phases

<ListView ItemTemplate="{StaticResource SampleDataTemplate}"ContainerContentChanging="IncrementalUpdateHandler" >

private void IncrementalUpdateHandler(ListViewBase sender, ContainerContentChangingEventArgsargs){

args.Handled = true;if (args.Phase != 0)

throw new Exception("we will always be in phase 0");else{

// show a placeholder shapeargs.RegisterUpdateCallback(ShowText);

}}

ContainerContentChangingLater 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 templateargs.RegisterUpdateCallback(ShowImage);

}}

Phase priorities1. Simple shapes (placeholder visuals)

2. Key text (title)

3. Other text (subtitle)

4. Images

Performance tip

Do not use Visibility to show/hide UIElements

this will fire a new ContainerContentChanging event

Instead, use “Opacity=0”

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