[RESOLVED] [2005] Stamped. ToolTip and MoveIt.

Below is an image that i ihave been tasked to do. I dont even know where to start. I will need help from everyone of you.
What i need is:
When i click on a point(say on a form) that references some data, i get such a box(call it a STATIONERY tooltip).
Then the user can be a able to drag the box to any preferable part of the screen to mimic what is in the picture below.

Any help on this project will be greatly appreciated.

The boxes should be Panels and you can use standard drag and drop to allow the user to move them around. You'd then use GDI+ to draw the connectors from the map to the boxes. Start with a simple project consisting of a form with a Panel on it and get the drag and drop bit happening. Then use a completely separate project to get up to speed with GDI+ drawing. The put the two together into a slightly more complex project with a single line connecting to a moveable Panel, then make the connector as shown in your image, then add multiple Panels.

Don't try to start at the end. Start at the beginning with the very simplest scenario and build it up.

Thanks for your suggestions.
That implies that foe every single click on a particular area, i will draw two things, the line from that point and the panel. Ok Fine.
But i dont understand this part.

Quote:

---

Then use a completely separate project to get up to speed with GDI+ drawing.

---

How does another project speedup the drawing in another!

Perhaps "get up to speed" is not a saying where you're from. It means to become familiar with something, so I meant that you would use a simple project to familiarise yourself with GDI+. Once you know how it works you can then transfer your knowledge to a more complex application.

You don't have to draw the Panels. I would create the Panels at design time and then just set their Visible property to False. When the user clicks an area of the map at run time you would set the corresponding Panel's Visible property to True and draw the connector.

JMC. Its a mapping application i am doing and the user clicks will change from one point to another(in the actual sense from one polygon to another) not only in a map like this but all maps that will use the application including the world map.
So drawing panels at design time is not something i would buy, because just imagin if the user needs information on around 100 polygons to be displayed. It implies that i draw 100 static panels on the form.
If it means going the panel way, i think i will draw them after every click on the point or polygon.

OK, don't create them at design time in that case but you don't "draw" them at all. You would create them at run time, adding the appropriate Labels and whatever other controls, getting the text from a database or whatever, then just add them to your form's Controls collection. The system takes care of drawing them. The drawing you have to do explicitly is the pointy things using GDI+. You might also want to use a UserControl rather than a simple Panel, depending on what you need to put on it.

Thanks JMC. Doesn't "creation at runtime" also imply drawing them at a certain point!!!
Below i what i have started. Right click on the form an create the panel(one or more...).
You can drag them across the form.
The problem is drawing a line from the point of creation to the point of drop of the panel. Drawing a line with GDI+ is usually handled in the form_paint event and this is another snag i am getting.
Any help to do this will be highly appreciated.

Updated Application

Slowly by slowly,i think i am getting some where.
Anyone knows how i can clear the orignal line after dragging my panel?
Newest Update in Post 8.

You don't explicitly clear anything you've drawn with GDI+. You force a repaint of the control and it just disappears, then you draw the new stuff, which may be the same as the old stuff or it may not. Painting a GUI is quite resource intensive so you want to paint as little as possible. For that reason you would force a repaint by calling the Invalidate method of the control you want to refresh and pass the smallest region you can that contains all the areas that have changed. You can create an actual Region object if you like, or just use Rectangles and see how that performs.

Thanks JMC, i have drawn a triangle polygon now instead of a line and used Region but i dont seem to know where to place my Invalidate method call.
The Newest Update in Post #8.

You call Invalidate after you do something that requires the drawing to be refreshed. If you just moved the Panel and that requires that you redraw the tiangle, that's where you call Invalidate.

I cant seem to accomplish this. Every where i put Me.Invalidate(myRegion), i dont get the region cleared.
Another problem i am having is that when i create one panel(panel1), then another(call it panel2). When i go back and drag panel one, my triangle is created from the starting point of the triangle on panel2.
How can i store the starting point of each panel triangle so that it can only be reused by only that corresponding polygon at the time of drag.
Take a look at it and see.

