3月30日のめとべやの発表資料です。

1. Windows ストアアプリの
GridViewを入門してみた
@okazuki
大田一希

2. 自己紹介
 大田一希
– Microsoft MVP for ClientAppDev 2011/07-2013/06
– 富士通アドバンストエンジニアリング
– Twitter: @okazuki
– ブログ：かずきのBlog@hatena
http://d.hatena.ne.jp/okazuki
 本書きました
– Windows 8 ストア アプリ開発入門
– Windows ストア アプリ開発のレシピ110(今日1冊持ってきてます！）

3. お約束
 掲載内容は私自身の見解であり、所属する組織を代表するもの
ではありません

4. 今日のセッションの目標
 何か一つでも、これ知らなかった！とか、便利そう！という気
付きを得てもらう

5. もくじ
 GridViewとは
 GridViewの素性洗い
 データの表示
 グルーピング
 まとめ

6. GridViewとは
 Windows ストア アプリで特徴的な横スクロール画面を実現す
るためのコントロール
Windows Developer Days「Metro スタイル UI の要素と注意点に関するセッション」東 賢,三田 裕貴
http://channel9.msdn.com/Events/Windows-Developer-Days/Windows-Developer-Days-2012/WA-003

7. GridViewとは
 グリッドアプリケーションでも使われてる

8. GridViewとは
セマンティック
横並び＋スクロール グルーピング 項目の選択
ズーム対応

9. XAML（GridView部分のみ抜粋）
<GridView
x:Name="itemGridView"
…省略…
Padding="116,137,40,46“ ItemsSource="{Binding Source={StaticResource groupedItemsViewSource}}"
ItemTemplate="{StaticResource Standard250x250ItemTemplate}“ SelectionMode="None“ IsSwipeEnabled="false“ IsItemClickEnabled="True“ ItemClick="ItemView_ItemClick">
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</GridView.ItemsPanel>
<GridView.GroupStyle>
<GroupStyle>
<GroupStyle.HeaderTemplate>
<DataTemplate>
<Grid Margin="1,0,0,6">
<Button
AutomationProperties.Name="Group Title"
Click="Header_Click"
Style="{StaticResource TextPrimaryButtonStyle}" >
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding Title}" Margin="3,-7,10,10" Style="{StaticResource GroupHeaderTextStyle}" />
<TextBlock Text=“{StaticResource ChevronGlyph}” FontFamily="Segoe UI Symbol"
Margin="0,-7,0,10" Style="{StaticResource GroupHeaderTextStyle}"/>
</StackPanel>
</Button>
</Grid>
</DataTemplate>
</GroupStyle.HeaderTemplate>
<GroupStyle.Panel>
<ItemsPanelTemplate>
<VariableSizedWrapGrid Orientation="Vertical" Margin="0,0,80,0"/>
</ItemsPanelTemplate> とても長い・・・
</GroupStyle.Panel>
</GroupStyle>
</GridView.GroupStyle>
</GridView>

10. とても長いので
 素性を洗って、１から組み立ててみます。

11. GridViewクラスの継承関係
 継承関係を把握
クラス名 解説
Control コントロールの基本的な挙動
ItemsControl 複数項目を表示するコントロール
Selector 選択機能を追加
ListViewBase ListViewとGridViewの基本機能を定義
（セマンティックズーム対応もここで）
GridView 横スクロールするように要素を並べる
 選択可能な要素を列挙するコントロール
– Is～系プロパティで細かな挙動をカスタマイズ

12. 数値を列挙してみる
XAML
<GridView x:Name="gridView" Grid.Row="1" Padding="120,0,0,10"/>
C#
this.gridView.ItemsSource = Enumerable.Range(1, 500).ToList();

13. デフォルトの見た目
横スクロール

14. ItemTemplateの適用
 基本的に、データにItemTemplateを適用して見た目を作る
32
ItemTemplate
32
xxxxxxxxxxxxxxxxxx

15. ItemTemplateの適用
 例えば250x250のタイル状の見た目にする場合
