次に、[ソリューション・エクスプローラー]内の「BiltShowImage.xaml」を展開して表示される、「BiltShowImage.xaml.vb」のコードを記述する。
ここではコードが長くなるため、一部省略している。全てのコードは、サンプルをダウンロードして「BiltShowImage.xaml.vb」ファイルで確認してほしい。
下記は、メンバー変数「myPictureFiles」を宣言する部分だ。
‘ 要素の厳密に型指定された読み取り専用のコレクションを表す、IReadOnlyCollection(Of IStorageFile)型の
‘ メンバー変数myPictureFilesを宣言する。
Private myPictureFiles As IReadOnlyCollection(Of IStorageFile)
画像の一覧を表示するDataShowタスクを実行する。非同期処理で行われるためメソッドの先頭にAsyncを追加する。
Protected Overrides Async Sub OnNavigatedTo(e As Navigation.NavigationEventArgs)
RemoveHandler GridView1.Loaded, AddressOf Me.GridView1_Loaded
Await DataShow()
End Sub
Private Async Function DataShow() As Task
GridView1.Items.Clear()
Dim myFolder As StorageFolder = Windows.Storage.KnownFolders.PicturesLibrary
Dim mySubFolder = Await myFolder.CreateFolderAsync("BiltImage", CreationCollisionOption.OpenIfExists)
myPictureFiles = Await mySubFolder.GetFilesAsync()
If myPictureFiles.Count = 0 Then
Dim message As New MessageDialog("画像はありません。戻ってください。")
Await message.ShowAsync
Exit Function
End If
For Each myPhotoFile In myPictureFiles
Dim bmp As New BitmapImage
bmp.SetSource(Await myPhotoFile.OpenSequentialReadAsync)
Dim myImage As New Image
myImage.Width = 640
myImage.Height = 480
myImage.Source = bmp
Dim myFileName As New TextBlock
myFileName.Text = myPhotoFile.Name
myFileName.FontSize = 20
myFileName.HorizontalAlignment = Windows.UI.Xaml.HorizontalAlignment.Center
Dim myStackPanel As New StackPanel
myStackPanel.Margin = New Thickness(3)
myStackPanel.Children.Add(myImage)
myStackPanel.Children.Add(myFileName)
GridView1.Items.Add(myStackPanel)
Next
AddHandler GridView1.Loaded, AddressOf Me.GridView1_Loaded
End Function
以降、上記コードの中身を詳細に見ていこう。
まず、非同期処理で行われるためメソッドの先頭にAsyncを追加している。GridView1内はクリアしておこう。
ピクチャライブラリーの「BiltImage」サブフォルダーにアクセスする。GetFilesAsyncメソッドでサブフォルダー内の画像を取得し、コレクションメンバー変数myPictureFilesに格納しておく。画像がない場合はメッセージボックスを表示し、処理を抜ける。
メンバー・コレクション変数myPictureFiles内のファイルを、myPhotoFile変数に格納しながら、以下の処理を行う。
新しいBitmapImageのインスタンス、bmpオブジェクトを作成する。SetSourceメソッドに、「Await myPhotoFile.OpenSequentialReadAsync」と指定して、順次読み取りアクセス用のストリームを開く。
新しいImageのインスタンス、myImageオブジェクトを作成する。Widthに「640」、Heightに「480」を指定し、Sourceプロパティにbmpオブジェクトを指定する。
新しいTextBlockのインスタンス、myFileNameオブジェクトを作成する。TextプロパティにmyPhotoFile.Nameを指定し、拡張子を含むファイル名を指定する。文字サイズには20を、文字位置は中央ぞろえとする。
StackPanelの新しいインスタンス、myStackPanelオブジェクトを作成する。Marginプロパティに「3」を指定して余白を設ける。
Addメソッドで、myStackPanelオブジェクトにmyImageオブジェクトとmyFileNameオブジェクトを追加する。GridViewに、画像とファイル名の追加されたmyStackPanelオブジェクトを追加する。これで、GridView1に画像の一覧が表示される。
AddHandlerステートメントでGridView1が読み込まれた時に、GridView1_Loadedイベントを追加する。
Private Sub GridView1_Loaded(sender As Object, e As Object)
Dim _myIndex As Integer = 0
_myIndex = myPictureFiles.Count - 1
If _myIndex < 0 Then
Exit Sub
Else
GridView1.Focus(Windows.UI.Xaml.FocusState.Keyboard)
GridView1.SelectedIndex = _myIndex
GridView1.ScrollIntoView(GridView1.SelectedItem)
End If
End Sub
Focusメソッドで、GridView1にフォーカスを移す。最後に追加された画像が選択されて、ScrollIntoViewメソッドで、その位置までスクロールするようにする。
これで最後に追加された画像にフォーカスが移り、キーボードの[←][→]キーで画像の選択ができるようになる。
※冒頭でも述べたが、Windows ストア・アプリでは、キーボードでも画像の選択ができなければ、ストアの審査でリジェクトされるため、注意していただきたい。
今回はここまでだ。また次回の記事でお会いしよう。次回は、手書きで入力した住所の位置をBing Mapsに表示する方法を紹介する。
本コンテストでは、2013年9月1日〜12月1日に新たにWindowsストアに新規公開されたアプリを募集します。入賞したアプリの製作者には、総額130万円の賞金が授与されますので、ふるってご応募ください。
PROJECT KySS 薬師寺 国安(やくしじ くにやす)
1950年生まれ。フリーVBプログラマ。高級婦人服メーカーの事務職に在職中、趣味でVBやActiveXに取り組み、記事を執筆。2003年よりフリー。.NETやRIAに関する執筆多数。Windowsストアアプリも多数公開中(約270本)。
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)。
PROJECT KySSは、1997年に薬師寺聖と結成したコラボレーション・ユニット
今でしょ! の終わりに安齋、家入らが評価したアプリとは〜「エイっと作ろう! Windowsストア アプリ選手権」授賞式レポート
初のアジャイル/リモート開発体制でも成功できた秘訣とは〜「Windowsタブレット向けアプリ開発」先駆けインタビュー
PC制御UIの最先端Leapアプリ開発入門(3):ProcessingやWindows 8.1アプリでLeapの空間ジェスチャを使うには
Web開発者が手っ取り早くストアデビューする方法(1):Windowsストアにアプリを登録するための事前準備
連載:Windowsストア・アプリ開発入門:第1回 Windowsストア・アプリってどんなもの?
特集:次期Windows 8.1&Visual Studio 2013 Preview概説(前編):大きく変わるWindowsストア・アプリ開発 〜 ビュー状態に関連する変更点
UXClip(11):これからが本番、Windows 8アプリ開発
Windows 8提供開始、対応アプリ登場は期待できるか?Copyright © ITmedia, Inc. All Rights Reserved.