[win8.1] RenderTargetBitmapクラスで、XAMLをビットマップ形式で保存する

投稿日: 2013/07/04 作成者: masuda

WPFには RenderTargetBitmap クラスがあって、XAMLの要素を指定して画像を保存できたのですが、なぜか Windows 8 ではできませんでした。が、Windows 8.1 になって、これが導入されたのでストアアプリでお絵かきツールが作れますよ。ってのが、今回の変更で一番大きいかと…いや、そういう方もいらっしゃると思います。

XAML render to bitmap sample (Windows 8.1)
http://code.msdn.microsoft.com/windowsapps/XAML-render-to-bitmap-dd4f549f

をダウンロードすると、動的に矩形を追加させた後 grid を保存できます。
あれこれと、ごちゃごちゃしたサンプルなので、ばっさりと削ってしまってあらかじめ Canvas に Image やら TextBlock やらを貼り付けておいて、PNG形式で保存するソースが以下です。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
private async void Button_Click(object sender, RoutedEventArgs e)
{
    // Render to an image at the current system scale and retrieve pixel contents
    RenderTargetBitmap renderTargetBitmap = new RenderTargetBitmap();
    await renderTargetBitmap.RenderAsync(this.panel);
    var pixelBuffer = await renderTargetBitmap.GetPixelsAsync();
 
    var savePicker = new FileSavePicker();
    savePicker.DefaultFileExtension = ".png";
    savePicker.FileTypeChoices.Add(".png", new List<string> { ".png" });
    savePicker.SuggestedStartLocation = PickerLocationId.PicturesLibrary;
    savePicker.SuggestedFileName = "snapshot.png";
 
    // Prompt the user to select a file
    var saveFile = await savePicker.PickSaveFileAsync();
 
    // Verify the user selected a file
    if (saveFile == null)
        return;
 
    // Encode the image to the selected file on disk
    using (var fileStream = await saveFile.OpenAsync(FileAccessMode.ReadWrite))
    {
        var encoder = await BitmapEncoder.CreateAsync(BitmapEncoder.PngEncoderId, fileStream);
 
        encoder.SetPixelData(
            BitmapPixelFormat.Bgra8,
            BitmapAlphaMode.Ignore,
            (uint)renderTargetBitmap.PixelWidth,
            (uint)renderTargetBitmap.PixelHeight,
            DisplayInformation.GetForCurrentView().LogicalDpi,
            DisplayInformation.GetForCurrentView().LogicalDpi,
            pixelBuffer.ToArray());
 
        await encoder.FlushAsync();
    }
}

サンプルより抜粋…というか、そのままですね。RenderTargetBitmap クラスの RenderAsync メソッドで XAML 要素からレンダリングの画像データを取ってきて、GetPixelsAsync メソッドで byte 配列にします。実に簡単。。必要な namespace は、適宜 VS2013 preview を使って加えてください。

デザイン時に以下のように画像を貼り付けます。Opacity で半透明にしたりとか色々。回転させても大丈夫です。

実行時

そして、Save ボタンを押して保存した結果

バカバカしいほど簡単にできます…つーか、これが Windows 8 で実装されていなかったのが不思議なぐらい。
ちなみに画面の外に出てしまった時はどうなるのか？というと、大丈夫です。きちんと RenderTargetBitmap が対象にしている XAML 配下をきちんとレンダリングしてくれているので、はみ出た分も画像ファイルとして保存されます。
これでストア版のお絵かきツール作成がはかどりますね。

サンプルのダウンロードは以下からどうぞ
PanelToBitmap-v0.1.zip
http://sdrv.ms/1aEOZeu

カテゴリー: C#, WinRT パーマリンク