ローカル環境にある画像を表示させよう

<Page
    x:Class="GetLocalImage.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:GetLocalImage"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
    <Viewbox>■(1)
        <Grid Background="Black" Height="767">
            <StackPanel  HorizontalAlignment="Left" Height="82"  VerticalAlignment="Top" Width="1356" Background="Navy" Orientation="Horizontal">
                <TextBlock HorizontalAlignment="Left" Height="68" Margin="20,15,0,-1" TextWrapping="Wrap" Text="ローカルの画像を指定" VerticalAlignment="Top" Width="492" FontSize="48" FontWeight="Bold"/>
            </StackPanel>
            <Image x:Name="Image1" HorizontalAlignment="Left" Height="480" Margin="368,126,0,0" VerticalAlignment="Top" Width="640"/>■(2)
            <TextBlock x:Name="TextBlock1" HorizontalAlignment="Left" Height="66" Margin="368,626,0,0" TextWrapping="Wrap"  VerticalAlignment="Top" Width="640" FontFamily="Meiryo UI" FontSize="48" FontWeight="Bold" TextAlignment="Center"/>■(3)
            <AppBarButton x:Name="openButton" HorizontalAlignment="Left" Height="94" Label="画像を読み込む" Margin="29,626,0,0" VerticalAlignment="Top" Width="141" Icon="OpenFile"/>■(4)
        </Grid>
    </Viewbox>■(1)
</Page>

では、次に、MainPage.xaml.vbをダブルクリックしてコードを記述します。

ロジックコード

まず、名前空間を読み込みます（リスト2）。

リスト2　名前空間の読み込み

ユーザーインターフェイス(UI)要素の作成と管理を行うためのクラスの含まれる、Windows.Storage.Pickers名前空間を読み込む。これにより、ユーザーは、ファイルの閲覧、開くファイルの選択、ファイルの格納場所の選択を行うことができる。

Imports Windows.Storage.Pickers

ファイル、フォルダーおよびアプリケーションの設定を管理するクラスの含まれる、Windows.Storage名前空間を読み込む。

Imports Windows.Storage

Public NotInheritable Class MainPage
    Inherits Page

次にメンバー変数を宣言する(リスト3)

リスト3　メンバー変数の宣言

ファイルを表すStorageFileクラス型のメンバー変数myFileを宣言する。

    Private myFile As StorageFile

次は、［画像を読み込む］アイコンがタップされた時の処理です（リスト4)。

リスト4［画像を読み込む］アイコンがタップされた時の処理

Image1を空にしておく。FileOpenPickerクラスの新しいインスタンスmyFilePickerオブジェクトを作成する。FileOpenPickerクラスは、ユーザーが選択し、ファイルを開くことのできるUI要素を表すクラスです。ファイルを開く最初の場所を設定するSuggestedStartLocationプロパティに、ピクチャライブラリーを指定しておく。開くファイルタイプを指定するFileTypeFilter.Addで「.jpg」と「.png」を指定しておく。ファイルを指定する場合は、FileTyleFilter.Add(".png")と指定する。"*.png"ではないので注意してほしい。PickSingleFileAsynメソッドで、ユーザーが1つのファイルを選択できるようにファイルピッカーを表示し、変数myFileで参照する。変数myFileがファイルを参照している場合は、新しいBitmapImageクラスのインスタンスmyBmpオブジェクトに、SetSourceメソッドで「Await myFile.OpenReadAsync」と指定する。そして、ファイルの内容を読み込むために、現在のファイルをランダムアクセスストリームで開く。Image1のSourceプロパティにmyBmpオブジェクトを指定すると、選択した画像が表示される。TextBlock1にはNameプロパティで拡張子を含むファイル名を取得して表示する。

    Private Async Sub openButton_Click(sender As Object, e As RoutedEventArgs) Handles openButton.Click
        Try
            Image1.Source = Nothing
            Dim myFilePicker = New FileOpenPicker
            myFilePicker.SuggestedStartLocation = PickerLocationId.PicturesLibrary
            myFilePicker.FileTypeFilter.Add(".jpg")
            myFilePicker.FileTypeFilter.Add(".png")
            myFile = Await myFilePicker.PickSingleFileAsync
            If myFile Is Nothing = False Then
                Dim myBmp As New BitmapImage
                myBmp.SetSource(Await myFile.OpenReadAsync)
                Image1.Source = myBmp
                TextBlock1.Text = myFile.Name
            Else
                Exit Sub
            End If
        Catch
            Exit Sub
        End Try
    End Sub
End Class

実行すると図3のように表示されます。

図3 ピクチャライブラリー内の任意のファイルを選択して表示した

では、次に、指定したフォルダー内の画像を全て表示するサンプルを紹介しましょう。