Convert UIElement or UserControl to image or SVG

Aspose.Words Product Family
1

The application I’m working on creates a .docx report. It also contains a Page containing graphs that I’d like to include in that report.

Since taking a screenshot results in a too low resolution, I’m looking for a way to insert a vectorized representation.

Does anyone know of an automated way of converting a UIElement or UserControl to a vectorized format (svg/emf/word drawing)?

What I’ve tried:
UWP supports printing of UIElements, however the vectorized intermediary representation created this way cannot be accessed.

2

@bikmnp,

Thanks for your inquiry. You can export the graph in Word document to SVG or EMF file format. Please check the following code example. Hope this helps you.

If you still face problem, please share some more detail about your query along with input and expected output documents. We will then provide you more information about your query.

Document doc = new Document(MyDir + "in.docx");
Shape shape = (Shape)doc.GetChild(NodeType.Shape, 0, true);

// We can also retrieve the renderer for a shape by using the ShapeRenderer constructor.
ShapeRenderer r = new ShapeRenderer(shape);

ImageSaveOptions imageOptions = new ImageSaveOptions(SaveFormat.Svg)
{
    // Output the image in gray scale
    ImageColorMode = ImageColorMode.Grayscale,

    // Reduce the brightness a bit (default is 0.5f).
    ImageBrightness = 0.45f
};

FileStream stream = new FileStream(MyDir + "Out.svg", FileMode.CreateNew);

// Save the rendered image to the stream using different options.
r.Save(stream, imageOptions);
3

@tahir.manzoor,

First, thank you for your swift response.

Unfortunately, I’m not trying to save a shape present in the Word document. Instead, I’m trying to save one of the UserControls present in the application.

The reason I want to do this is because the UserControl is a nice-looking bar chart that is displayed on the screen, but also belongs into the report generated.
I’d like to avoid having to write drawing code that simply mirrors the DOM for each of these charts.

4

@bikmnp,

Unfortunately, your question isn’t clear enough therefore we request you to please elaborate your inquiry further. Also, please supply input/output documents and your current code for testing. This will help us to understand your scenario, and we will be in a better position to address your concerns accordingly.

5

For further context:
The application visualizes data on screen. However, I’d also like to print these visualizations in a report.

I have compiled a small demo project

To run the test:

  • press button “1”
  • press button “2”
  • select the file svg_test.doc in the openfilepicker
  • select a save location for the file being generated

I’d like to run this for other UIElements than Chart.

The class SvgBuilder.cs mimics the functionality I’m looking for. Does something like SvgBuilder.cs exist in Aspose? Do you perhaps see a different solution?

Playground.zip (503.0 KB)

6

@bikmnp,

Thanks for sharing the detail. Aspose.Words does not provide API to convert UIElement or UserControl to image or SVG. However, you can insert SVG into document using Aspose.Words.

Please note that Aspose.Words for .NET is just a class library and with it you can programmatically generate, modify, convert, render and print documents without utilizing Microsoft Word®.

7

@tahir.manzoor

Does perhaps one of the other Aspose modules offer any such functionality?

8

@bikmnp,

Thanks for your inquiry. Unfortunately, Aspose products do not support this functionality. However, you work around this issue using following solution.

  1. Generate the document as you are doing in your code.
  2. Export the Shape node (image) to vector image. Please check the code example in my post this thread.
  3. You can insert this vector image into Word document using Aspose.Words. You need to move the cursor to the shape node and insert the image.
  4. Remove the Shape node that is inserted into document at step 1.