How to connect ellipses using lines in WPF?

Question

I am developing an application to visualize routers in my network. I have four or less ports in each router. I have a list of routers with their X and Y coordinates on the canvas and they look good.

I need to link them together based on the port and the next router using a line.

I have created a cable class which has two routers and a two ports. I don't know how to add them to the Itemescontrol list of my window.

Cable.cs
public class Cable
    {

        public Cable()
        {
        }

        public Cable(int rtr1ID, int rtr1Port, int rtr2ID, int rtr2Port)
        {
            this.rtr1ID = rtr1ID;
            this.rtr2ID = rtr2ID;
            this.rtr1Port = rtr1Port;
            this.rtr2Port = rtr2Port;
        }

        private int rtr1ID;
        public int Router1ID
        {
            get { return rtr1ID; }
            set { rtr1ID = value; }
        }

        private int rtr2ID;
        public int Router2ID
        {
            get { return rtr2ID; }
            set { rtr2ID = value; }
        }

        private int rtr1Port;
        public int Router1Port
        {
            get { return rtr1Port; }
            set { rtr1Port = value; }
        }

        private int rtr2Port;
        public int Router2Port
        {
            get { return rtr2Port; }
            set { rtr2Port = value; }
        }
    }

CableService.cs

    public class CableService
    {
        private static List cables;

        public CableService()
        {
            cables = new List()
            {
                new Cable{ Router1ID=1, Router1Port=1, Router2ID=2, Router2Port=4},
                new Cable{ Router1ID=2, Router1Port=3, Router2ID=5, Router2Port=2},
                new Cable{ Router1ID=5, Router1Port=3, Router2ID=3, Router2Port=2},
                new Cable{ Router1ID=4, Router1Port=4, Router2ID=1, Router2Port=1},
            };
        }

        public List GetCables()
        {
            return cables;
        }
    }

Router.cs
public class Router : INotifyPropertyChanged
    {
        public Router()
        {
        }

        public Router(int x, int y, int id)
        {
            this.x = x;
            this.y = y;
            this.id = id;
        }

        private int x;
        public int X
        {
            get { return x; }
            set { x = value; OnPropertyChanged("X"); }
        }

        private int id;
        public int ID
        {
            get { return id; }
            set { id = value; OnPropertyChanged("ID"); }
        }


        private int y;
        public int Y
        {
            get { return y; }
            set { y = value; OnPropertyChanged("Y"); }
        }

        public event PropertyChangedEventHandler PropertyChanged;
        private void OnPropertyChanged(string popName)
        {
            if(PropertyChanged!=null)
            {
                PropertyChanged(this, new PropertyChangedEventArgs(popName));
            }
        }

    }

RouterService.cs
public class RoutersServcie
    {
        private static List rtrList;
        public RoutersServcie()
        {
            rtrList = new List()
            {
                new Router{X=5, ID=1, Y=2},
                new Router{X=50, ID=2, Y=20},
                new Router{X=90, ID=3, Y=4},
                new Router{X=10, ID=4, Y=90},
                new Router{X=250, ID=5, Y=15},
            };
        }

        public List GetRouters()
        {
            return rtrList;
        }

MainWindow.xaml

MainWindow.xaml.cs
public partial class MainWindow : Window
    {
        List line;
        public MainWindow()
        {
            InitializeComponent();
            line = new RoutersServcie().GetRouters();
            icCircles.ItemsSource = line;
        }

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            icCircles.ItemsSource = null;
            int x = new Random().Next(0,500);
            int y = new Random(x).Next(0,500);
            int nextId = line.Count()+1;
            line.Add(new Router(y, x, nextId));
            icCircles.ItemsSource = line;
        }
    }

Clemens · Accepted Answer

You may draw lines in a second ItemsControl below the one with the circles.

With a view model like

public class ViewModel
{
    public ObservableCollection Points { get; }
        = new ObservableCollection();
}

public class PointItem
{
    public double X { get; set; }
    public double Y { get; set; }
}

the following XAML declares two ItemsControl on top of each other in a Canvas parent.

The ItemsControl for the lines uses an ItemContainerStyle with a Line element that has its X1 and Y1 properties bound to the X and Y values of the previous data item, which is easily possibly with the RelativeSource={RelativeSource Mode=PreviousData} binding source mode. The control hides the "first" line by a Trigger on the ItemsControl.AlternationIndex attached properties.

Note that the other control uses Path elements with an EllipseGeometry instead of Ellipse elements to make sure that the circles are centered at their respective position.

How to connect ellipses using lines in WPF?

Answers (1)

Related Questions