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

自己紹介

大田一希– Microsoft MVP for ClientAppDev 2011/07-2013/06– 富士通アドバンストエンジニアリング

– Twitter: @okazuki– ブログ：かずきの Blog@hatena

http://d.hatena.ne.jp/okazuki

本書きました– Windows 8 ストア アプリ開発入門– Windows ストア アプリ開発のレシピ 110( 今日 1 冊持ってきてま

す！）

お約束

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

今日のセッションの目標

何か一つでも、これ知らなかった！とか、便利そう！という気付きを得てもらう

もくじ

GridView とは

GridView の素性洗い

データの表示

グルーピング

まとめ

GridView とは

Windows ストア アプリで特徴的な横スクロール画面を実現するためのコントロール

Windows Developer Days 「 Metro スタイル UI の要素と注意点に関するセッション」東 賢 ,三田 裕貴http://channel9.msdn.com/Events/Windows-Developer-Days/Windows-Developer-Days-2012/WA-003

GridView とは

グリッドアプリケーションでも使われてる

GridView とは

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

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>

とても長い・・・

とても長いので

素性を洗って、１から組み立ててみます。

継承関係を把握

選択可能な要素を列挙するコントロール– Is ～系プロパティで細かな挙動をカスタマイズ

GridView クラスの継承関係

クラス名 解説Control コントロールの基本的な挙動 ItemsControl 複数項目を表示するコントロール Selector 選択機能を追加 ListViewBase ListView と GridView の基本機能を定義

（セマンティックズーム対応もここで） GridView 横スクロールするように要素を並べる

数値を列挙してみる

<GridView x:Name="gridView" Grid.Row="1" Padding="120,0,0,10"/>

this.gridView.ItemsSource = Enumerable.Range(1, 500).ToList();

XAML

C#

デフォルトの見た目

横スクロール

ItemTemplate の適用

基本的に、データに ItemTemplate を適用して見た目を作る

32

ItemTemplate32xxxxxxxxxxxxxxxxxx

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>

ストアアプリっぽい見た目に

ItemTemplate で、自分のテイストをどれだけ出していくか、どんなコンテンツを扱うかが勝負！！

ここまでのまとめ

GridView とは– ItemsControl の流れをくむコントロール– ItemsSource プロパティにセットされたデータを表示する

– 縦並びで下までいくと折り返してコンテンツを表示– 横スクロール

– ItemTemplate でコンテンツの表示をカスタマイズ

グルーピング

コンテンツをグルーピングして表示する

グループ１ グループ２

CollectionViewSource を使おう

CollectionViewSource– XAML へコレクションをバインドするための仲介役

グルーピング 選択中の要素の管理 ソート etc…

CollectionViewSource を使うには

ページのリソースに CollectionViewSource を追加

GridView の ItemsSource を CollectionViewSource に設定

CollectionViewSource の Source にデータを設定

<Page.Resources>     <CollectionViewSource x:Name="source" IsSourceGrouped="True" /></Page.Resources>

<GridView x:Name="gridView" Grid.Row="1" Padding="120,0,0,10“          ItemsSource="{Binding Source={StaticResource source}}">

// 1 桁目の値でグルーピング this.source.Source= Enumerable.Range(1, 500).GroupBy(i => i % 10);

アイテムの並びがグループ順になる

まだ、グルーピングされたとはいいにくい・・・

グループの見た目をカスタマイズするGroupStyle

HeaderTemplate プロパティ– グループごとのヘッダーの見た目を定義する

Panel プロパティ– グループ内の要素を並べるためのパネルを設定する

HideIfEmpty プロパティ– 空のグループを非表示にするかどうか設定する

実際に適用してみる

<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> </GridView.GroupStyle>

グループヘッダーに”下一桁が **” と表示するようにテンプレートを定義

縦並びで折り返し表示するようにVariableSizedWrapGrid を Panel に指定。グループの区切りで間があくように 80px の

余白を右側に指定。

それっぽくなる

グループの間に80px の余白

グループヘッダー グループヘッダー

ここまでのまとめ

グルーピングするには– CollectionViewSource をコントロールとデータの間に入れる– GridView の GroupStyle で見た目を整える

GroupBy したもの以外のデータもグループ表示可能– CollectionViewSource の ItemsPath を参照

（宣伝： Windows 8 ストア アプリ 開発入門に書いてあります！）

まとめ

GridView は ItemsControl の子孫

ItemsSource にデータを設定して ItemTemplate で見た目を整える

グルーピングなどの凝ったことをするときはCollectionViewSource を使う

グルーピングの見た目は GroupStyle を使う

GridView を使いこなしてストア アプリらしいデータ表示を！！

おまけ

GridView/ListView でのデータの遅延読み込み– コードレシピ

Windows ストア アプリで遅延読み込み（ ISuppportIncrementalLoading 編）http://code.msdn.microsoft.com/Windows-ISuppportIncrementa-bfc17780