しっぽを追いかけて

ぐるぐるしながら考えています

Unity と猫の話題が中心   掲載内容は個人の私見であり、所属組織の見解ではありません

UWP で UIElement の外観をそのまま画像化して PNG ファイルに保存したい

アプリロゴの見た目が画面に表示できるようになったら、画像としてファイル保存までいきたい

ということで、UWP でコントロールの外観を PNG 画像ファイルに保存してみたいと思います


追加したのは UIElements の拡張クラス

namespace Windows.UI.Xaml
{
    /// <summary>
    /// UIElement extension class
    /// </summary>
    public static partial class UIElementExtension
    {
        /// <summary>
        /// Save UI element visual image to ong file
        /// </summary>
        /// <param name="element">target UI element</param>
        /// <param name="filepath">save file name</param>
        /// <param name="folder">save file path folder</param>
        /// <returns>Task</returns>
        public static async Task SaveAsync(this UIElement element, string filepath, IStorageFolder folder = null)
        {
            var bitmap = new RenderTargetBitmap();
            await bitmap.RenderAsync(element);

            var pixelBuffer = await bitmap.GetPixelsAsync();
            var pixels = pixelBuffer.ToArray();
            var displayInformation = DisplayInformation.GetForCurrentView();

            if (folder == null)
            {
                folder = ApplicationData.Current.LocalFolder;
            }

            var file = await folder.CreateFileAsync(filepath, CreationCollisionOption.ReplaceExisting);

            using (var stream = await file.OpenAsync(FileAccessMode.ReadWrite))
            {
                var encoder = await BitmapEncoder.CreateAsync(BitmapEncoder.PngEncoderId, stream);

                // 8 bit color reduction 
                encoder.SetPixelData(
                    BitmapPixelFormat.Bgra8,
                    BitmapAlphaMode.Premultiplied,
                    (uint)bitmap.PixelWidth,
                    (uint)bitmap.PixelHeight,
                    displayInformation.RawDpiX,
                    displayInformation.RawDpiY,
                    pixels);

                await encoder.FlushAsync();
            }
        }
    }
}

UWP でも RenderTargetBitmap は健在!簡単にキャプチャできそうですね

f:id:matatabi_ux:20150930205956p:plain

試しにこんなロゴを画面から PNG 画像に保存すると

f:id:matatabi_ux:20150930211126p:plain

いっぱい画像ができました!