(StandardStyles.xamlからコピペ）
<GridView x:Name="gridView" Grid.Row="1" Padding="120,0,0,10">
<GridView.ItemTemplate>
<DataTemplate>
<Grid HorizontalAlignment="Left" Width="250" Height="250">
<Border Background="{StaticResource ListViewItemPlaceholderBackgroundThemeBrush}" />
<StackPanel VerticalAlignment="Bottom"
Background="{StaticResource ListViewItemOverlayBackgroundThemeBrush}">
<TextBlock
Text="{Binding}“
Foreground="{StaticResource ListViewItemOverlayForegroundThemeBrush}“
Style="{StaticResource TitleTextStyle}“
Height="60" Margin="15,0,15,0"/>
</StackPanel>
</Grid>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>

16. ストアアプリっぽい見た目に
 ItemTemplateで、自分のテイストをどれだけ出していくか、ど
んなコンテンツを扱うかが勝負！！

17. ここまでのまとめ
 GridViewとは
– ItemsControlの流れをくむコントロール
– ItemsSourceプロパティにセットされたデータを表示する
– 縦並びで下までいくと折り返してコンテンツを表示
– 横スクロール
– ItemTemplateでコンテンツの表示をカスタマイズ

18. グルーピング
 コンテンツをグルーピングして表示する
グループ１ グループ２

19. CollectionViewSourceを使おう
 CollectionViewSource
– XAMLへコレクションをバインドするための仲介役
 グルーピング
 選択中の要素の管理
 ソート
 etc…

20. CollectionViewSourceを使うには
 ページのリソースにCollectionViewSourceを追加
<Page.Resources>
<CollectionViewSource x:Name="source" IsSourceGrouped="True" />
</Page.Resources>
 GridViewのItemsSourceをCollectionViewSourceに設定
<GridView x:Name="gridView" Grid.Row="1" Padding="120,0,0,10“
ItemsSource="{Binding Source={StaticResource source}}">
 CollectionViewSourceのSourceにデータを設定
// 1桁目の値でグルーピング
this.source.Source= Enumerable.Range(1, 500).GroupBy(i => i % 10);

21. アイテムの並びがグループ順になる
まだ、グルーピングされたとはいいにくい・・・

22. グループの見た目をカスタマイズするGroupStyle
 HeaderTemplateプロパティ
– グループごとのヘッダーの見た目を定義する
 Panelプロパティ
– グループ内の要素を並べるためのパネルを設定する
 HideIfEmptyプロパティ
– 空のグループを非表示にするかどうか設定する

23. 実際に適用してみる
<GridView.GroupStyle>
<GroupStyle HidesIfEmpty="True"> グループヘッダーに”下一桁が**”と
<GroupStyle.HeaderTemplate> 表示するようにテンプレートを定義
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Text="下一桁が" Style="{StaticResource SubheaderTextStyle}" />
<TextBlock Text="{Binding Key}" Style="{StaticResource SubheaderTextStyle}" />
</StackPanel>
</DataTemplate>
</GroupStyle.HeaderTemplate>
<GroupStyle.Panel>
<ItemsPanelTemplate>
<VariableSizedWrapGrid Margin="0,5,80,0" />
</ItemsPanelTemplate>
</GroupStyle.Panel> 縦並びで折り返し表示するように
</GroupStyle> VariableSizedWrapGridをPanelに指定。
</GridView.GroupStyle> グループの区切りで間があくように80pxの
余白を右側に指定。

24. それっぽくなる
グループヘッダー グループヘッダー
グループの間に80px
の余白

25. ここまでのまとめ
 グルーピングするには
– CollectionViewSourceをコントロールとデータの間に入れる
– GridViewのGroupStyleで見た目を整える
 GroupByしたもの以外のデータもグループ表示可能
– CollectionViewSourceのItemsPathを参照
（宣伝：Windows 8 ストア アプリ 開発入門に書いてあります！）

26. まとめ
 GridViewはItemsControlの子孫
 ItemsSourceにデータを設定してItemTemplateで見た目を整え
る
 グルーピングなどの凝ったことをするときは
CollectionViewSourceを使う
 グルーピングの見た目はGroupStyleを使う
 GridViewを使いこなしてストア アプリらしいデータ表示
を！！

27. おまけ
 GridView/ListViewでのデータの遅延読み込み
– コードレシピ
Windows ストア アプリで遅延読み込み（ISuppportIncrementalLoading
編）
http://code.msdn.microsoft.com/Windows-ISuppportIncrementa-
bfc17780