RadDiagram ExportToImage gets focused state also in the image

[Aakansha]

I am using Telerik Ui for wpf in which I am using Telerik RadDiagram.I am trying to create many shapes on the WPF and export that to the image. I am able to export that to the image. If on the WPF application, my one of the shapes is selected and I click on save, I get that text box as selected even in the image. The image shown in abcde.png is getting exported but I want the image to be like abcdef.png even if the user has the focus on the node before doing a click on save.

I noticed that if i do a left-click on the screen of WPF where there are no diagrams, the selected element is no more selected and exporttoimage function gets me the correct image. But when I programatically generated a left mouse click on screen and then called ExportToImage function, this doesnt get me the correct image. Is there any way in which I am can enable ExportToImage function to do this??

[Pavel R. Pavlov]

Hi,

The export to image feature actually captures the screen and exports everything that you can see. This is why exporting the selection of the shapes is expected. In order to export the image that you need, you should clear the selection of the RadDiagram.

This can be done by binding the IsSelected item of the RadDiagramShape control to custom property exposed by your ViewModel. This way you will be able to control the selection of the RadDiagram through code.

<Style TargetType="telerik:RadDiagramShape">
    <Setter Property="IsSelected" Value="{Binding IsSelected, Mode=TwoWay}"/>
</Style>

Regards,
Pavel R. Pavlov
Telerik

 

 

[Aakansha]

Hello Pavel,

I was not able to implement what you told me in the above post.

I also found one more person having similar issue. The link is http://www.telerik.com/forums/wpf-diagram-exporttoimage-to-png-has-shape-connectors-visible-on-selected-shapes . I also implemented what ever is told in this blog post. My code still didnt work.

So I tried another approach where I reload the XML produced using Save method again. In XML produced, its not stored what all nodes are selected. And once the reloading is done, I call my ExportToImage function but this is cutting my image by around 100px in x and y direction. I am not able to understand the reason for this. I am attaching images and code snippets for the above implemented method by me.                                                                                                                                                                                                                                     Code 1: Initial code and Image1 attached as the output -  

File.WriteAllText("C:\Map1.xml, this.diagram.Save());

 using (var stream = File.Open("C:\Map1.png", FileMode.Create))
  {
          this.diagram.ExportToImage(stream);
  }

After modifications to get the correct image, I modified the code as below and Image2 is the output

File.WriteAllText("C:\Map1.xml, this.diagram.Save());

var xml = this.diagram.Save();
if (!string.IsNullOrEmpty(xml))
{
         this.diagram.Load(xml);
 }
  using (var stream = File.Open("C:\Map1.png", FileMode.Create))
  {
          this.diagram.ExportToImage(stream);
  }

[Pavel R. Pavlov]

Hello,

The approach that I previously suggested is demonstrated in the attached project. Please take a look at it and let me know if you need any further assistance.

Regards,
Pavel R. Pavlov
Telerik

 

 

[Aakansha]

Hello Pavel, I used the method in the above project and used IsSelected as binding. Hence now my selected node are getting unselected. I noticed that if I dnt use Dispatcher for ExportToImage method, I will still get selected node. Hence, I am using Dispatcher.BeginInvoke. In the sample application above, using this we are getting image but in my project Image is not getting produced. I am not able to understand reason behind this.

Any help on this??

[Aakansha]

As I have to close the WPF application, I modified the project code as

Dispatcher.BeginInvoke(new Action(() =>
{
    using (var stream = File.Open(@"c:\tmp\xDiagram.png", FileMode.Create))
    {
        xDiagram.ExportToImage(stream, margin: new Thickness(10));
    }
}),DispatcherPriority.Send);
this.Close();

Now, even the project attached...I dnt get the image

[Pavel R. Pavlov]

Hi Aakansha,

The Dispatcher with priority set to ApplicationIdle or SystemIdle is required because you actually change the visual state of the shapes when you unselect them. In order to apply the new state the RadDiagram needs time. The Dispatcher ensures that the exporting will be done when the new visual change is already applied.

I confirm that if the DispatcherPriority is set to Send the exporting is done before the visual states are applied. Are you saying that in your application the exporting is done before applying the unselected visual change even if you set the DispatcherPriority to ApplicationIdle?

Regards,
Pavel R. Pavlov
Telerik