FileOpenPickerクラスを使ってファイルを開く

この記事は、2012/7/13現在にリリースされている最新の「Windows 8 Release Preview(Build 8400)」、「Visual Studio 2012 RC」を利用しております。「Windows 8 Release Preview」は開発中のものであることにご留意ください。

Windows Phone 7ではローカルに保存されたファイルを選択するためには、独自にファイル選択ダイアログ(画面)を作成する必要がありました。

この記事では、FileOpenPickerクラスを使ってローカルに保存されているファイルを開く処理と、選択するファイル拡張子のフィルタリング、最初に開く場所の変更の仕方について紹介します。

Metro スタイルアプリでは、FileOpenPickerクラスを使って簡単にローカルに保存されたファイルを選択することができます。

Visual Studio 2012のXAMLデザイナを使って、ImageコントロールとButtonコントロールを配置してください。今回はFileOpenPickerの使い方の説明のみですので、ツールボックスからポトペタしてください。XAMLは以下の通りとなります。

<Page
    x:Class="OpenImageSample.MainPage"
    IsTabStop="false"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:OpenImageSample"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
        <Image x:Name="pictureImage" HorizontalAlignment="Left" Height="242" Margin="181,66,0,0" VerticalAlignment="Top" Width="366"/>
        <Button Content="Open" HorizontalAlignment="Left" Margin="578,270,0,0" VerticalAlignment="Top" Click="Button_Click_1"/>
    </Grid>
</Page>

FileOpenPickerクラスのインスタンスを生成し、ユーザーに選ばせたいファイル拡張子を1つ以上FileTypeFilterコレクションへ追加し、PickSingleFileAsyncメソッドでファイル選択UIを表示させることができます。

ここで注意しなければいけない点としては、ファイル拡張子の先頭は必ず「.」から開始し、ワイルドカード(*)を使ってはいけません。また、フィルタには1つ以上の拡張子を追加する必要があります。両方ともで例外が発生します。

最小限のサンプルコードを以下に示します。

var picker = new FileOpenPicker();
picker.FileTypeFilter.Add(".jpg");
var file = await picker.PickSingleFileAsync();

先ほどXAMLデザイナで配置したButtonコントロールがクリックされた場合、Button_Click_1を呼び出すようにしていました。選択UIには以下の2つのモードが存在しています。

PickerViewMode.List	アイテムの一覧を表示する(既定)
PickerViewMode.Thumbnail	サムネイルイメージを表示する

サムネイル表示
リスト表示

ここでは画像を選択させたいので選択UIの表示モードはサムネイルに設定します。表示モードを設定したい場合は、ViewModeプロパティにPickerViewMode.Listを設定します。

さらに選択UIで最初に表示される場所を設定することができます。以下の8つのうちのどれかから選択することができます。

PickerLocationId.DocumentsLibrary	ドキュメントライブラリ(既定)
PickerLocationId.ComputerFolder	コンピューターフォルダ
PickerLocationId.Desktop	デスクトップ
PickerLocationId.Downloads	ダウンロード
PickerLocationId.HomeGroup	ホームグループ
PickerLocationId.MusicLibrary	音楽ライブラリ
PickerLocationId.PicturesLibrary	画像ライブラリ
PickerLocationId.VideosLibrary	ビデオライブラリ

ここでは、SuggestedStartLocationプロパティに画像ライブラリであるPickerLocationId.PicturesLibraryを設定します。

private async void Button_Click_1(object sender, RoutedEventArgs e)
{
    // ローカルに保存されたファイルを取得する
    var picker = new FileOpenPicker();
    // 表示モードはサムネイル形式
    picker.ViewMode = PickerViewMode.List;
    picker.SuggestedStartLocation = PickerLocationId.PicturesLibrary;

    // カメラで撮影した画像だけで良いのでJPEGファイルのみを選択させるようにする
    picker.FileTypeFilter.Add(".jpg");

    // JPEGファイルは.jpegの拡張子も一般的であるのでフィルタへ追加
    picker.FileTypeFilter.Add(".jpdg");

    // ファイルを一つだけ選択させます
    var file = await picker.PickSingleFileAsync();

    // 取得した画像ファイルを読み込みImageコントロールで表示する
    var strm = await file.OpenReadAsync();
    var bitmap = new BitmapImage();
    bitmap.SetSource(strm);

    pictureImage.Source = bitmap;
}

上記のコードを実行してみました。

酢ろぐ！

カレーが嫌いなスマートフォンアプリプログラマのブログ。

FileOpenPickerクラスを使ってファイルを開く