Any one wanna get dirty with us on this!!
seeking to resolve this thread.

So you want to store a collection Points that correspond to Panels? I know! Use a collection of Points that correspond to Panels. :p This sounds like a job for... (dramatic music) ...Dictionary(Of Panel, Point). That's exactly what it is: a collection of Points that correspond to Panels. If you want to get the Point that corresonds to a particular Panel you simply index the collection using a Panel and it will spit out the corresponding Point. Each time you create a Panel you add a new item to the collection that consists of the new Panel and the Point it corresponds to.

Thanks JMC. I think thats it, but here, we are storing the first point of the created region(triangle corresponding to panel), or the three points that makeup the region,isnt it!
Honestly,using that kind dictionery is totally new to me! and i dont really know how to do it. Give me a starter.

This is what i am thinking.

VB Code:

Private myTriangle As Point() = {New Point(pt.X, pt.Y), New Point(pnl.Location.X + 10, pnl.Location.Y + 10), New Point(pnl.Location.X + 10, pnl.Location.Y + 30)}
Private m_Dictionery As New Dictionary(Of Panel, Point)
Sub myDictionery()
        m_Dictionery.Clear()
        With m_Dictionery
            .Add(pnl, myTriangle(0))
        End With
    End Sub

A Dictionary is just a collection where the values are identified by a unique key, which can be anything, instead of by a sequential numerical index as in simple lists. The generic Dictionary allows you to fix the type of both the keys and the values. You woul declare the collection at the class level:

VB Code:

Private trianglesByPanel As New Dictionary(Of Panel, Triangle)

When you create a new Panel you would also create a corresponding Triangle and add them as an item to the collection:

VB Code:

Me.trianglesByPanel.Add(newPanel, newTriangle)

Now, whenever you move a Panel and you need to move the corresponding Triangle you simply get a reference to it from the collection:

VB Code:

myTriangle = Me.trianglesByPanel(myPanel)
 
'Set properties of myTriangle here.
 
'Force repaint here.

In the form's Paint method you'd loop through the values in the Dictionary to get each triangle and draw it.

i am not getting it. How can i get a reference to the corresponding triangle when moving the panel!!
Here is what i added in the code.
Every added code has '*****

VB Code:

Imports System
Imports System.Drawing
Imports System.Drawing.Drawing2D
Imports System.Collections
Imports System.ComponentModel
Imports System.Windows.Forms
Imports System.Data
Public Class frmMain
#Region "DECLARATIONS"
    Private orignalStartPoint As Point 'Orignal Start point of the dragging
    Private dragStartPoint As Point ' Present Start point of the dragging
    Private darkPen As New Pen(SystemColors.ControlDark) ' Drawing Line Color
    Private noTimesDragged As Integer
    Private formSurface As Graphics
    Private pt As Point
    Private m_pt As Point
    Private pnlSize As Size
    Private pnl As Panel
    'Private myPoint As Point
    Private myPath As GraphicsPath
    Private myRegion As Region
    Private myTriangle As Point() = {New Point(pt.X, pt.Y), New Point(pnl.Location.X + 10, pnl.Location.Y + 10), New Point(pnl.Location.X + 10, pnl.Location.Y + 30)}
    '****Added
    Private trianglesByPanel As New Dictionary(Of Panel, Point)
 
#End Region
 
