今回は2つのサンプルを紹介します。「ListBoxに表示された画像をポップアップメニューから削除する」と「複数の画像を連続表示する」の2つです。
まずは、「ListBoxに表示された画像をポップアップメニューから削除する」サンプルから紹介します。
ListBoxに表示された画像をポップアップメニューから削除する
このサンプルは、ListBoxに表示されている任意の画像を選択し、マウスの右クリックで表示されるポップアップメニューから、「画像の削除」をクリックすると、選択されていた画像が削除されるというものです（図1）。「画像の削除」を実行する際には、必ず削除する画像を選択状態にして実行してください。なお、今回もピクチャライブラリ内の画像を使用しますので、ピクチャライブラリ内に何枚かの画像を配置しておいてください。
図1：ListBox内の任意の画像を削除した（クリックで拡大）
実際に動かした動画は下記のようになります。Windows Store Applicationの動画を撮るアプリケーションが存在していませんので、スマホで撮った動画です。見難い点はご了承願います。
VIDEO
サンプル一式は、会員限定特典としてダウンロードできます。記事末尾をご確認ください。
プロジェクトの作成
VS 2012のメニューから[ファイル(F)／新規作成(N)／プロジェクト(P)]と選択します。次に、「テンプレート」から「Windows ストア」を選択し、右に表示される項目名から「新しいアプリケーション(XAML)」を選択します。「名前(N)」に任意のプロジェクト名を指定します。ここでは「Win8_DeleteImageFile」という名前を付けています。
コントロールの配置
ツールボックスからデザイン画面上にListBoxコントロールを1個配置します。
書き出されるXAMLコードは省略します。レイアウトは図2になります。
図2：ListBoxコントロールを配置した（クリックで拡大）
ピクチャライブラリへのアクセス許可の設定
今回のサンプルは、ピクチャライブラリにアクセスしますので、「画像ライブラリ」へのアクセス許可が必要になります。ソリューションエクスプローラー内にpackage.appxmanifestというファイルがありますので、このファイルをダブルクリックします。「機能」タブをクリックして、表示される画面の「機能：」にある、「画像ライブラリ」にチェックを付けます（図3）。
図3：package.appxmanifestファイルを開き「画像ライブラリ」にチェックを付ける（クリックで拡大）
次に、ソリューションエクスプローラー内のMainWindow.xamlを展開して表示される、MainWindow.xaml.vbをダブルクリックしてリスト1のコードを記述します。
ロジックコードを記述する
リスト1 (MainWindow.xaml.vb)
ファイル、フォルダー、およびアプリケーションの設定を管理するクラスの含まれる、Windows.Storage名前空間をインポートします。
PopupMenuであるコンテキストメニューを表示させるのに必要なクラスの含まれる、Windows.UI.Popups名前空間をインポートします。
1Imports Windows.UI.Popups
2Public NotInheritable Class MainPage
フォルダーとその内容についての情報を提供する、StorageFolderクラス型のメンバ変数、myPictureFolderを宣言します。
1Dim myPictureFolder As StorageFolder
文字列型の新しいリストであるfileNameメンバ変数を宣言します。
1Dim fileNameList As New List(Of String)
ページがアクティブになった時の処理
ListBox内に画像の一覧を表示するDataShowプロシージャを実行します。
1Protected Overrides Sub OnNavigatedTo(e As Navigation.NavigationEventArgs)
ListBox内にピクチャライブラリ内の画像を表示する処理
ピクチャライブラリにアクセスします。GetFilesAsyncメソッドで、ピクチャライブラリ内のファイルを取得し、コレクション変数myPictureFilesに格納しておきます。
ファイル名を格納しているmyPictureFilesコレクション内のファイルを、変数myFileに格納しながら、反復処理を行います。
Imageの新しいインスタンスmyImageオブジェクトを作成します。
非同期処理で行われるため、メソッドの先頭にAsyncを追加します。Asyncが追加されていると、その処理が非同期で行われることを意味します。
01Private Async Sub DataShow()
02 myPictureFolder = KnownFolders.PicturesLibrary
03 Dim myPictureFiles As IReadOnlyList(Of IStorageFile) = Await myPictureFolder.GetFilesAsync()
04 ListBox1.Items.Clear()
05 For Each myFile In myPictureFiles
06 Dim bmp As New BitmapImage
07 bmp.SetSource(Await myFile.OpenReadAsync)
08 fileNameList.Add(Path.GetFileName(myFile.Path))
09 Dim myImage As New Image
10 myImage.Margin = New Thickness(0, 0, 0, 0)
14 ListBox1.Items.Add(myImage)
ListBox上にポインターがあった時、右タップの入力刺激があった時の処理
2次元空間でのXとY座標のペアを表すPoint構造体を、右タップされた時点のXとY座標で初期化します。位置合わせを行っています。
ListBoxの描画時の幅と高さで初期化された、新しいSizeのインスタンスmySizeオブジェクトを作成します。Size構造体はオブジェクトの幅と高さを表します。
四角形の幅、高さ、および原点を表すRect構造体を、Point構造体のオブジェクトmyPointと、Size構造体のオブジェクトmySizeで初期化した、新しいRectのインスタンス、myRectオブジェクトを作成します。
コンテキストメニューを表すPopupMenuクラスのインスタンス、myPopupオブジェクトを作成します。
Command.Addメソッドで、PopupMenuに項目名と、その項目をタップした際のコマンドを追加します。UICommandクラスは、コンテキストメニュー内のコマンドを表します。PopupMenuに「画像の削除」の項目を追加し、それに対するコマンド(ImageDelete)を追加します。
ShowForSelectionAsyncメソッドで、指定された選択項目を基準とする適切な位置に、コンテキストメニューを表示します。この場合はListBox内で右タップがされた位置の左側(Placement.Left）にコンテキストメニューが表示されます。Placement列挙体については、下記のURLを参考にしてください。Placement enumeration (Windows)
非同期処理で行われるため、メソッドの先頭にAsyncを追加します。Asyncが追加されていると、その処理が非同期で行われることを意味します。
01Private Async Sub ListBox1_RightTapped(sender As Object, e As RightTappedRoutedEventArgs) Handles ListBox1.RightTapped
02 Dim myPoint As Point = New Point(e.GetPosition(ListBox1).X + ListBox1.Width, e.GetPosition(ListBox1).Y - (ListBox1.Height / 2))
03 Dim mySize As New Size(ListBox1.ActualWidth, ListBox1.ActualHeight)
04 Dim myRect As New Rect(myPoint, mySize)
06 Dim myPopup As New PopupMenu
08 myPopup.Commands.Add(New UICommand("画像の削除", Sub(command)
11 Await myPopup.ShowForSelectionAsync(myRect, Placement.Left)
選択された画像を削除する処理
ListBoxコントロール内の画像が選択状態になっていない場合は、警告メッセージを表示して、処理を抜けます。
それ以外の場合は、以下の処理を行います。ファイル名を格納しているリストオブジェクトである、fileNameListで、ListBoxのインデックスに対応するファイルを、GetFileAsyncメソッドで取得し、DeleteImageFileに格納します。
非同期処理で行われるため、メソッドの先頭にAsyncを追加します。Asyncが追加されていると、その処理が非同期で行われることを意味します。
01 Private Async Sub ImageDelete()
02 If ListBox1.SelectedIndex < 0 Then
03 Dim message = New MessageDialog("画像を選択してください。")
04 Await message.ShowAsync
08 Dim DeleteImageFile = Await myPictureFolder.GetFileAsync(fileNameList(ListBox1.SelectedIndex))
09 fileNameList.RemoveAt(ListBox1.SelectedIndex)
10 Await DeleteImageFile.DeleteAsync()
11 Dim message = New MessageDialog("削除しました。")
12 Await message.ShowAsync
