将完整的页面设计捕获到图像中，windows phone 8.1答案

【问题标题】：Capture complete page design into image, windows phone 8.1将完整的页面设计捕获到图像中，windows phone 8.1
【发布时间】：2016-01-07 15:39:14
【问题描述】：

我正在开发windows mobile app 8.1，

我想将页面中的完整设计（wpf 控件）转换为图像。目前我已经使用this实现了截图捕获任务

如果页面设计具有可滚动性，则它捕获当前查看区域不完整页面。如果我想将完整的页面设计转换为可滚动设计，该怎么做？

请在屏幕截图下方查看

这就是问题所在， var renderTargetBitmap = new RenderTargetBitmap(); 等待 renderTargetBitmap.RenderAsync(uielement);

它只捕获当前查看区域而不是完整的 uielement 内容。

是否可以捕获完整的uielement内容？

【问题讨论】：

Wpf 视觉效果可以将自己呈现为bitmap。只需使位图足够大并渲染proper element。

标签： c# wpf windows-phone-8.1

【解决方案1】：

您可以使用RenderTargetBitmap 类。创建一个扩展方法，它接受您要创建图像的任何UIElement（在这种情况下它将是您的页面）和一个文件，生成的图像将保存到该文件中。如果成功，该方法返回true：

public static async Task<bool> SaveVisualElementToFile(this UIElement element, StorageFile file)
{
    try
    {
        var renderTargetBitmap = new RenderTargetBitmap();
        await renderTargetBitmap.RenderAsync(element);
        var pixels = await renderTargetBitmap.GetPixelsAsync();

        using (IRandomAccessStream stream = await file.OpenAsync(FileAccessMode.ReadWrite))
        {
            var encoder = await BitmapEncoder.CreateAsync(BitmapEncoder.PngEncoderId, stream);
            byte[] bytes = pixels.ToArray();
            encoder.SetPixelData(
                BitmapPixelFormat.Bgra8,
                BitmapAlphaMode.Straight,
                (uint)renderTargetBitmap.PixelWidth,
                (uint)renderTargetBitmap.PixelHeight,
                DisplayInformation.GetForCurrentView().LogicalDpi,
                DisplayInformation.GetForCurrentView().LogicalDpi,
                bytes);

            await encoder.FlushAsync();
        }

        return true;
    }
    catch (Exception)
    {
        return false;
    }
}

您需要确保您的UIElement 在可视化树中（已渲染），否则该方法将不起作用。

然后你可以这样调用方法：

StorageFolder localFolder = ApplicationData.Current.TemporaryFolder;
StorageFile file = await localFolder.CreateFileAsync(ShareSreenshotFileName, CreationCollisionOption.ReplaceExisting);
await view.SaveVisualElementToFile(file);

编辑：

出现您的问题是因为 ListView 已虚拟化，因此并非所有项目都已呈现。您可以使用StackPanel 作为列表视图的项目面板来禁用虚拟化：

<ListView>
    <ListView.ItemsStackPanel>
        <ItemsPanelTemplate>
            <StackPanel Orientation="Vertical"/>
        </ItemsPanelTemplate>
    </ListView.ItemsStackPanel>
</ListView>

另一个问题是如果你传递listview的容器（网格或其他任何东西），生成的图像中只会显示容器边界，所以你需要将ListView引用传递给SaveVisualElementToFile方法。

【讨论】：

感谢克里斯蒂安，我已经实现了这段代码，它只捕获查看部分而不是完整的控制设计。我已经采用了一次网格，并且我采用了具有 10 条记录的列表视图，在设备显示的 5 条记录中，您可以滚动查看休息记录。我将与您分享屏幕截图，以便您轻松了解我的问题