#Region "FORM EVENTS"
 
    'Public Sub New()
    ' This call is required by the Windows Form Designer.
    'InitializeComponent()
    ' Add any initialization after the InitializeComponent() call.
    'Enable Double Buffering to remove Flickers
    'Me.SetStyle(ControlStyles.AllPaintingInWmPaint, True)
    'Me.SetStyle(ControlStyles.UserPaint, True)
    'Me.SetStyle(ControlStyles.OptimizedDoubleBuffer, True)
    'End Sub
 
    'This Handels the form's drop event
    Private Sub frmMain_DragDrop(ByVal sender As Object, ByVal e As System.Windows.Forms.DragEventArgs) Handles Me.DragDrop
        If e.Data.GetDataPresent(GetType(Panel)) Then
            pnl = DirectCast(e.Data.GetData(GetType(Panel)), Panel)
            'Get the x and y screen positions after the drop of the label
            Dim xOffset As Integer = e.X - Me.dragStartPoint.X
            Dim yOffset As Integer = e.Y - Me.dragStartPoint.Y
            'Drop the lable at this location
 
            pnl.Location = New Point(pnl.Left + xOffset, pnl.Top + yOffset)
            '*****Added
            'myTriangle = Me.trianglesByPanel(pnl) '<--------------Problem here
            drawTriangle()
            '%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%INVALIDATE%%%%%%%%%%%%%%%%%%%%
            'Me.Invalidate(myRegion)
        End If
    End Sub
    'Handles the form's drag effects
    Private Sub frmMain_DragEnter(ByVal sender As Object, ByVal e As System.Windows.Forms.DragEventArgs) Handles Me.DragEnter
        If e.Data.GetDataPresent(GetType(Panel)) Then
            e.Effect = DragDropEffects.Move
        Else
            e.Effect = DragDropEffects.None
        End If
    End Sub
    Private Sub frmMain_MouseDown(ByVal sender As Object, ByVal e As System.Windows.Forms.MouseEventArgs) Handles Me.MouseDown
        pt = New Point(e.X, e.Y)
        If e.Button = Windows.Forms.MouseButtons.Right Then
            'Show the Context menu at the point when right mouse button is clicked
            Me.ContextMenuStrip1.Show(Me, New System.Drawing.Point(e.X, e.Y))
        End If
    End Sub
    '*****Added
    Private Sub frmMain_Paint(ByVal sender As Object, ByVal e As System.Windows.Forms.PaintEventArgs) Handles Me.Paint
        'For Each key As Point In trianglesByPanel.Values
 
        'Next
    End Sub
#End Region
 
#Region "CONTROL EVENTS"
    Private Sub cmnuDrawPanel_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles cmnuDrawPanel.Click
        pnl = New Panel
        AddHandler pnl.MouseDown, AddressOf MyEventHandler
        m_pt = New Point
        m_pt.X = pt.X + 100
        m_pt.Y = pt.Y + 100
        pnl.Location = m_pt
        pnlSize = New Size(200, 200)
        pnl.Size = pnlSize
        pnl.BorderStyle = BorderStyle.FixedSingle
        Me.Controls.Add(pnl)
        pnl.Name = "Panel1"
        pnl.BackColor = Color.LightYellow
        'Draw Triangle at first creation
        drawTriangle()
        '*****Add The Triangle to the Dictionery
        trianglesByPanel.Add(pnl, myTriangle(0))
    End Sub
#End Region
 
#Region "GENERAL FUNCTIONS"
    Private Sub MyEventHandler(ByVal sender As Object, ByVal eMap As System.Windows.Forms.MouseEventArgs)
        'cast object into a panel
        pnl = CType(sender, Panel)
        'get the start point of the label we are tryinng to drag, then start dragging the label
        Me.dragStartPoint = pnl.PointToScreen(New Point(eMap.X, eMap.Y))
        Me.orignalStartPoint = dragStartPoint
        pnl.DoDragDrop(pnl, DragDropEffects.Move)
    End Sub
    Private Sub drawTriangle()
        formSurface = Me.CreateGraphics
        myPath = New GraphicsPath
        myPath.AddPolygon(myTriangle)
        'Draw the path to the screen.
        Dim myPen As New Pen(Color.Black, 2)
        formSurface.DrawPath(myPen, myPath)
        myRegion = New Region(myPath)
        formSurface.FillRegion(Brushes.LightYellow, myRegion)
    End Sub
 
#End Region
 
End Class

