Подтвердить что ты не робот

Как создавать и подключать пользовательские кнопки/элементы управления с линиями, используя формы окон

Я пытаюсь создать некоторые пользовательские кнопки или пользовательские элементы управления, как показано в предлагаемом графическом интерфейсе. Функциональность должна быть следующей:

Графики или конфигурации создаются графически.

Элементы управления можно перетаскивать с панели инструментов или вставлять с помощью щелчка правой кнопкой мыши/выпадающего меню

При перетаскивании с одного элемента управления на другой они должны быть связаны линиями

Переключатель должен перемещать представление из элементов управления с помощью параметров на простой вид

GUI view - элементы управления с опциями: GUI view controls with options

Вид GUI - сведен к минимуму: enter image description here

Какую функциональность в формах Windows я могу использовать для создания соединительных линий?

Если они созданы с использованием функциональности для рисования линий, как я могу убедиться, что элементы управления привязаны к линии?..

Я программирую на С# с Visual Studio 2010 Express.

4b9b3361

Ответ 1

Ok. Это небольшое изменение в примере, который я создал для Аналогичное требование

Мое намерение состоит в том, чтобы показать, что winforms больше не является вариантом для тех, кто нуждается в серьезном интерфейсе. Исходный образец был создан за 3 человеко-часа.

Вы можете быть удивлены, узнав, что контейнер, в котором хранятся все эти элементы (оба узла и разъемы), на самом деле является ListBox.

Что стоит отметить:

  • Текст "NodeXX" содержится в элементе управления Thumb, который позволяет щелкнуть и перетащить.
  • Соединители также можно выбрать и показать приятную анимацию, когда они есть.
  • Левая панель позволяет издавать текущие выбранные значения объекта.
  • Функциональность пользовательского интерфейса полностью отделена от данных, которые его содержат. Поэтому все эти узлы и коннекторы представляют собой простые классы с простыми int и double свойствами, которые могут быть загружены/сохранены из БД или любого другого источника данных.
  • Если вам не нравится, как выполняется последовательность кликов, нарисуйте узлы и коннекторы, которые могут быть идеально адаптированы к вашим потребностям.
  • Правила WPF.

Edit:

Вторая версия, на этот раз гораздо более похожая на ваш первоначальный скриншот:

enter image description here

enter image description here

  • Я добавил понятие SnapSpot в уравнение. Это маленькие красные полукруги, которые вы видите вокруг узлов, которые на самом деле связаны с Connector.
  • Я также изменил Connector DataTemplate, чтобы использовать QuadraticBezierSegment на основе

    Connector.Start.Location,
    Connector.MidPoint, and 
    Connector.End.Location 
    

Это позволяет использовать кривые линии в качестве соединителей, а не только прямые.

  • Там будет небольшая прямоугольная форма Thumb, которая появится, когда вы выберете (щелкните) на Connector (видимый на снимке экрана), который позволит вам перемещать MidPoint кривой.
  • Вы также можете манипулировать этим значением, вращая колесико мыши при наведении TextBoxes в "Средняя точка" на левой панели.
  • "Свернуть все" CheckBox позволяет переключаться между полными и малыми полями, как показано на скриншоте.
  • SnapSpot имеют OffsetX OffsetY между 0 и 1, что соответствует их положению относительно родительского Node. Они не ограничены 4 и могут быть любым количеством из них на Node.
  • ComboBoxes и Buttons не имеют функциональности, но это просто вопрос создания соответствующих свойств и Команды в Node и привязать их к этому.

Edit2:

Обновлена ​​ссылка для скачивания с более приятной версией.

Редактировать 10/16/2014. Поскольку многие люди, похоже, заинтересованы в этом, я загрузил источник в GitHub.

Ответ 2

Я предполагаю, что это проблема типа графа. Узлы - это комнаты, а края - линии, которые соединяют комнаты. Вы можете ввести другой класс (например, класс Connection), который описывает, как узлы связаны с ребрами. Например, ваш зал соединяется со спальней, не обязательно используя прямую линию. Графика .DrawBezier позволяет рисовать кривые линии, но требует массив точек. Вот где входит класс Connection. Некоторый код может помочь...

   class Room
   {
     public Room(String name, Point location);
     public void Draw(Graphics g);
   }

   class Connection
   {
     public void Add(Point ptConnection);
     public void Add(Point[] ptConnection);

     // Draw will draw a straight line if only two points or will draw a bezier curve
     public void Draw(Graphics g);
   }

   class House // basically a graph
   {
     public void Add(Room room);
     public void AddRoomConnection(Room r1, Room r2, Connection connector);

     // draw, draw each room, then draw connections.
     public void Draw(Graphics g);
   }

   void Main()
   {
      House myHouse = new House();
      Room hall = new Room("Hall", new Point(120,10);
      Room bedroom1 = new Room("Bedroom1", Point(0, 80));
      Connection cnHallBedroom = new Connection();
      cn.Add(new Point());  // add two points to draw a line, 3 or more points to draw a curve.
      myHouse.AddRoomConnection(hall, bedroom1, cnHallBedroom);
   }

Это базовый подход, возможно, не самый лучший, но может служить отправной точкой.