Каков наилучший визуальный контроль в UWP для рисования электрической цепи и манипулирования ею?

Question

Я готов написать приложение для моделирования и анализа электрических цепей в UWP-Win10 (создатели осени) C #, для публикации в Магазине Windows. У меня все математика, алгоритмы и классы разобрались. Но я застрял на том, как отобразить схему на экране. Ниже приведен пример изображения того, что я хочу показать в приложении UWP.

Пользователь должен иметь возможность наносить символы электрических элементов (резисторы, конденсаторы и т. Д.), Соединять их проводами, перемещать элементы (с помощью перетаскивания), вращать и т. Д., Каков наилучший (XAML) визуальный элемент управления или комбинация элементов управления для этого ?, Сетка? Canvas? Я предполагаю, что элементы должны быть объектами, которые являются экземплярами классов. У меня есть знания по разработке диаграмм классов, написанию алгоритмов, но я нахожу немного сложным визуальные вещи. Эти объекты должны поддерживать события кликов и перетаскивать их для перемещения по доске. Как я могу это сделать? Я действительно понятия не имею о правильном подходе к решению этого уровня программного обеспечения.

Заранее спасибо.

Answer 1

Вы можете представить все это в Xaml, но с ростом количества объектов вы можете начать видеть проблемы с производительностью. Другой альтернативой является использование библиотеки рисования, такой как Win2D, для рисования и обработки всех манипуляций и тестирования попаданий самостоятельно. В Xaml ваш основной вид будет содержать Canvas, в котором будут другие сущности, будь то базовые объекты, такие как Rectange, Ellipse, Path, Line, TextBlock, или составные объекты, составленные из объектов UserControl. Я бы порекомендовал инкапсулировать каждую электронную сущность в объекте UserControl.

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

или где резистор и конденсатор в классах, производных от UserControl.

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