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:
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:
Some symbols in the drawing are built of multiple
UIElement
s, like aRectangle
and aPath
. 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 aCanvas
and construct the visual tree of the symbol in theCanvas
. Then, when the symbol is dragged I move theCanvas
. This seems to be cumbersome and takes overhead in memory and performance. I wonder if I'm doing it right.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.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:
When drawing a line/wire and the cursor moves close to a connection point, the line end should be 'magnetic' to that point.
- 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?