Windows ストアアプリのgrid viewを入門してみた

9,941 views

Published on

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

Published in: Technology
0 Comments
8 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
9,941
On SlideShare
0
From Embeds
0
Number of Embeds
5,157
Actions
Shares
0
Downloads
8
Comments
0
Likes
8
Embeds 0
No embeds

No notes for slide

Windows ストアアプリのgrid viewを入門してみた

  1. 1. Windows ストアアプリのGridViewを入門してみた@okazuki大田一希
  2. 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. 3. お約束 掲載内容は私自身の見解であり、所属する組織を代表するもの ではありません
  4. 4. 今日のセッションの目標 何か一つでも、これ知らなかった!とか、便利そう!という気 付きを得てもらう
  5. 5. もくじ GridViewとは GridViewの素性洗い データの表示 グルーピング まとめ
  6. 6. GridViewとは Windows ストア アプリで特徴的な横スクロール画面を実現す るためのコントロール Windows Developer Days「Metro スタイル UI の要素と注意点に関するセッション」東 賢,三田 裕貴 http://channel9.msdn.com/Events/Windows-Developer-Days/Windows-Developer-Days-2012/WA-003
  7. 7. GridViewとは グリッドアプリケーションでも使われてる
  8. 8. GridViewとは セマンティック横並び+スクロール グルーピング 項目の選択 ズーム対応
  9. 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. 10. とても長いので 素性を洗って、1から組み立ててみます。
  11. 11. GridViewクラスの継承関係 継承関係を把握 クラス名 解説 Control コントロールの基本的な挙動 ItemsControl 複数項目を表示するコントロール Selector 選択機能を追加 ListViewBase ListViewとGridViewの基本機能を定義 (セマンティックズーム対応もここで) GridView 横スクロールするように要素を並べる 選択可能な要素を列挙するコントロール – Is~系プロパティで細かな挙動をカスタマイズ
  12. 12. 数値を列挙してみるXAML<GridView x:Name="gridView" Grid.Row="1" Padding="120,0,0,10"/>C#this.gridView.ItemsSource = Enumerable.Range(1, 500).ToList();
  13. 13. デフォルトの見た目 横スクロール
  14. 14. ItemTemplateの適用 基本的に、データにItemTemplateを適用して見た目を作る 32 ItemTemplate 32 xxxxxxxxxxxxxxxxxx
  15. 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. 16. ストアアプリっぽい見た目に ItemTemplateで、自分のテイストをどれだけ出していくか、ど んなコンテンツを扱うかが勝負!!
  17. 17. ここまでのまとめ GridViewとは – ItemsControlの流れをくむコントロール – ItemsSourceプロパティにセットされたデータを表示する – 縦並びで下までいくと折り返してコンテンツを表示 – 横スクロール – ItemTemplateでコンテンツの表示をカスタマイズ
  18. 18. グルーピング コンテンツをグルーピングして表示する グループ1 グループ2
  19. 19. CollectionViewSourceを使おう CollectionViewSource – XAMLへコレクションをバインドするための仲介役  グルーピング  選択中の要素の管理  ソート  etc…
  20. 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. 21. アイテムの並びがグループ順になる まだ、グルーピングされたとはいいにくい・・・
  22. 22. グループの見た目をカスタマイズするGroupStyle HeaderTemplateプロパティ – グループごとのヘッダーの見た目を定義する Panelプロパティ – グループ内の要素を並べるためのパネルを設定する HideIfEmptyプロパティ – 空のグループを非表示にするかどうか設定する
  23. 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. 24. それっぽくなるグループヘッダー グループヘッダー グループの間に80px の余白
  25. 25. ここまでのまとめ グルーピングするには – CollectionViewSourceをコントロールとデータの間に入れる – GridViewのGroupStyleで見た目を整える GroupByしたもの以外のデータもグループ表示可能 – CollectionViewSourceのItemsPathを参照 (宣伝:Windows 8 ストア アプリ 開発入門に書いてあります!)
  26. 26. まとめ GridViewはItemsControlの子孫 ItemsSourceにデータを設定してItemTemplateで見た目を整え る グルーピングなどの凝ったことをするときは CollectionViewSourceを使う グルーピングの見た目はGroupStyleを使う GridViewを使いこなしてストア アプリらしいデータ表示 を!!
  27. 27. おまけ GridView/ListViewでのデータの遅延読み込み – コードレシピ Windows ストア アプリで遅延読み込み(ISuppportIncrementalLoading 編) http://code.msdn.microsoft.com/Windows-ISuppportIncrementa- bfc17780

×