I've got experience with WPF, but I have always been creating standard UI's. I want to build a drawing application for electrical wiring diagrams (single-wire diagrams). Example of the kind of drawings you should be able to draw: enter image description here I want to start simple. But I don't know how to handle the drawing in WPF. I know, drawing in WPF is much different than the classical drawing cycle where you directly 'write pixels' using some kind of Graphics object.

In WPF, most drawing is done by creating objects of shapes and paths, and add them to a canvas. Objects in the drawing must be selectable and draggable. For this requirements the WPF way to draw seems to be favorable, because you can add event handlers on the Visuals/UIElements in the drawing directly, without implementing (sometimes complex) object picking. On the other hand, I'm noticing my code is getting messy. Sometimes event handlers seem to be comflicting each other.

My problems:

  1. Some symbols in the drawing are built of multiple UIElements, like a Rectangle and a Path. When the symbol is dragged, I want to be able to have the symbol as a whole 'thing' to move, without having to change the position of every element the symbol is composed of. I now solve this by creating a root element for the symbol, like a Canvas and construct the visual tree of the symbol in the Canvas. Then, when the symbol is dragged I move the Canvas. This seems to be cumbersome and takes overhead in memory and performance. I wonder if I'm doing it right.

  2. I almost always have to set backgrounds or at least set backgrounds to Transparent to be able to catch mouse events on the electrical symbols.

  3. I want to be able to implement snapping points and connecting points. This means that some symbols have some points where wires are snapping to when you connect them. Below is an image of another application so you get the idea: enter image description here

When drawing a line/wire and the cursor moves close to a connection point, the line end should be 'magnetic' to that point.

  1. Some elements are resizable. Resizing will be done with "thumbs" like most drawing applications show around a shape when you want to resize it. I don't know where to add the resizing thumbs in the visual tree.

The standard WPF drawing approach seems to be more suitable for simple drawings like decorations in a UI. Am I missing something, or is WPF just not the right technology for creating this kind of applications?

  • This is surely interesting, but asking 4 questions in one makes it hard to vote and comment individually on answers. This site's format works much better when you ask one question per post (so 4 indivual questions). You can refer from Q 2, 3 and 4 to question 1 if you don't want to repeat the basic problem description.
    – Doc Brown
    Commented Nov 19, 2022 at 18:48
  • If you want to use a graphics API, you can embed a Windows Forms panel inside a WPF UI and use the Graphics class (GDI+) - that's probably the simplest approach. WPF also had support for Direct3D9, not sure what's the situation there today. Alternatively, you could embed a browser and maybe do something via SVG and JavaScript, say, but that might be tricky. But you might be able to achieve this just with heavily customized WPF controls. Commented Nov 19, 2022 at 18:48
  • It's bit legacy, but you could consider the WPF Helix Toolkit for this.. it has a 3D canvas and lots of 2D examples as well, mouse position snap on object (UIElement), etcetera. github.com/helix-toolkit/helix-toolkit
    – Goodies
    Commented Nov 20, 2022 at 10:37
  • I'm trying to do something similar. What is your approach? Commented Aug 18, 2023 at 4:58


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Browse other questions tagged or ask your own question.