Often times, you want to take a screenshot of an application’s page. There can be multiple reasons for this. For instance, you can use this to provide an easy feedback method to beta testers. So in this article I shall be providing you with a simple way of doing it.
In the following example given below I shall be taking the screenshot of the whole page except the application bar buttons as shown in the image below.
We will be using WriteableBitmap to capture the screen. Its Render method takes two parameters, UIElement and Transform. We specify the LayoutRoot (the root element for the UI defined in XAML) as the UIElement which renders the whole UI into the bitmap. The second parameter is the MatrixTransform which is applied to elements before they are drawn into the bitmap – we specify an empty transform in this case so that elements are drawn as they would be to the device screen.
You can easily capture the screenshot by following the steps given below
1. Select the UI Element(example Grid,StackPannel) whose image you want to capture. In the above example it is LayoutRoot.
2. Then take a WriteableBitmap of the same size (height and width) as that of UI Element.
3. Render the UI element of WriteableBitmap.
4. Then save the following image to your Medialibrary.
The code for the following is given below
Namespace required are
Code for the click event handler of save button is
You can download the full project source from the link given below.