SlideShare une entreprise Scribd logo
1  sur  12
WP8版LongListSelectorで
のページング処理
Windows Phoneハッカソン 2013/1/19
青木宣明 @kumar0001
Windows Phoneでのリスト表示
ListBox (Windows Phone 7.5) LongListSelector (Windows Phone 8)
ページング処理とは?
リストに表示するデータ
• データソースからデータを取得できる1回
あたりの件数に上限があることが多い
Webサービスなど
Twitter, ATND, …
• データソースからのデータ取得パラメータ
取得条件(検索キーワードなど)
何件取得するか
何件目から取得するか
ListBoxへのデータ表示
ItemsSourceプロパティに
IEnumerableなデータをBindingする
• データソースから取得したデータを格納し
たListなど
ItemsSource
List box item 01
List box item 02
List box item 03
…
Bind
データ取得のタイミング
データソースから決まった件数ずつし
か取得できないときは?
• ItemsSourceにBindしたデータを取得ご
とに更新する
• いつ更新すればいいのか?
• 1つの方法は「ListBoxが最後まで表示し
た」ときにデータを取得する
ListBox(WP 7.5)の場合
 Listの最後を表示したことを、VisualStateで検知できる
• MSDNブログ「WP7.5 でリストボックスのスクロールエンドで圧
縮されるときのイベントを取る」(高橋忍)
 http://blogs.msdn.com/b/shintak/archive/2011/08/06/101933
47.aspx
 以下の状態が定義されている
VisualStateGroup VisualState 意味
VerticalCompresion CompressionTop 最上段でのスクロールエンド
CompressionBottom 最下段でのスクロールエンド
NoVerticalCompression スクロールエンドでない
HorizontalCompression CompressionLeft 左端でのスクロールエンド
CompressionRight 右端でのスクロールエンド
NoHorizontalCompression スクロールエンドでない
ListBox(WP 7.5)の場合
手順
1. VisualStateGroupをScrollViewerで再
定義する
ScrollViewerはListBoxに含まれる
2. ScrollViewerのVisualStateGroup
“VerticalCompression”の状態変化イベ
ントにハンドラを登録
CurrentStateChangingイベント
3. イベントハンドラでは、新しい状態が
CompressionBottomであればデータを
取得する
ListBox(WP 7.5)の場合
デモ
LongListSelector(WP8)の場合
WP8で標準に取り込まれた
LongListSelectorでは?
• ListBoxとは内部構造が変わっていて
ScrollViewerがない
• 別の方法が必要
ItemRealizedイベント
• LLSの要素が表示されるタイミングで発生
仮想化されているので、リスト要素を順次生成
している
LongListSelector(WP8)の場合
LLSがデータを順次表示していって、
次の条件を満たせば最後の要素が表示
されたとみなす
• e.ItemKindが
LongListSelectorItemKind.Itemである
グループヘッダ生成の場合も呼びだされる
• ItemsSourceの最後の要素と、生成され
たデータが一致する
画面に表示されていないので、
ListBoxの場合と同じではない
LongListSelector(WP8)の場合
デモ
まとめ
データソースからページ単位で取得す
る場合、データ取得のタイミングとし
て以下が使える
• ListBox
VerticalCompresion VisualStateGroupの
CompressionBottom状態を検知する
• LongListSelector
ItemRealizedイベントでItemsSourceの最後
のデータが表示されたことを検知する

Contenu connexe

Plus de Nobuaki Aoki

Windows phone 8のデバイスを使おう~近接通信編~(公開用)
Windows phone 8のデバイスを使おう~近接通信編~(公開用)Windows phone 8のデバイスを使おう~近接通信編~(公開用)
Windows phone 8のデバイスを使おう~近接通信編~(公開用)
Nobuaki Aoki
 

Plus de Nobuaki Aoki (20)

このはちゃんとConoHaと私
このはちゃんとConoHaと私このはちゃんとConoHaと私
このはちゃんとConoHaと私
 
