GridViewコントロールの使い方

2014年5月27日(火)
薬師寺 国安

今回はGridViewコントロールの使い方を解説します。GridViewコントロールは、データ アイテムを水平グリッドに表示するコントロールです。今回のサンプルでは、GridViewの中に任意の画像を表示する、とても基本的なサンプルを紹介します。今回の連載の対象読者がWindowsストア アプリ開発の初心者であるため、複雑なプログラムの解説はあえて避けています。まずは、GridViewコントロールでどのようなことができるのかを知ってもらい、その後各自がアレンジしていろいろな処理に挑戦してみてください。GridViewに関するWindows ストア アプリのサンプル解説は、筆者が過去の連載でたくさん掲載しているので、検索して読んでもらいたいです。

まずはGridViewを使うとどのようなことができるのか、図1を見てください。左右にスクロールして画像を表示できます。

GridViewに画像を表示して左右にスクロールできる
図1 GridViewに画像を表示して左右にスクロールできる

今回もプロジェクトの作成から入っていきましょう。プロジェクト名は「GridViewSample」とします。

ソリューションエクスプローラー内にImagesフォルダーを作成してローカルの画像を取り込む

ソリューションエクスプローラー内の「GridViewSample(Windows 8.1)というプロジェクトを選択し、マウスの右クリックで表示されるメニューから[追加]ー[新しいフォルダー]と選択して、「新しいフォルダー」を作成します(図2)。

新しいフォルダーを作成する手順
図2 新しいフォルダーを作成する手順

「NewFolder1」が作成され編集状態になっているので、「Images」という名前に変更します(図3)。編集状態になっていなくても、「NewFolder1」を選択して、マウスの右クリックで表示される[名前の変更]からも変更できます。

Imagesというフォルダーを追加した
図3 Imagesというフォルダーを追加した

次に、このImagesフォルダー内にローカルの画像を追加していきます。まずImagesフォルダーを選択して、マウスの右クリックで表示されるメニューから[追加]ー[既存の項目]と選択します(図4)。

Imagesフォルダーに[既存の項目]を追加する手順
図4 Imagesフォルダーに[既存の項目]を追加する手順

「既存の項目の追加」画面が表示され、ローカルフォルダーの中が表示されるので、任意の画像を選択して[追加]ボタンをタップします。筆者はピクチャライブラリ—に保存していた画像を追加しました。Imagesフォルダーに追加した画像の一覧が表示されます(図5)。追加する画像は、JPEGでもPNGでも構いませんが、できるだけ同じ形式の画像を追加してください。筆者はPNG画像を10枚ほど追加しました。

ソリューションエクスプローラー内のImagesフォルダーに追加した画像の一覧が表示された
図5 ソリューションエクスプローラー内のImagesフォルダーに追加した画像の一覧が表示された

これで画像の準備は整いました。次にこの画像を取り込むためのコントロールを「ツールボックス」から配置します。

  • GridViewに画像を表示させるプログラム

    『Windows ストア アプリ 100行プログラミング』 第5回のサンプルプログラムです。
薬師寺国安事務所

薬師寺国安事務所代表。Visual Basic プログラミングと、マイクロソフト系の技術をテーマとした、書籍や記事の執筆を行う。
1950年生まれ。事務系のサラリーマンだった40歳から趣味でプログラミングを始め、1996年より独学でActiveXに取り組む。1997年に薬師寺聖とコラボレーション・ユニット PROJECT KySS を結成。2003年よりフリーになり、PROJECT KySS の活動に本格的に参加、.NETやRIAに関する書籍や記事を多数執筆する傍ら、受託案件のプログラミングも手掛ける。Windows Phoneアプリ開発を経て、現在はWindows ストア アプリを多数公開中

Microsoft MVP for Development Platforms - Client App Dev (Oct 2003-Sep 2012)。Microsoft MVP for Development Platforms - Windows Phone Development(Oct 2012-Sep 2013)。Microsoft MVP for Development Platforms - Client Development(Oct 2013-Sep 2014)。Microsoft MVP for Development Platforms-Windows Platform Development (Oct 2014-Sep 2015)。

連載バックナンバー

Think ITメルマガ会員登録受付中

Think ITでは、技術情報が詰まったメールマガジン「Think IT Weekly」の配信サービスを提供しています。メルマガ会員登録を済ませれば、メルマガだけでなく、さまざまな限定特典を入手できるようになります。

Think ITメルマガ会員のサービス内容を見る

他にもこの記事が読まれています