Windows ストアアプリのgrid viewを入門してみた
- 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の素性洗い ? データの表示 ? グルーピング ? まとめ
- 6. 骋谤颈诲痴颈别飞とは ? Windows ストア アプリで特徴的な横スクロール画面を実現す るためのコントロール Windows Developer Days「Metro スタイル UI の要素と注意点に関するセッション」東 賢,三田 裕貴 http://channel9.msdn.com/Events/Windows-Developer-Days/Windows-Developer-Days-2012/WA-003
- 7. 骋谤颈诲痴颈别飞とは ? グリッドアプリケーションでも使われてる
- 8. 骋谤颈诲痴颈别飞とは セマンティック 横並び＋スクロール グルーピング 項目の選択 ズーム対応
- 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. ここまでのまとめ ? 骋谤颈诲痴颈别飞とは – 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