What is the best visual control in UWP for drawing an electrical circuit, and manipulate it?

2
votes

I'm willing to write an app for simulation and analysis of electrical circuits in UWP-Win10 (fall creators) C#, for publish in Windows Store. I have all math, algorithms and classes figured out. But i'm stuck on how to display a circuit on screen. Below is an example image of what I want to show in UWP app. Example image of electric circuit

The user must be able to put symbols of electric elements (resistors, capacitors, etc.), connect with wires, move elements (with drag and drop), rotate, etc., What is the best (XAML) visual control, or combination of controls for doing this?, Grid? Canvas? I guess the elements must be objects, which are instances of classes. I have knowledge of designing class diagrams, writing algorithms but I find a bit difficult the visual things. These objects must support click events, and drag and drop for moving in board. How can I do this? I really have no clue of a correct approach to solve this layer of software.

Thanks in advance.

1
uwpuwp-xaml

1 Answers

1
votes

You can represent all of these in Xaml but as the amount of entities grows, you might start to see performance issues. The other alternative is to use a drawing library like Win2D to draw and handle all of the manipulation and hit testing on your own. Within Xaml, your main view would contain a Canvas that would have other entities in them, either basic entites like Rectange, Ellipse, Path, Line, TextBlock, or composite ones made up with UserControl objects. I would recommend encapsulating every electronic entity in a UserControl object.

<ScrollViewer>
    <Canvas>
        <Rectangle/>
        <Line/>         
        <Line/>
        <Ellipse/>
     </Canvas>   
</ScrollViewer>

or where Resistor and Capacitor at UserControl-derived classes.

<ScrollViewer>
    <Canvas>
        <mycontrols:Resistor/>
        <Polyline/>
        <mycontrols:Capacitor/>
    </Canvas>
</ScrollViewer/>