撮影した写真と手持ちの画像を合成して保存するサンプルアプリ

今回のサンプルは、2枚の画像を合成して、ピクチャライブラリ内のTextureというサブフォルダーに保存するサンプルです。

画面には[元画像]、[合成]、[テクスチャ]、[保存]の4つのボタンが表示されています。[元画像]をクリックして任意の画像を選択します。次に[テクスチャ]ボタンから、元の画像と合成したい画像（例えば柄模様の画像など）を選択します（図1）。[合成]ボタンをクリックすると2枚の画像が合成して表示されます（図2）。[保存]ボタンをクリックすると合成した画像が保存されます（図3）。

図1：元となる画像と合成したい画像を選択した（クリックで拡大）

図2：[合成]ボタンをクリックした2枚の画像を合成した（クリックで拡大）

図3：[保存]ボタンをクリックし、Textureフォルダーに保存した（クリックで拡大）

実際に動かした動画は下記のようになります。Windows Store Applicationの動画を撮るアプリケーションが存在していませんので、スマホで撮った動画です。見難い点はご了承願います。

サンプル一式は、会員限定特典としてダウンロードできます。記事末尾をご確認ください。

プロジェクトの作成

VS 2012のメニューから[ファイル(F)／新規作成(N)／プロジェクト(P)]と選択します。次に、「テンプレート」から「Windows ストア」を選択し、右に表示される項目名から「新しいアプリケーション(XAML)」を選択します。「名前(N)」に任意のプロジェクト名を指定します。ここでは「Win8_WriteableBitmapEx_Bilt」という名前を付けています。

NuGetパッケージの管理

今回はCodePlexで公開されている、WriteableBitmapEx1.0を使用します。WriteableBitmapEx1.0については下記のURLを参照してください。
→　WriteableBitmapEx

WriteableBitmapEx1.0をインストールするには、ソリューションエクスプローラー内の「全てのファイルを表示」して、表示された「参照設定」の上でマウスの右クリックをします。「NuGetパッケージの管理(N)」が表示されます（図4）。

図4：「NuGetパッケージの管理(N)」を表示する（クリックで拡大）

表示された画面の左に表示されている、「オンライン」を選択し、検索欄にWriteableBitmapExと入力します。するとWriteableBitmapExの〔インストール(I)〕画面が表示されますので（図5）、インストールをクリックします。

図5：「NuGetパッケージの管理(N)」からWriteableBitmapExをインストールする（クリックで拡大）

インストールが成功するとインストール済みのチェックアイコンが表示されます（図6）。

図6：インストール済みのチェックアイコンが表示される（クリックで拡大）

[閉じる]ボタンをクリックして画面を閉じます。ソリューションエクスプローラー内の「参照設定」を見るとWriteableBitmapEx.WinRTが追加されています。同時にWriteableBitmapEx.WinRTの情報が記述された、packages.configも作成されます（図7）。

もし、WriteableBitmapEx.WinRTを削除して、再度「NuGetの管理(N)」からインストールしようとしても、このpackages.configが存在していると、インストール済みとなってしまいますので、このファイルも削除する必要があります。

図7：「参照設定」内にWriteableBitmapEx.WinRT が追加された。またpackages.config もプロジェクト内に追加されている（クリックで拡大）