Enviar búsqueda
Cargar
Windows ストアアプリのgrid viewを入門してみた
•
Descargar como PPTX, PDF
•
8 recomendaciones
•
11,262 vistas
一希 大田
Seguir
3月30日のめとべやの発表資料です。
Leer menos
Leer más
Tecnología
Vista de diapositivas
Denunciar
Compartir
Vista de diapositivas
Denunciar
Compartir
1 de 27
Descargar ahora
Recomendados
基礎から見直す ASP.NET MVC の単体テスト自動化方法 ~ Windows Azure 関連もあるかも~
基礎から見直す ASP.NET MVC の単体テスト自動化方法 ~ Windows Azure 関連もあるかも~
normalian
AngularJS入門
AngularJS入門
Kenji Shirane
エンタープライズ分野での実践AngularJS
エンタープライズ分野での実践AngularJS
Ayumi Goto
Angular.jsについてちょっとしゃべる
Angular.jsについてちょっとしゃべる
Masashi Haga
Knockout.js を利用したインタラクティブ web アプリケーション開発
Knockout.js を利用したインタラクティブ web アプリケーション開発
Daizen Ikehara
作って分かるKnockoutJS@ALM11月
作って分かるKnockoutJS@ALM11月
Takuya Ueda
jQuery/Html5/ASP.NET MVC 対応コンポーネントを用いたデバイス対応業務アプリケーション開発
jQuery/Html5/ASP.NET MVC 対応コンポーネントを用いたデバイス対応業務アプリケーション開発
Daizen Ikehara
プロダクトに 1 から Vue.js を導入した話
プロダクトに 1 から Vue.js を導入した話
Shohei Okada
Recomendados
基礎から見直す ASP.NET MVC の単体テスト自動化方法 ~ Windows Azure 関連もあるかも~
基礎から見直す ASP.NET MVC の単体テスト自動化方法 ~ Windows Azure 関連もあるかも~
normalian
AngularJS入門
AngularJS入門
Kenji Shirane
エンタープライズ分野での実践AngularJS
エンタープライズ分野での実践AngularJS
Ayumi Goto
Angular.jsについてちょっとしゃべる
Angular.jsについてちょっとしゃべる
Masashi Haga
Knockout.js を利用したインタラクティブ web アプリケーション開発
Knockout.js を利用したインタラクティブ web アプリケーション開発
Daizen Ikehara
作って分かるKnockoutJS@ALM11月
作って分かるKnockoutJS@ALM11月
Takuya Ueda
jQuery/Html5/ASP.NET MVC 対応コンポーネントを用いたデバイス対応業務アプリケーション開発
jQuery/Html5/ASP.NET MVC 対応コンポーネントを用いたデバイス対応業務アプリケーション開発
Daizen Ikehara
プロダクトに 1 から Vue.js を導入した話
プロダクトに 1 から Vue.js を導入した話
Shohei Okada
KnockoutJS勉強会 プロジェクトにmvvmを適用する狙い
KnockoutJS勉強会 プロジェクトにmvvmを適用する狙い
Toshihiro Kawachi
Featuring Project Silk & Liike: 楽しい "モダン" Web 開発のちょっとディープなお話
Featuring Project Silk & Liike: 楽しい "モダン" Web 開発のちょっとディープなお話
Akira Inoue
Nuxt なしで Vue App 作る時に乗り越えるべき5つの壁
Nuxt なしで Vue App 作る時に乗り越えるべき5つの壁
Yutaro Miyazaki
モテる JavaScript
モテる JavaScript
Osamu Monoe
チュートリアルではじめるVue.js
チュートリアルではじめるVue.js
小川 昌吾
Hokuriku.NET ASP.NET MVC入門 「実践」 20120825
Hokuriku.NET ASP.NET MVC入門 「実践」 20120825
miso- soup3
コンポーネント指向による、Reactのベストプラクティスとバッドプラクティス
コンポーネント指向による、Reactのベストプラクティスとバッドプラクティス
Kohei Asai
Ma gician <wide version> @meguro.es 2019/10/10
Ma gician <wide version> @meguro.es 2019/10/10
Eucen Stew
From Swing to JavaFX - SwingからJavaFXへのマイグレーションガイド
From Swing to JavaFX - SwingからJavaFXへのマイグレーションガイド
Yuichi Sakuraba
今からでも遅くない! React事始め
今からでも遅くない! React事始め
ynaruta
クライアントサイドMVVMアーキテクチャとVue.jsをまとめたよ
クライアントサイドMVVMアーキテクチャとVue.jsをまとめたよ
Seki Yousuke
はじめよう JavaFX 2.x(第3回 岡山Javaユーザー会)
はじめよう JavaFX 2.x(第3回 岡山Javaユーザー会)
a know
【17-C-2】 クラウド上でのエンタープライズアプリケーション開発
【17-C-2】 クラウド上でのエンタープライズアプリケーション開発
lalha
Brush up your Coding! 2013 winter
Brush up your Coding! 2013 winter
Shogo Sensui
AngularJSを触ってみた
AngularJSを触ってみた
tomowata
20160927 reactmeetup
20160927 reactmeetup
Naoki Kurosawa
Mvc conf session_5_isami
Mvc conf session_5_isami
Hiroshi Okunushi
[公開用]Netラボ2012年2月勉強会 asp.netmvc4 beta新機能の紹介
[公開用]Netラボ2012年2月勉強会 asp.netmvc4 beta新機能の紹介
david9142
Backbone.js入門
Backbone.js入門
AdvancedTechNight
はじめてのVue.js
はじめてのVue.js
Kei Yagi
Android Architecture Componentsの新機能
Android Architecture Componentsの新機能
Damper Matsu
Magento meet up Tokyo#1 for Design
Magento meet up Tokyo#1 for Design
Miho Nakano
Más contenido relacionado
La actualidad más candente
KnockoutJS勉強会 プロジェクトにmvvmを適用する狙い
KnockoutJS勉強会 プロジェクトにmvvmを適用する狙い
Toshihiro Kawachi
Featuring Project Silk & Liike: 楽しい "モダン" Web 開発のちょっとディープなお話
Featuring Project Silk & Liike: 楽しい "モダン" Web 開発のちょっとディープなお話
Akira Inoue
Nuxt なしで Vue App 作る時に乗り越えるべき5つの壁
Nuxt なしで Vue App 作る時に乗り越えるべき5つの壁
Yutaro Miyazaki
モテる JavaScript
モテる JavaScript
Osamu Monoe
チュートリアルではじめるVue.js
チュートリアルではじめるVue.js
小川 昌吾
Hokuriku.NET ASP.NET MVC入門 「実践」 20120825
Hokuriku.NET ASP.NET MVC入門 「実践」 20120825
miso- soup3
コンポーネント指向による、Reactのベストプラクティスとバッドプラクティス
コンポーネント指向による、Reactのベストプラクティスとバッドプラクティス
Kohei Asai
Ma gician <wide version> @meguro.es 2019/10/10
Ma gician <wide version> @meguro.es 2019/10/10
Eucen Stew
From Swing to JavaFX - SwingからJavaFXへのマイグレーションガイド
From Swing to JavaFX - SwingからJavaFXへのマイグレーションガイド
Yuichi Sakuraba
今からでも遅くない! React事始め
今からでも遅くない! React事始め
ynaruta
クライアントサイドMVVMアーキテクチャとVue.jsをまとめたよ
クライアントサイドMVVMアーキテクチャとVue.jsをまとめたよ
Seki Yousuke
はじめよう JavaFX 2.x(第3回 岡山Javaユーザー会)
はじめよう JavaFX 2.x(第3回 岡山Javaユーザー会)
a know
【17-C-2】 クラウド上でのエンタープライズアプリケーション開発
【17-C-2】 クラウド上でのエンタープライズアプリケーション開発
lalha
Brush up your Coding! 2013 winter
Brush up your Coding! 2013 winter
Shogo Sensui
AngularJSを触ってみた
AngularJSを触ってみた
tomowata
20160927 reactmeetup
20160927 reactmeetup
Naoki Kurosawa
Mvc conf session_5_isami
Mvc conf session_5_isami
Hiroshi Okunushi
[公開用]Netラボ2012年2月勉強会 asp.netmvc4 beta新機能の紹介
[公開用]Netラボ2012年2月勉強会 asp.netmvc4 beta新機能の紹介
david9142
Backbone.js入門
Backbone.js入門
AdvancedTechNight
はじめてのVue.js
はじめてのVue.js
Kei Yagi
La actualidad más candente
(20)
KnockoutJS勉強会 プロジェクトにmvvmを適用する狙い
KnockoutJS勉強会 プロジェクトにmvvmを適用する狙い
Featuring Project Silk & Liike: 楽しい "モダン" Web 開発のちょっとディープなお話
Featuring Project Silk & Liike: 楽しい "モダン" Web 開発のちょっとディープなお話
Nuxt なしで Vue App 作る時に乗り越えるべき5つの壁
Nuxt なしで Vue App 作る時に乗り越えるべき5つの壁
モテる JavaScript
モテる JavaScript
チュートリアルではじめるVue.js
チュートリアルではじめるVue.js
Hokuriku.NET ASP.NET MVC入門 「実践」 20120825
Hokuriku.NET ASP.NET MVC入門 「実践」 20120825
コンポーネント指向による、Reactのベストプラクティスとバッドプラクティス
コンポーネント指向による、Reactのベストプラクティスとバッドプラクティス
Ma gician <wide version> @meguro.es 2019/10/10
Ma gician <wide version> @meguro.es 2019/10/10
From Swing to JavaFX - SwingからJavaFXへのマイグレーションガイド
From Swing to JavaFX - SwingからJavaFXへのマイグレーションガイド
今からでも遅くない! React事始め
今からでも遅くない! React事始め
クライアントサイドMVVMアーキテクチャとVue.jsをまとめたよ
クライアントサイドMVVMアーキテクチャとVue.jsをまとめたよ
はじめよう JavaFX 2.x(第3回 岡山Javaユーザー会)
はじめよう JavaFX 2.x(第3回 岡山Javaユーザー会)
【17-C-2】 クラウド上でのエンタープライズアプリケーション開発
【17-C-2】 クラウド上でのエンタープライズアプリケーション開発
Brush up your Coding! 2013 winter
Brush up your Coding! 2013 winter
AngularJSを触ってみた
AngularJSを触ってみた
20160927 reactmeetup
20160927 reactmeetup
Mvc conf session_5_isami
Mvc conf session_5_isami
[公開用]Netラボ2012年2月勉強会 asp.netmvc4 beta新機能の紹介
[公開用]Netラボ2012年2月勉強会 asp.netmvc4 beta新機能の紹介
Backbone.js入門
Backbone.js入門
はじめてのVue.js
はじめてのVue.js
Similar a Windows ストアアプリのgrid viewを入門してみた
Android Architecture Componentsの新機能
Android Architecture Componentsの新機能
Damper Matsu
Magento meet up Tokyo#1 for Design
Magento meet up Tokyo#1 for Design
Miho Nakano
CSS Nite in Matsuyama vol.1 - session 4
CSS Nite in Matsuyama vol.1 - session 4
arisu yano
jQuery超入門編
jQuery超入門編
Yasuhito Yabe
学生向けAndroid勉強会(入門編)
学生向けAndroid勉強会(入門編)
Itsuki Kuroda
Jqm20120210
Jqm20120210
cmtomoda
Dynamic Data
Dynamic Data
Visual Studio Users Group Japan
Parse.comと始めるBackbone.js入門(jscafe7)
Parse.comと始めるBackbone.js入門(jscafe7)
Ryuma Tsukano
Html5 Web Applications
Html5 Web Applications
totty jp
jQuery Mobile 最新情報 & Tips
jQuery Mobile 最新情報 & Tips
yoshikawa_t
scala+liftで遊ぼう
scala+liftで遊ぼう
youku
第1回 Magento Cafe Plus Kansai ~ Magentoカスタマイズ入門
第1回 Magento Cafe Plus Kansai ~ Magentoカスタマイズ入門
Hirokazu Nishi
20091207
20091207
小野 修司
html5j.orgがHTML5+JavaScriptで Metro Style アプリを作ってみた
html5j.orgがHTML5+JavaScriptで Metro Style アプリを作ってみた
Shumpei Shiraishi
IgGrid 入門編
IgGrid 入門編
Daizen Ikehara
Windows ストア アプリの上手な作り方
Windows ストア アプリの上手な作り方
一希 大田
Knockout
Knockout
Kazuhiro Eguchi
PostgreSQL 10 新機能 @オープンセミナー香川 2017
PostgreSQL 10 新機能 @オープンセミナー香川 2017
Shigeru Hanada
Rawler基本
Rawler基本
Takaichi Ito
20110714 j queryベーシック
20110714 j queryベーシック
良太 増子
Similar a Windows ストアアプリのgrid viewを入門してみた
(20)
Android Architecture Componentsの新機能
Android Architecture Componentsの新機能
Magento meet up Tokyo#1 for Design
Magento meet up Tokyo#1 for Design
CSS Nite in Matsuyama vol.1 - session 4
CSS Nite in Matsuyama vol.1 - session 4
jQuery超入門編
jQuery超入門編
学生向けAndroid勉強会(入門編)
学生向けAndroid勉強会(入門編)
Jqm20120210
Jqm20120210
Dynamic Data
Dynamic Data
Parse.comと始めるBackbone.js入門(jscafe7)
Parse.comと始めるBackbone.js入門(jscafe7)
Html5 Web Applications
Html5 Web Applications
jQuery Mobile 最新情報 & Tips
jQuery Mobile 最新情報 & Tips
scala+liftで遊ぼう
scala+liftで遊ぼう
第1回 Magento Cafe Plus Kansai ~ Magentoカスタマイズ入門
第1回 Magento Cafe Plus Kansai ~ Magentoカスタマイズ入門
20091207
20091207
html5j.orgがHTML5+JavaScriptで Metro Style アプリを作ってみた
html5j.orgがHTML5+JavaScriptで Metro Style アプリを作ってみた
IgGrid 入門編
IgGrid 入門編
Windows ストア アプリの上手な作り方
Windows ストア アプリの上手な作り方
Knockout
Knockout
PostgreSQL 10 新機能 @オープンセミナー香川 2017
PostgreSQL 10 新機能 @オープンセミナー香川 2017
Rawler基本
Rawler基本
20110714 j queryベーシック
20110714 j queryベーシック
Más de 一希 大田
.NET 7 での ASP.NET Core Blazor の新機能ピックアップ
.NET 7 での ASP.NET Core Blazor の新機能ピックアップ
一希 大田
Power Apps + C#
Power Apps + C#
一希 大田
Azure Static Web Apps を試してみた!
Azure Static Web Apps を試してみた!
一希 大田
Visual studio 2019 updates pickup!
Visual studio 2019 updates pickup!
一希 大田
.NET 5 and Windows app dev
.NET 5 and Windows app dev
一希 大田
Uno Platform 触ってみた
Uno Platform 触ってみた
一希 大田
WPF on .NET Core 3.1 で Windows 10 アプリ開発
WPF on .NET Core 3.1 で Windows 10 アプリ開発
一希 大田
.NET Core 3.0 + Windows 10 で WPF 開発
.NET Core 3.0 + Windows 10 で WPF 開発
一希 大田
はじめよう Azure Functions
はじめよう Azure Functions
一希 大田
Windows 10 対応のデスクトップアプリを作る技術(事前公開版v2)
Windows 10 対応のデスクトップアプリを作る技術(事前公開版v2)
一希 大田
Xamarin.Forms アプリケーション 設計パターン
Xamarin.Forms アプリケーション 設計パターン
一希 大田
Windows 10 対応のデスクトップアプリを 作る技術(事前公開版)
Windows 10 対応のデスクトップアプリを 作る技術(事前公開版)
一希 大田
WPF on .NET Core 3.0
WPF on .NET Core 3.0
一希 大田
Visual Studio 2019 の個人的なお勧め機能(発表時点)
Visual Studio 2019 の個人的なお勧め機能(発表時点)
一希 大田
Visual Studio 2019 の個人的なお勧め機能
Visual Studio 2019 の個人的なお勧め機能
一希 大田
Windows 10 に対応した デスクトップ アプリを作る技術(事前公開版 v2)
Windows 10 に対応した デスクトップ アプリを作る技術(事前公開版 v2)
一希 大田
事前公開版 Windows 10 に対応したデスクトップ アプリを作る技術 v1
事前公開版 Windows 10 に対応したデスクトップ アプリを作る技術 v1
一希 大田
スマートスピーカーのバックエンドでAzure を使う方法
スマートスピーカーのバックエンドでAzure を使う方法
一希 大田
Visual Studio App center 概要
Visual Studio App center 概要
一希 大田
はじめての HoloLens セッションの集大成お見せします!
はじめての HoloLens セッションの集大成お見せします!
一希 大田
Más de 一希 大田
(20)
.NET 7 での ASP.NET Core Blazor の新機能ピックアップ
.NET 7 での ASP.NET Core Blazor の新機能ピックアップ
Power Apps + C#
Power Apps + C#
Azure Static Web Apps を試してみた!
Azure Static Web Apps を試してみた!
Visual studio 2019 updates pickup!
Visual studio 2019 updates pickup!
.NET 5 and Windows app dev
.NET 5 and Windows app dev
Uno Platform 触ってみた
Uno Platform 触ってみた
WPF on .NET Core 3.1 で Windows 10 アプリ開発
WPF on .NET Core 3.1 で Windows 10 アプリ開発
.NET Core 3.0 + Windows 10 で WPF 開発
.NET Core 3.0 + Windows 10 で WPF 開発
はじめよう Azure Functions
はじめよう Azure Functions
Windows 10 対応のデスクトップアプリを作る技術(事前公開版v2)
Windows 10 対応のデスクトップアプリを作る技術(事前公開版v2)
Xamarin.Forms アプリケーション 設計パターン
Xamarin.Forms アプリケーション 設計パターン
Windows 10 対応のデスクトップアプリを 作る技術(事前公開版)
Windows 10 対応のデスクトップアプリを 作る技術(事前公開版)
WPF on .NET Core 3.0
WPF on .NET Core 3.0
Visual Studio 2019 の個人的なお勧め機能(発表時点)
Visual Studio 2019 の個人的なお勧め機能(発表時点)
Visual Studio 2019 の個人的なお勧め機能
Visual Studio 2019 の個人的なお勧め機能
Windows 10 に対応した デスクトップ アプリを作る技術(事前公開版 v2)
Windows 10 に対応した デスクトップ アプリを作る技術(事前公開版 v2)
事前公開版 Windows 10 に対応したデスクトップ アプリを作る技術 v1
事前公開版 Windows 10 に対応したデスクトップ アプリを作る技術 v1
スマートスピーカーのバックエンドでAzure を使う方法
スマートスピーカーのバックエンドでAzure を使う方法
Visual Studio App center 概要
Visual Studio App center 概要
はじめての HoloLens セッションの集大成お見せします!
はじめての HoloLens セッションの集大成お見せします!
Último
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
CRI Japan, Inc.
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
sn679259
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
Toru Tamaki
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
Utilizing Ballerina for Cloud Native Integrations
Utilizing Ballerina for Cloud Native Integrations
WSO2
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
CRI Japan, Inc.
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
Toru Tamaki
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
新人研修 後半 2024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
atsushi061452
Último
(10)
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Utilizing Ballerina for Cloud Native Integrations
Utilizing Ballerina for Cloud Native Integrations
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
Windows ストアアプリのgrid viewを入門してみた
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.
とても長いので
素性を洗って、1から組み立ててみます。
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.
グルーピング
コンテンツをグルーピングして表示する グループ1 グループ2
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
Descargar ahora