検索
連載

選択した画像と、テクスチャとなる画像を合成して保存するには：2カ月で160本作った還暦開発者が送る10のアプリ開発ノウハウ（7）（4/4 ページ）

古（いにしえ）からのVBでWindows 8.1向けのさまざまな機能のアプリを開発する手順やコツを解説していく。今回は、選択した画像と、テクスチャとなる画像を合成して保存する方法をサンプルを交えて解説する。

[薬師寺国安，PROJECT KySS] PC用表示 関連情報
Share
Tweet
LINE
Hatena
前のページへ | 　　　　　　

保存した画像を一覧するページのロジックコードを記述する

　次に、［ソリューション・エクスプローラー］内の「BiltShowImage.xaml」を展開して表示される、「BiltShowImage.xaml.vb」のコードを記述する。

　ここではコードが長くなるため、一部省略している。全てのコードは、サンプルをダウンロードして「BiltShowImage.xaml.vb」ファイルで確認してほしい。

　下記は、メンバー変数「myPictureFiles」を宣言する部分だ。

‘ 要素の厳密に型指定された読み取り専用のコレクションを表す、IReadOnlyCollection(Of IStorageFile)型の
‘　メンバー変数myPictureFilesを宣言する。
    Private myPictureFiles As IReadOnlyCollection(Of IStorageFile)

ページがアクティブになった時の処理（OnNavigatedToメソッド処理）

　画像の一覧を表示するDataShowタスクを実行する。非同期処理で行われるためメソッドの先頭にAsyncを追加する。

    Protected Overrides Async Sub OnNavigatedTo(e As Navigation.NavigationEventArgs)
        RemoveHandler GridView1.Loaded, AddressOf Me.GridView1_Loaded
        Await DataShow()
    End Sub

画像の一覧を表示する処理（DataShowメソッド処理）

    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イベントを追加する。

GridViewが読み込まれた時の処理（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に表示する

　今回はここまでだ。また次回の記事でお会いしよう。次回は、手書きで入力した住所の位置を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年に薬師寺聖と結成したコラボレーション・ユニット


Copyright © ITmedia, Inc. All Rights Reserved.

前のページへ | 　　　　　　
ページトップに戻る