Post on 28-May-2015
description
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>
とても長い・・・
とても長いので
素性を洗って、1から組み立ててみます。
継承関係を把握
選択可能な要素を列挙するコントロール– 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 でコンテンツの表示をカスタマイズ
グルーピング
コンテンツをグルーピングして表示する
グループ1 グループ2
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