I don't get what that myTriangle variable is doing at the class level. Look, in your Paint event handler you want to draw a number of triangles, right? So you should be storing those triangles where they can be easily accessed. Define a Triangle class or structure and store instances of that as the values in the collection. It would have a property to correspond to each of the points. If one of the apexes is stationary then that should be indicated by a read-only property and the other two would be read/write. When you create a Panel you create a corresponding Triangle and add them to the collection. When you move a Panel you get the corresponding Triangle from the collection and update the two writable properties with the new points. You then force a repaint. In the Paint event handler you loop through the collection to get all the Triangle objects and draw each one.

Urgh!!!
From a structure to propety to dictionery and then to the panel!
I am not that good. Someone help me try to do what JMC is saying.

Ok. The class looks like this. But how do i use it to create the triangle polygon?

VB Code:

Public Class clsTriangle
    Private pointA As Point
    Private pointB As Point
    Private pointC As Point
 
    Public Sub New(ByVal pt_1 As Point, ByVal pt_2 As Point, ByVal pt_3 As Point)
        pointA = pt_1
        pointB = pt_2
        pointC = pt_3
    End Sub
    Public ReadOnly Property firtTriPoint() As Point
        Get
            Return pointA
        End Get
    End Property
 
    Property secondTripoint() As Point
        Get
            Return pointB
        End Get
        Set(ByVal value As Point)
            pointB = value
        End Set
    End Property
 
    Property thirdTriPoint() As Point
        Get
            Return pointC
        End Get
        Set(ByVal value As Point)
            pointC = value
        End Set
    End Property
End Class

I have decided to create a userControl. I think its a much better approach.
I will get back with the results.

Still the same thing. Tried to create a usercontrol but it gives me more setbacks in terms of dragging and moving the created graphic triangle than the method above.
So let me move on with the above method. Any help out there?

Here it is with the user control. It can fix the problem of repainting the region again and again but it has two issues:
1) I cant seem to drag the usercontrol around the form when the mouse is on any
control lying on the user control. For this case a lable is basically on top of the
form. I can only drag the part that has no control and that is the triangular part of
the region. How can i fix that?
2) How can i handle the drawing of my regions in case the user wants to move left or
on up the triangular part of the region. So that the triangular part can keep on
moving also according to the direction of drag.

****EDIT****
Actually three issues:
3) When i move the part supposed to be habouring the data, i would like the triangular region to also increase or decrease in size and length except the APEX, but it seems it will be an overhaul.

Which advise?
Should i switch back to the orignal method! and if so, how can i go past where i stopped.

Are you saying you've used a UserControl instead of the Panel or instead of the Triangle?

Actually its instead of both. since the userControl will have the same usage as the panels and it presents more cording work, i think i will take my orignal method.
But i need your help here. Just allow me to steal some witty code from you this time around. Just to solve that puzzle in your post #20

Define a type to represent the triangles that will be drawn:

VB Code:

Public Class Triangle
 
    Private ReadOnly _fixedPoint As Point
    Private _variablePoint1 As Point
    Private _variablePoint2 As Point
 
    Public ReadOnly Property FixedPoint() As Point
        Get
            Return Me._fixedPoint
        End Get
    End Property
 
    Public Property VariablePoint1() As Point
        Get
            Return Me._variablePoint1
        End Get
        Set(ByVal value As Point)
            Me._variablePoint1 = value
        End Set
    End Property
 
    Public Property VariablePoint2() As Point
        Get
            Return Me._variablePoint2
        End Get
        Set(ByVal value As Point)
            Me._variablePoint2 = value
        End Set
    End Property
 
    Public Sub New(ByVal fixedPoint As Point, _
                   ByVal variablePoint1 As Point, _
                   ByVal variablePoint2 As Point)
        Me._fixedPoint = fixedPoint
        Me._variablePoint1 = variablePoint1
        Me._variablePoint2 = variablePoint2
    End Sub
 
End Class

Declare your collection of Triangles keyed by Panel:

VB Code:

Private trianglesByPanel As New Dictionary(Of Panel, Triangle)

