マイクロソフト エバンジェリストのブログ

日本マイクロソフトのエバンジェリストが、技術情報を発信するブログです!

画面上のオブジェクトを画像に変換にする「あの機能が」が帰って来た!

UI系エバンジェリスト高橋です。

今回はWindows 8.1 で追加された地味にうれしい機能をご紹介します。

 

WriteableBitmap.RenderがなかったWindows 8

Silverlight や WPF、もちろん Silverlight をベースとした Windows Phone のアプリケーションプラットフォームには、WriteableBimap という Bitmapオブジェクトがあります。このWriteableBitmap には、 Renderというメソッドがあり、これによって画面上のオブジェクトをそのままBitmapオブジェクトに変換することができます。

いわば、スクリーンショット メソッドとでも言いましょうか?

しかし、Windows 8 の WinRT のWriteableBitmap にはこの Render メソッドがなく、画面の要素をBitmapに擦ることができなかったのです。

この件は世界中の開発者からリクエストが来た項目の一つとなりました。

 

そしてWindows 8.1 

そしてWindows 8.1になって、新しい手法がもたらされました。

Windows 8.1 では WriteableBitmap ではなく、RenderTargetBitmap が用意されこのRenderAsync メソッドにより同様の機能を実装することができます。

 RenderTargetBitmap class

 

実装は簡単

実装はシンプルです。新規でインスタンスを作り、bitmapにする画面上のオブジェクトを指定します。

    RenderTargetBitmap rtb = new RenderTargetBitmap();
    await rtb.RenderAsync(this.LayoutRoot);

これだけです。これで、画面上のオブジェクト LayoutRoot がBitmap となって、RenderTargetBitmap の中に生成されます。

 

画像ファイルに保存

もしこれをJpegでファイル保存しようとしたらこのようなメソッドに呼べばOKです。

private static async System.Threading.Tasks.Task SaveImage(RenderTargetBitmap rtb)
{
    FileSavePicker savePicker = new FileSavePicker() { DefaultFileExtension = ".jpg" };
    savePicker.FileTypeChoices.Add(".jpg", new List<string> { ".jpg" });

    StorageFile saveFile = await savePicker.PickSaveFileAsync();
    if (saveFile != null)
    {
        using (var fileStream = await saveFile.OpenAsync(FileAccessMode.ReadWrite))
        {
            BitmapEncoder encoder =
                await BitmapEncoder.CreateAsync(BitmapEncoder.JpegEncoderId, fileStream);

            IBuffer pixelBuffer = await rtb.GetPixelsAsync();
            byte[] pixels = pixelBuffer.ToArray();

            float dpi = DisplayInformation.GetForCurrentView().LogicalDpi;

            encoder.SetPixelData(BitmapPixelFormat.Bgra8, BitmapAlphaMode.Ignore,
                (uint)rtb.PixelWidth, (uint)rtb.PixelHeight, dpi, dpi, pixels);
            await encoder.FlushAsync();
        }
    }
}

あとは、RenderTargetBitmap を引数にして呼び出すだけですね。

    RenderTargetBitmap rtb = new RenderTargetBitmap();
    await rtb.RenderAsync(this.graph);
    await SaveImage(rtb);

 

MSDNサンプル

MSDNのサンプルがこちらにあります。結構大き目でわかりにくいかもしれませんが、参考までにどうぞ。

XAML render to bitmap sample

これでいろいろ画像系のアプリケーションの処理が広がります。

C#とXAMLによる Windows アプリ開発入門 ( 概要・資料と動画コース )

こんにちは。

マイクロソフトの渡辺 友太です。

C#とXAMLによる Widows アプリ開発入門 を、様々な技術トレーニングをオンラインで提供している Microsoft Virtual Academy よりご紹介します。

f:id:ms_eva:20131108091926p:plain

資料付の数分の動画で、初めて Windows 用のアプリを開発する人を対象に、今までなかなか聞けなかったことを分かりやすく解説しているので、ぜひご覧ください!

Windows ストア アプリ開発入門

そもそも Windows ストア アプリってなんでしたっけ?というところから。 Windows ストア アプリは、 Windows 8 から登場した新しい種類のアプリケーションで、Windows ストアを通じて世界中の Windows ユーザにアプリを公開・配布することができます。そんな Windows ストアの特徴から、開発の流れの全体像についてご説明します。

続きを見る ( 6分動画、資料付 )

Hello World ~ ストア アプリ / C# 編~

Windows ストア アプリの概要を掴んだうえで、まずは C# という開発言語を使って、Hello World という文字を表示する Windows ストア アプリを作る流れを見ていきます。開発には、Visual Studio というツールを使います。 Visual Studio にはアプリ開発に使えるテンプレートが入っているので、簡単にそれっぽいアプリを作ることができます。

続きを見る ( 5分動画、資料付 )

アプリ公開までの道のり

アプリを作った後、Windows ストアに公開するまでの流れをご紹介します。Windows ストアにアプリを公開するには、開発者ダッシュボードから必要事項を入力して、審査提出する必要があります。用意する必要があるものや、申請から公開までの全体像を確認しましょう。

続きを見る ( 10分動画、資料付 )

Windows ストア アプリ審査の注意点

さて、無事にアプリが公開されればいいのですが、先のストアの審査に合格しないと、アプリは Windows ストアに公開されません。最後に、審査で落ちやすいポイントのベスト3について注意点をご説明します。自分のアプリが該当しないか、ぜひ確認してみてください。

続きを見る ( 6分動画、資料付 )

このあとは

いまさら聞けない Windows アプリ 開発入門 XAML/C#編、いかがでしたか?アプリ開発に関するより詳しい情報は、Windows ストア アプリ開発に関する情報をまとめてご紹介する Windows ストアへの道から。また、アプリ開発に関する最新情報は、Facebook ページ GoApps をご覧ください!