Capture complete page design into image, windows phone 8.1

Question

I am developing windows mobile app 8.1,

I'd like to convert complete design in page(wpf control) into image. Currently I have implemented screenshot capture task using this

Its capture currently viewing area not complete page if page design has scroll-able. If I want to convert complete page design with scrollable design, how to do this?

Please check it below screen shot

This is the problem, var renderTargetBitmap = new RenderTargetBitmap(); await renderTargetBitmap.RenderAsync(uielement);

its capture only current viewing area instead of complete uielement content.

Is it possible to capture complete uielement content?

Wpf visuals can render themselves into [bitmap](https://msdn.microsoft.com/en-us/library/system.windows.media.imaging.rendertargetbitmap.aspx). Simply make bitmap big enough and render [proper element](http://stackoverflow.com/q/24934276/1997232). — Sinatr, Jan 07 '16 at 15:45

Kristian Vukusic · Answer 1 · 2016-01-08T05:16:02.243

You can use the RenderTargetBitmap class. Create an extension method which takes any UIElement of which you want to create an image (in this case it will be your page) and a file into which the generated image will be saved. The method return true if successful:

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;
    }
}

You need to make sure that your UIElement is in the visual tree (rendered), otherwise the method will not work.

Then you can call the method like this:

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

EDIT:

Your problem appears because the ListView is virtualized and therefore not all items are rendered. You can disable virtualization by using a StackPanel as the items panel of the list view:

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

Another problem is if you are passing the container of the listview (grid or whatever it is), only the container bounds will be displayed in the generated image, so you need to pass the ListView reference to the SaveVisualElementToFile method.

Thanks Kristian, this code I already implemented which is capture only viewing part instead complete control design. I have taken once grid and in that i took listview which have 10 records , In device 5 records shown at time you can scroll for rest record. I will share you screenshot so you will get easily what my problem — Kishor T, Jan 08 '16 at 03:47

Capture complete page design into image, windows phone 8.1

1 Answers1