When you create a Panel to place on the form create a corresponding Triangle:

VB Code:

Private Sub AddPanel()
    Dim myPanel As New Panel
 
    'Set Panel properties here.
 
    'Create a Triangle to correspond to the Panel.
    'You will have to supply the appropriate Points.
    'Remember that the first parameter represents the fixed point.
    Dim myTriangle As New Triangle(Point.Empty, Point.Empty, Point.Empty)
 
    'Add the Panel/Triangle pair to the collection.
    Me.trianglesByPanel.Add(myPanel, myTriangle)
 
    'Add the Panel to the form.
    Me.Controls.Add(myPanel)
End Sub

When you move a Panel get the corresponding Triangle from the collection and adjust its variable points accordingly:

VB Code:

Private Sub Form1_DragDrop(ByVal sender As Object, ByVal e As System.Windows.Forms.DragEventArgs) Handles Me.DragDrop
    'The Panel is tha data that was dragged and dropped.
    Dim myPanel As Panel = DirectCast(e.Data, Panel)
 
    'Get the corresponding Triangle.
    Dim myTriangle As Triangle = Me.trianglesByPanel(myPanel)
 
    'Set the Panel's new Location here.
 
    'Set the Triangle's new variable points.
    'You will have to supply the appropriate Points based on the Panel.
    myTriangle.VariablePoint1 = Point.Empty
    myTriangle.VariablePoint2 = Point.Empty
 
    'Force a repaint of the form.
    'You would calculate a Rectangle or Region and call Invalidate so as to repaint the minimum.
    Me.Refresh()
End Sub

In the form's Paint event you would loop through all the Triangles in the collection and draw them:

VB Code:

Private Sub Form1_Paint(ByVal sender As Object, ByVal e As System.Windows.Forms.PaintEventArgs) Handles Me.Paint
    For Each trig As Triangle In Me.trianglesByPanel.Values
        'Draw the triangle here.
    Next trig
End Sub

Thanks!! That looks very logical.
But how can i draw the triangles in my paint event!

VB Code:

Private Sub frmMain_Paint(ByVal sender As Object, ByVal e As System.Windows.Forms.PaintEventArgs) Handles Me.Paint
        For Each trig As Triangle In Me.trianglesByPanel.Values
            'Draw the triangle here.
            formSurface = Me.CreateGraphics
            myPath = New GraphicsPath
            myPath.AddPolygon(trig) '<----------------------------Problem Here.
            Dim myPen As New Pen(Color.Black, 2)
            formSurface.DrawPath(myPen, myPath)
            myRegion = New Region(myPath)
            formSurface.FillRegion(Brushes.LightYellow, myRegion)
        Next trig

What does Intellisense say the type of the parameter that you pass to AddPolygon has to be? Is trig that type? If not then how are you going to get the required type from trig? Don't just ignore what Intellisense tells you and pass whatever objects you feel like to a method.

WOW!!!!
Thanks. Very brilliant.
I owe you alot.I owe you this whole project.
Thanks Again. Keep the candle burning.

For the sole purpose of the thread, its almost over.
I yet have to see how i can add the data to the panel and pray that it moves with the data. Dont hesitate when i need more help.

Once again Thanks!

Haha! Sometime i watched a movie that had this quote

Quote:

---

In My Experience, Money hungry thugs are like stray dogs. You feed them once and they they at your back door every night asking for more.

---

i am not the type JMC. but this is about Removing the created triangle

With a panel i can do it and this is what i do

VB Code:

'Dictionery to store the number of Panels added on the form
Private panelsByNumber As New SortedDictionary(Of Integer, Panel)

When Adding a panel, i key the panel added

VB Code:

Dim panelNumber As Integer = 1
        While panelsByNumber.ContainsKey(panelNumber)
            panelNumber += 1
        End While
        panelsByNumber.Add(panelNumber, pnl)
        'Add the Panel to the form.
        Me.Controls.Add(pnl)

To remove the panel, i have this

