画像の一覧表示と、ListBoxに表示されたYoutubeの再生を試す
![](https://thinkit.co.jp/sites/default/files/styles/main_image_730x/public/main_images/3793_main_7.png?itok=WhXwqsoF)
今回は2つのサンプルを紹介します。「画像を横一列に表示する」と「ListBoxより選択されたYoutubeを再生する」の2つです。最初は、「画像を横一列に表示する」を紹介します。
画像を一覧表示するフォルダを作る
今回のサンプルではピクチャライブラリ内のageRecordsというサブフォルダ内の画像を、横一列に表示します。
個人的な話で申し訳ないのですが、私はFacebookで「老いの記録」と題して、毎日、自分の写真を投稿しています。この写真を保存しているのが、ピクチャライブラリのageRecordsというフォルダです。皆さんが使う場合は、例えば子どもの成長を記録する写真や、毎日作るお弁当などの写真を保存してみると良いかもしれません。
実際に試す場合は、ピクチャライブラリ内にageRecordsというフォルダを作って、その中に画像を置いてください。またはダウンロードしたソースコード内の、ageRecordsフォルダを別名のフォルダに置き換えて、その中に画像を配置してお試しください。サンプルをダウンロードして実行しただけでは何も表示されませんので、前述の手順に従って画像を配置してからお試しください(図1)。
![](/sites/default/files/articles/379301.png)
実際に動かした動画は下記のようになります。Windows Store Applicationの動画を撮るアプリケーションが存在していませんので、スマホでとった動画です。見難い点はご了承願います。
サンプル一式は、会員限定特典としてダウンロードできます。記事末尾をご確認ください。
プロジェクトの作成
VS 2012のメニューから[ファイル(F)/新規作成(N)/プロジェクト(P)]と選択します。次に、「テンプレート」から「Windows ストア」を選択し、右に表示される項目名から「新しいアプリケーション(XAML)」を選択します。「名前(N)」に任意のプロジェクト名を指定します。ここでは「Win8_OldRecord」という名前を付けています。
コントロールの配置
ツールボックスからデザイン画面上にScrollViewerコントロールを1個、GridViewコントロールを1個配置しています。GridViewコントロールは、データを水平方向に表示するコントロールです。
ScrollViewerのHorizontalScrollBarVisibilityプロパティにVisibleを指定し、水平スクロールバーを表示するようにしています。GridViewコントロールのFlowDirectionには「LeftToRight」を指定し、左から右に向かって表示されるようにしています。またHeightには520を、Widthに1920と指定します(図2)。このWidthの値は筆者のPCの解像度(1920×1080)から設定しています。
ピクチャライブラリへのアクセス許可の設定
今回のサンプルは「ピクチャライブラリ」にアクセスするため、ピクチャライブラリへのアクセス許可が必要になります。ソリューションエクスプローラー内にpackage.appxmanifestというファイルがありますので、このファイルをダブルクリックします。「機能」タブをクリックします(図3)。
「機能」タブが開いたら、左の「機能:」内にある、「画像ライブラリ」にチェックを付けます(図4)。この作業は重要で、「ドキュメントライブラリ」「マイク」「音楽ライブラリ」「ビデオライブラリ」「Webカメラ」等へのアクセスを必要とする場合は、ここで設定を行います。
画像を横一列に表示するサンプルアプリ
ListBoxに表示されたYoutube動画を再生するサンプルアプリ
連載バックナンバー
Think ITメルマガ会員登録受付中
全文検索エンジンによるおすすめ記事
- ListBoxに表示された画像をポップアップメニューから削除する+1つのサンプル
- 画像に各種フィルタを適用して保存するWindowsアプリを作る
- Webカメラで撮影した写真をセピア調に演出するアプリを作る
- CountDownControlを使ってカウントダウン後にカメラのシャッターを切る
- 場所と写真を記録するプログラムを作って思い出のシーンを保存しよう
- お気に入りの写真に登場する、仲良しクラウディアちゃん
- ピクチャライブラリ内の画像を指定して表示する+1つのサンプル
- PCで撮影した写真を並べて最適な1枚を選べるプログラムをつくる
- お花とクラウディアさんを合成して表示するプログラムを作る
- 写真と現在位置を入れた画像日記アプリを作る