Matthias Shapiro @matthiasshapAndy Wigley @andy_wigley

Lists and List Items in Windows Runtime Apps

WinRT App

29 April 2014

Building Apps for Windows Phone 8.1 Jump Start

Building Windows Runtime Apps using C# and XAML

Lists and List Items• List Controls and capabilities • Creating list items• Grouped lists and grouping navigation• Long lists and best practices

This module…

List Controls

Controls for Lists of Things

ListView

GridView

ListBox (last resort)

ListView

Vertical list of items

Good for:Simple lists Grouped lists

GridView

Grid of items

Usually image-based items

List Control Templates

HeaderTemplateFooterTemplateItemTemplateItemContainerStyleItemsPanelGroupStyle

ContainerStyleHeaderTemplate

List Headers and Footers

HeaderTemplate displays at top of list

FooterTemplate displays at bottom of list

Scroll with list content (not sticky)

List Item Templates

ItemTemplatedisplays item data

GridView ItemTemplate

ListView ItemTemplate

List Item Templates

ItemTemplatedisplays item data

ItemContainerStyledisplays item state

Multiple Selection Mode

ReorderMode

Single Selection Mode

List Item Templates

ItemTemplatedisplays item data

ItemContainerStyledisplays item state

ItemsPanelmanages item-by-item layout

ListView

<ItemsPanelTemplate x:Key="SampleItemsPanel"> <ItemsStackPanel Orientation="Vertical" /></ItemsPanelTemplate>

GridView

<ItemsPanelTemplate x:Key="SampleItemsPanel"> <ItemsWrapGrid Orientation=“Horizontal" /></ItemsPanelTemplate>

List Capabilities

Reordering

Items shift into floating UI

Reordered with Tap-Hold + Drag

Windows Phone 8.1

Windows 8.1

Grouped Lists cannot be reordered

MyListView.ReorderMode = ListViewReorderMode.Enabled;

MyListView.CanReorderItems = false;

MultiSelection

Displays checkboxes for multi-selection

MyListView.SelectionMode = ListViewSelectionMode.Multiple;

ListView Single Selection

ListView Multiple Selection

Demo:Create List Item Template

Grouped Lists

17

Grouping Data

Grouping requires data as a CollectionViewSource

Or a list of lists (no JumpList)

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 items orderby item.SortProperty group item by item.SortProperty into itemsByProperty select 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:<CollectionViewSource x: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>

Semantic Zoom Design

ZoomedInView – default view

ZoomedOutView triggered by group item

interactionoverlays the screen (Flyout)transparent background

Demo:Create Semantic Zoom Jumplist

List Best Practices

Item Rendering and Group Virtualization

Group layouts are virtualized

List controls renders elements near the viewport

Progressive Item Rendering

Sed nec sodaleAlpine Ski House

Unphased rendering

Sed nec sodaleAlpine Ski House

Phased rendering

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); }}

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); }}

Phase priorities

1. 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”

Demo:Phased List Rendering

Lists and List Items

• List Controls and capabilities • Creating list items• Grouped lists and grouping navigation• Long lists and best practices

Summary

©2014 Microsoft Corporation. All rights reserved. Microsoft, Windows, Office, Azure, System Center, Dynamics and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and 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. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.