VB Code:

Private Sub cmnuRemovePanel_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles cmnuRemovePanel.Click
        For Each key As Integer In panelsByNumber.Keys
            If panelsByNumber(key) Is pnl Then
                panelsByNumber.Remove(key)
                Me.Controls.Remove(pnl)
                pnl.Dispose()
 
                Exit For
            End If
        Next key
    End Sub

This workd fine. I thought i would do the same for the triangle but alas!! the triangle is
not a windows form control
I tried this but i dont get what i want and there is an error
"Collection was modified after the enumerator was instantiated."

VB Code:

For Each triKey As Integer In trianglesByNumber.Keys
            If trianglesByNumber(triKey) Is myTriangle Then
                trianglesByNumber.Remove(triKey)
                Me.Invalidate()
            End If
        Next triKey

Is there any way i can do this!

That's not the right way to go about it. You don't need those extra collections at all.

VB Code:

Private Sub RemovePanelToolStripMenuItem_Click(ByVal sender As System.Object, _
                                               ByVal e As System.EventArgs) Handles RemovePanelToolStripMenuItem.Click
    'The Panel to be removed is the control that dispalyed the menu.
    Dim panelToRemove As Panel = DirectCast(Me.ContextMenuStrip1.SourceControl, Panel)
 
    'Remove the corresponding Triangle.
    Me.trianglesByPanel.Remove(panelToRemove)
 
    'Remove the Panel from the form.
    Me.Controls.Remove(panelToRemove)
 
    'Destroy the Panel.
    panelToRemove.Dispose()
End Sub

That's it, that's all.

Edit: Actually, you may have to force a repaint to clear the triangle but removing the Panel may do that automatically. Give it a try and see. If the triangle doesn't get cleared then Invalidate the region it occupies.

Thanks, but i get an exception.
"Unable to cast object of type 'Panels.frmMain' to type 'System.Windows.Forms.Panel'."
It highlights the whole sentence of the panelToRemove declaration.

Wel thanks.
i replaced
Dim panelToRemove As Panel = DirectCast(Me.ContextMenuStrip1.SourceControl, Panel)
with
Dim panelToRemove As Panel = DirectCast(pnl, Panel) and it worked but i think i will need to refresh/repaint the form because the triangle goes away when i add another polygon.

Worked like Magic!

So are you right-clicking the form to remove a Panel? Wouldn't it make more sense to right-click the Panel that you want to remove? I assumed that that was what you were doing. Anyway, even if it's not you still have a reference to the Panel already:

VB Code:

Private Sub cmnuRemovePanel_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles cmnuRemovePanel.Click
        For Each key As Integer In panelsByNumber.Keys
            If panelsByNumber(key) Is [U]pnl[/U] Then
                panelsByNumber.Remove(key)
                Me.Controls.Remove(pnl)
                pnl.Dispose()
 
                Exit For
            End If
        Next key
    End Sub

The 'pnl' variable refers to the Panel that you're removing already so you don't have to get a reference from anywhere else. What purpose is that panelsByNumber collection intended to serve? It's completely unnecessary as far as I can see. Just remove the first line from my code and use 'pnl' in place of 'panelToRemove':

VB Code:

Private Sub RemovePanelToolStripMenuItem_Click(ByVal sender As System.Object, _
                                               ByVal e As System.EventArgs) Handles RemovePanelToolStripMenuItem.Click
    'Remove the corresponding Triangle.
    Me.trianglesByPanel.Remove(pnl)
 
    'Remove the Panel from the form.
    Me.Controls.Remove(pnl)
 
    'Destroy the Panel.
    pnl.Dispose()
End Sub

Hmmm... too slow. ;)

JMC, i have come to the data part of it and what i was praying fro not to happen is what has happened!
When i add the panel, i add a label to the panel, then i add some text to the label, but when i try to move/drag the panel when the mouse position is on top of the label, the panel wont move. And vise-versa.
How can i solve this!
As usual, i appreciate the time you put in to help.