Apache Usergridについて(公開用)
Apache Usergridについて(公開用)Apache Usergridについて(公開用)
Apache Usergridについて(公開用)
 
Kumalicaのご紹介(公開用)
Kumalicaのご紹介(公開用)Kumalicaのご紹介(公開用)
Kumalicaのご紹介(公開用)
 
Windows 10 mobile uwpアプリの始め方~continuum編~ (公開用)
Windows 10 mobile uwpアプリの始め方~continuum編~ (公開用)Windows 10 mobile uwpアプリの始め方~continuum編~ (公開用)
Windows 10 mobile uwpアプリの始め方~continuum編~ (公開用)
 
Windows 10 mobileでnfc~suica・edy対応編~(公開用)
Windows 10 mobileでnfc~suica・edy対応編~(公開用)Windows 10 mobileでnfc~suica・edy対応編~(公開用)
Windows 10 mobileでnfc~suica・edy対応編~(公開用)
 
Blog=pelican+bit bucket+docker
Blog=pelican+bit bucket+dockerBlog=pelican+bit bucket+docker
Blog=pelican+bit bucket+docker
 
第1回三重合同懇親会
第1回三重合同懇親会第1回三重合同懇親会
第1回三重合同懇親会
 
IoTの始め方~.NET Micro Framework編
IoTの始め方~.NET Micro Framework編IoTの始め方~.NET Micro Framework編
IoTの始め方~.NET Micro Framework編
 
Getting started with edison
Getting started with edisonGetting started with edison
Getting started with edison
 
第11回まどべんよっかいちの告知
第11回まどべんよっかいちの告知第11回まどべんよっかいちの告知
第11回まどべんよっかいちの告知
 
第1回三重合同懇親会の告知
第1回三重合同懇親会の告知第1回三重合同懇親会の告知
第1回三重合同懇親会の告知
 
(仮)登別クマ牧場のテツロウについて
(仮)登別クマ牧場のテツロウについて(仮)登別クマ牧場のテツロウについて
(仮)登別クマ牧場のテツロウについて
 
まどべんよっかいちのご紹介
まどべんよっかいちのご紹介まどべんよっかいちのご紹介
まどべんよっかいちのご紹介
 
Microsoft Azure Mobile Serviceによるアプリ構築
Microsoft Azure Mobile Serviceによるアプリ構築Microsoft Azure Mobile Serviceによるアプリ構築
Microsoft Azure Mobile Serviceによるアプリ構築
 
mbedとwindows 8.1
mbedとwindows 8.1mbedとwindows 8.1
mbedとwindows 8.1
 
Windows.Web.Http.HttpClientとWebAuthenticationBroker
Windows.Web.Http.HttpClientとWebAuthenticationBrokerWindows.Web.Http.HttpClientとWebAuthenticationBroker
Windows.Web.Http.HttpClientとWebAuthenticationBroker
 
Windows phone 8プログラミング~gps&地図編~
Windows phone 8プログラミング~gps&地図編~Windows phone 8プログラミング~gps&地図編~
Windows phone 8プログラミング~gps&地図編~
 
Windows Azure Mobile Servicesによるアプリ構築
Windows Azure Mobile Servicesによるアプリ構築Windows Azure Mobile Servicesによるアプリ構築
Windows Azure Mobile Servicesによるアプリ構築
 
Windows phone 8のデバイスを使おう~カメラ&フォト編~(公開用)
Windows phone 8のデバイスを使おう~カメラ&フォト編~(公開用)Windows phone 8のデバイスを使おう~カメラ&フォト編~(公開用)
Windows phone 8のデバイスを使おう~カメラ&フォト編~(公開用)
 
Windows phone 8のデバイスを使おう~近接通信編~(公開用)
Windows phone 8のデバイスを使おう~近接通信編~(公開用)Windows phone 8のデバイスを使おう~近接通信編~(公開用)
Windows phone 8のデバイスを使おう~近接通信編~(公開用)
 

Wp8 longlistselectorでのページング処理