Windowsストアアプリのメディアファイル操作の基礎

速習 Windowsストアアプリケーション 第7回

StorageFile

　画像だけに限りませんが、ファイルピッカーなどで画像ファイルを取得した場合に、StorageFileに格納するケースがよくあります。

　StorageFileクラスに格納した画像をImageコントロールに渡して画面に表示することや、WriteableBitmapクラスに渡して加工することができます。

StorageFileからImageコントロールに表示するまで

// ローカルストレージに保存されたLogo.pngを取得
StorageFile localFile = await StorageFile.GetFileFromApplicationUriAsync(new Uri("ms-appdata:///local/Logo.png"));

// ストリーム(IRandomAccessStream)として取り出す
var stream = await localFile.OpenReadAsync();

// BitmapImageクラスにストリームを渡す
BitmapImage bitmap = new BitmapImage();
bitmap.SetSource(stream);

// ImageコントロールのSourceプロパティに代入して表示
this.image.Source = bitmap;

　StorageFileクラスに格納した画像のプロパティを取得したい場合は、Properties.GetImagePropertiesAsyncメソッドで取得できます。

StorageFileクラスから画像のプロパティを取得する

ImageProperties pickProp = await imageFileStorage.Properties.GetImagePropertiesAsync();

BitmapImage

　StorageFileのサンプルでも登場しましたが、BitmapImageクラスはそのままImageコントロールのSourceプロパティに渡せるので出番の多いクラスです。

　ImageコントロールのSourceに渡せるのは、それ以外にも後述するWriteableBitmapがありますが、こちらは画像加工用という使い方なので、通常はBitmapImageを使うことになります。

ImageBrush

　ImageBrushは、Imageコントロール以外のコントロールに画像を指定する場合に利用します。

ImageBrushサンプル

<Canvas HorizontalAlignment="Left" Height="281" Margin="247,219,0,0" VerticalAlignment="Top" Width="322">
    <Canvas.Background>
        <ImageBrush ImageSource="Assets/icon.png"/>
    </Canvas.Background>
</Canvas>

　サンプルは、CanvasコントロールのBackground（背景）にImageBrushを指定したものです。

ImageBrushを指定

WriteableBitmap

　画像をピクセルごとに取得して処理をしたり、加工したりすることができる便利なクラスです。WriteableBitmapは、さらに機能を拡張するWriteableBitmapExと合わせて利用することが多いクラスです。

WriteableBitmapExの導入

　WriteableBitmapExは、WriteableBitmapクラスを拡張するライブラリで、導入はNuGetから行います。

NuGetからWriteableBitmapExを導入する

画像の生成

　WriteableBitmapを用いて画像を生成できます。

　以下のサンプルでは、WritableBitmapクラスを生成して白に塗りつぶした画像を生成しています（WriteableBitmapExで拡張済み）。

WriteableBitmapから画像を生成する

WriteableBitmap writeableBitmap = new WriteableBitmap(200, 200);

// 白く塗りつぶす
writeableBitmap.FillRectangle(0, 0, 200, 200, Colors.White);

// WriteableBitmapはImageコントロールのSourceプロパティに指定可能
image.Source = writeableBitmap;

　WriteableBitmapクラスは、ImageコントロールのSourceプロパティに直接代入できます。

画像を合成する

　画像の合成もWriteableBitmapを使います。

ImageBrushサンプル

WriteableBitmap writeableBitmapA = new WriteableBitmap(200, 200);
WriteableBitmap writeableBitmapB = new WriteableBitmap(200, 200);

writeableBitmapB.FillRectangle(0, 0, 200, 200, Color.FromArgb(0x66, 0xff, 0x00, 0x00));

StorageFile localFile = await StorageFile.GetFileFromApplicationUriAsync(new Uri("ms-appx:///Assets/Logo.png"));
var stream = await localFile.OpenReadAsync();

writeableBitmapA.SetSource(stream);

// Blitメソッドで合成する
writeableBitmapA.Blit(new Rect(0, 0, 100, 100), writeableBitmapB, new Rect(0, 0, 100, 100), WriteableBitmapExtensions.BlendMode.Alpha);

this.image.Source = writeableBitmapA;

　上記サンプルコードは以下の結果を得られます。

画像を合成する