What about a Dynamic Flow Chart Control? (Part1)

This is the idea: I would like to build a “FlowChart” control where the “Entities” are the classical controls, like buttons, panels, label, picture etc, and the graphical relations are maintained also if the position between elements is changed, or if new elements are added.

In figure Number 1 there is the initial structure, the colored rectangles are my “special objects” FCControlBase.

Each one are connected, at least, with another one. Pressing Draw the relations are showed (figure 2).

Figure1: Initial Structure

Figure2: Relations between Entities

Now image to change the structure, all relations are maintained and redraw correctly by the control like in figure 3.

Figure3: New Structure with the relations

This is only a starting point to use to improve your projects. The base classes are Open Source, so you could enjoy developing it more. But now let’s see the basic ideas.

In figure 4 I have used the control to illustrate the custom library and the main properties.

Figure 4: Classes Architecture

The base class FCControlBase has two properties Connections and Caption. The first one maintains the relations between the Entities, and obviously “Caption” is the text displayed into the block.

Connection

This class is the core, it exposes the linked Childs to the current Entity, here the Properties:       

• Child     get or set the FCControlBase connected.
• Type     get or set the ConjunctionType (Line, or ArrowLine …)
• Origin   get or set the VertexPosition. Each Entity can be connected graphically to one of eight vertex.
• Destination        get or set VertexPosition.
• Color     get or set a Line Color.
• Text      get or set a description.

Figure 5: Property Connections Editor

public class Connection
    {
        public event PropertyChangedEventHandler PropertyChanged;

        private void OnPropertyChanged(string propertyName)
        {
            if (PropertyChanged != null)
                PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
        }

        VertexPosition mOrigin { get; set; }
        VertexPosition mDestination { get; set; }
        UserControl mChild { get; set; }
        ConjunctionType mType { get; set; }
        Color mColor { get; set; }
        string mText { get; set; }

        public VertexPosition Origin { get { return mOrigin; } set { mOrigin = value; OnPropertyChanged("Origin"); } }
        public VertexPosition Destination { get { return mDestination; } set { mDestination = value; OnPropertyChanged("Destination"); } }
        public UserControl Child { get { return mChild; } set { mChild = value; OnPropertyChanged("Child"); } }
        public ConjunctionType Type { get { return mType; } set { mType = value; OnPropertyChanged("Type"); } }
        public Color Color { get { return mColor; } set { mColor = value; OnPropertyChanged("Color"); } }
        public string Text { get { return mText; } set { mText = value; OnPropertyChanged("Text"); } }

        public Connection()
        {
            Origin = VertexPosition.BottomMiddle;
            Destination = VertexPosition.TopMiddle;
            Child = null;
            Type = ConjunctionType.Arrow;
            Color = Color.Black;
            Text = "";
        }
    }

Part 2