Using Docking and a Canvas for drawings

[Guillermo]

Im using Telerik WPF Docking for my app. Some RadPanes have Canvas inside, for drawings (some are complex drawings, other are simple drawings. All the drawings are programmatically created). The problem is: the drawings look "weird" (see example). Im 100% sure my drawing functions are ok (my app is not new, just recently im trying to improve it with a Docking Manager). If I remove all the references to de Telerik Docking, the drawings are OK. If I use another docking (from another developer), the drawings are OK. In the debugging, coordinates, scales, margins, etc, are OK. If I add a Line with some coordinates, and then a Rectangle with same coordinates (see the example), the drawing looks deformed.

Help!

 

[Guillermo]

Update:

An app with two grid columns (see example Docking2.png)

First column, a Canvas

Second column: Docking, with a Pane, with a Canvas inside the Pane.

Same drawing function, at the same time... The drawing in the right is "deformed"

[Vladimir Stoyanov]

Hello Guillermo,

Thank you for the shared pictures. 

May I ask you to share some sample code/xaml that demonstrates how the result in the photos is achieved? Additionally, can you share what are the DPI settings on your machine (100% or higher)? You can also share any other information that you deem relevant. 

This will hopefully allow me to replicate the scenario on my end and investigate it.

Regards,
Vladimir Stoyanov
Progress Telerik

[Guillermo]

Thanks for your answer!

This is a simple project with two Canvas: one inside the RadDocking and other outside the docking. Press "PLOT" button and you will se two identical drawings... except if you do zoom (witth mouse scroll). You will see small differences. Those differences in this simple drawing are negligible, but in other complex drawings with small details of my app, those differences are visible without zoom and they are very annoying.

DPI Settings: 100 at FullHD.
Visual Studio Community 2019
.Net Framework 4.8

Project:

https://gitlab.com/WillyRed/teleriktest.git

[Guillermo]

Update:

The structure of the Docking in my app:

<Docking>
    <RadSplitContainer>
        <RadPaneGroup>
            <RadPane>
                CONTENT

If I remove the RadPane (the content directly inside the RadPaneGroup), the problem disappears, but I lost the behavior of the docking)... It seems that the origin of the problem is the "RadPane" control....

[Vladimir Stoyanov]

Hello Guillermo,

Thank you for the shared project. 

I investigated it on my end and while I was not able to figure out the exact reason for the described behavior, in general you can use the ContentTemplate of ContentControls (such as the RadPane for declaring their visuals). With such an approach I was not able to observe any problems while scaling the elements. 

Please, find the sample project modified to demonstrate what I have in mind.

Hope you find this helpful. 

Regards,
Vladimir Stoyanov
Progress Telerik

[Guillermo]

Thanks for your solution. The ContentTemplate works, but in my project I use UserControls with a lots of controls inside, and these UserControls are inside RadPanes, and they are created programmatically when they are needed. Sadly, I could not implement your solution (ContentTemplate) with UserControls programmatically.

[Vladimir Stoyanov]

Hello Guillermo,

You should be able to achieve the same result with code behind as well. In order to create a DataTemplate in code, you can use one of the approaches listed in the following article: Using DataTemplate in Code. 

Hope this helps.

Regards,
Vladimir Stoyanov
Progress Telerik