MetroApp保存UIEment为图片

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

写本文的起因是想截取Metro App画面作为图片来使用Win8的共享。

话说自从大MS的客户端UI技术进入XAML时代之后，每次截屏的代码都不太一样，无论silverlight、WPF还是Windows Phone都不完全一样，搞得我头昏脑胀，每次都要搜索一下才写的出来。反观Winform许久未写，如何截屏我还记得一清二楚……真是尴尬……顺带吐槽Metro的各种奇葩Stream类，那跟.NET的Stream类互转那叫一个惨烈和别扭啊。

花开两头，各表一枝。接下来我们进入今天的正题——如何在Metro下截屏，我再吐槽一下MS,这个截屏用的API似乎Win8.1才开放，还在用Win8的话还是撸撸睡吧……

首先我们要用到一个奇葩类，这次真的不是WriteableBitmap了，这次的主角是叫做RenderTargetBitmap。

var bitmap = new RenderTargetBitmap();
await bitmap.RenderAsync(this.rootGrid);
IBuffer buffer = await bitmap.GetPixelsAsync();
var stream = buffer.AsStream();

要想转换UIElement到Stream，通过以上几步就可以了，this.rootGrid是一个UIElement控件，也就是我想保存的图像。值得一提的是AsStream是一个扩展方法，记得要添加namespace System.Runtime.InteropServices.WindowsRuntime哟！

如果是WPF应用，得到Stream之后存为图片文件是很容易的事情了，分分钟秒杀的程度，问题Metro下面还需要再折腾折腾……

首先你需要创建一个StorageFile来存放这个图片，一个比较容易的方式是使用FileSavePicker。

FileSavePicker savePicker = new FileSavePicker();
savePicker.SuggestedStartLocation = PickerLocationId.Desktop;
savePicker.FileTypeChoices.Add("Bitmap", new List<string>() { ".png" });
savePicker.SuggestedFileName = "New Bitmap"; StorageFile savedItem = await savePicker.PickSaveFileAsync();

接下来你可能会想StorageFile也有了，Stream也有了，应该往StorageFile里写Stream就行了。

可惜不是，直接使用FileIO.WriteBufferAsync的方法来写入图片文件是不行的。文件会无法作为图片正常显示。

我们需要使用BitmapEncoder来写入Stream，而WinRT下的这个BitmapEncoder，又需要WinRT的IRandomAccessStream才能使用。

Guid encoderId = BitmapEncoder.PngEncoderId;
IRandomAccessStream fileStream = await savedItem.OpenAsync(Windows.Storage.FileAccessMode.ReadWrite);
BitmapEncoder encoder = await BitmapEncoder.CreateAsync(encoderId, fileStream);
byte[] pixels = new byte[pixelStream.Length];
pixelStream.Read(pixels, , pixels.Length); //pixal format shouldconvert to rgba8
for (int i = ; i < pixels.Length; i += )
{
byte temp = pixels[i];
pixels[i] = pixels[i + ];
pixels[i + ] = temp;
} encoder.SetPixelData(
BitmapPixelFormat.Rgba8,
BitmapAlphaMode.Straight,
(uint)bitmap.PixelWidth,
(uint)bitmap.PixelHeight,
, // Horizontal DPI
, // Vertical DPI
pixels); await encoder.FlushAsync();