绘制控件间的连接线

代码来自 网友 loadres

界面预览:

程序源码:

 

Imports  System.Drawing
Imports  System.Drawing.Drawing2D

Public   Class Form1

    
Public Shared Function CreateGraphicsPathByControls(ByVal SourceControl As Control, ByVal TargetControl As Control) As Drawing2D.GraphicsPath
        
Dim iGraphicsPath As New Drawing2D.GraphicsPath

        
Dim iSP As Point
        
Dim iEP As Point

        
If (TargetControl.Left + TargetControl.Width) < SourceControl.Left Then
            
'左边
            If (TargetControl.Top + TargetControl.Height) < SourceControl.Top Then
                
'左上角
                '|_
                '
                iSP.X = SourceControl.Left
                iSP.Y 
= SourceControl.Top + SourceControl.Height  4
                iEP.X 
= TargetControl.Left + TargetControl.Width * 3  4
                iEP.Y 
= TargetControl.Top + TargetControl.Height

                iGraphicsPath.AddLine(iSP.X, iSP.Y, iEP.X, iSP.Y)
                iGraphicsPath.AddLine(iEP.X, iSP.Y, iEP.X, iEP.Y)

            
ElseIf TargetControl.Top > (SourceControl.Top + SourceControl.Height) Then
                
'左下角
                ' _
                '|

                iSP.X 
= SourceControl.Left
                iSP.Y 
= SourceControl.Top + SourceControl.Height * 3  4
                iEP.X 
= TargetControl.Left + TargetControl.Width * 3  4
                iEP.Y 
= TargetControl.Top

                iGraphicsPath.AddLine(iSP.X, iSP.Y, iEP.X, iSP.Y)
                iGraphicsPath.AddLine(iEP.X, iSP.Y, iEP.X, iEP.Y)
            
Else
                
'左边
                '_
                '
                iSP.X = SourceControl.Left
                iSP.Y 
= SourceControl.Top + SourceControl.Height  2
                iEP.X 
= TargetControl.Left + TargetControl.Width
                iEP.Y 
= TargetControl.Top + TargetControl.Height  2

                iGraphicsPath.AddLine(iSP.X, iSP.Y, iEP.X 
+ (iSP.X - iEP.X)  2, iSP.Y)
                iGraphicsPath.AddLine(iEP.X 
+ (iSP.X - iEP.X)  2, iEP.Y, iEP.X, iEP.Y)
            
End If
        
ElseIf TargetControl.Left > (SourceControl.Left + TargetControl.Width) Then
            
'右边
            If (TargetControl.Top + TargetControl.Height) < SourceControl.Top Then
                
'右上角
                '_|
                '
                iSP.X = SourceControl.Left + SourceControl.Width
                iSP.Y 
= SourceControl.Top + SourceControl.Height  4
                iEP.X 
= TargetControl.Left + TargetControl.Width  4
                iEP.Y 
= TargetControl.Top + TargetControl.Height

                iGraphicsPath.AddLine(iSP.X, iSP.Y, iEP.X, iSP.Y)
                iGraphicsPath.AddLine(iEP.X, iSP.Y, iEP.X, iEP.Y)

            
ElseIf TargetControl.Top > (SourceControl.Top + SourceControl.Height) Then
                
'右下角
                '_
                ' |
                iSP.X = SourceControl.Left + SourceControl.Width
                iSP.Y 
= SourceControl.Top + SourceControl.Height * 3  4
                iEP.X 
= TargetControl.Left + TargetControl.Width  4
                iEP.Y 
= TargetControl.Top

                iGraphicsPath.AddLine(iSP.X, iSP.Y, iEP.X, iSP.Y)
                iGraphicsPath.AddLine(iEP.X, iSP.Y, iEP.X, iEP.Y)

            
Else
                
'右边
                '_
                '
                iSP.X = SourceControl.Left + SourceControl.Width
                iSP.Y 
= SourceControl.Top + SourceControl.Height  2
                iEP.X 
= TargetControl.Left
                iEP.Y 
= TargetControl.Top + TargetControl.Height  2

                iGraphicsPath.AddLine(iSP.X, iSP.Y, iEP.X 
+ (iSP.X - iEP.X)  2, iSP.Y)
                iGraphicsPath.AddLine(iEP.X 
+ (iSP.X - iEP.X)  2, iEP.Y, iEP.X, iEP.Y)

            
End If
        
Else
            
If (TargetControl.Top + TargetControl.Height) < SourceControl.Top Then
                
'上边
                '|
                '
                iSP.X = SourceControl.Left + SourceControl.Width  2
                iSP.Y 
= SourceControl.Top
                iEP.X 
= TargetControl.Left + TargetControl.Width  2
                iEP.Y 
= TargetControl.Top + TargetControl.Height

                iGraphicsPath.AddLine(iSP.X, iSP.Y, iSP.X, iSP.Y 
- (iSP.Y - iEP.Y)  2)
                iGraphicsPath.AddLine(iEP.X, iSP.Y 
- (iSP.Y - iEP.Y)  2, iEP.X, iEP.Y)

            
ElseIf TargetControl.Top > (SourceControl.Top + SourceControl.Height) Then
                
'下边
                '|
                iSP.X = SourceControl.Left + SourceControl.Width  2
                iSP.Y 
= SourceControl.Top + SourceControl.Height
                iEP.X 
= TargetControl.Left + TargetControl.Width  2
                iEP.Y 
= TargetControl.Top

                iGraphicsPath.AddLine(iSP.X, iSP.Y, iSP.X, iSP.Y 
- (iSP.Y - iEP.Y)  2)
                iGraphicsPath.AddLine(iEP.X, iSP.Y 
- (iSP.Y - iEP.Y)  2, iEP.X, iEP.Y)
            
Else
                
'重合
                '什么都不做
            End If
        
End If

        
Return iGraphicsPath
    
End Function



    
Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button1.Click
        
Dim iG As Graphics = Me.CreateGraphics
        
Dim iGP As Drawing2D.GraphicsPath
        
Dim iSPen As New Pen(Color.Blue, 3)

        iSPen.StartCap 
= LineCap.RoundAnchor
        iSPen.EndCap 
= LineCap.ArrowAnchor

        iGP 
= CreateGraphicsPathByControls(ListBox1, ListBox2)
        iG.DrawPath(iSPen, iGP)
    
End Sub

End Class

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
### 回答1: WPF TreeView 是一种用于显示层次结构数据的件,它可以通过连接线的方式来展示各个节点之的层级关系。 在 WPF TreeView 中,默认情况下是没有连接线的。但是我们可以通过自定义 ItemContainerStyle 来实现连接线的显示。 首先,在 XAML 文件中定义一个 Style,并设置为 TreeViewItem 的样式。在这个 Style 中,我们可以设置连接线的样式,例如使用 Border 元素来表示连接线,可以设置宽度、颜色等属性,来实现不同的样式。 其次,在定义 TreeView 时,将 ItemContainerStyle 属性设置为前面定义的 Style,这样每个 TreeViewItem 都会使用这个样式。 样式中的连接线通常是在 TreeViewItem 的左边或者右边显示。我们可以在样式中定义一个 Border 件,并通过绑定的方式设置它的 Width 和 Height,以及 Margin 属性,来连接线的位置和大小。 最后,我们可以根据数据的层次关系,动态生成连接线。例如,可以在 TreeViewItem 的模板中使用触发器,通过设置 Border 件的 Visibility 属性来连接线的显示或隐藏。在 TreeViewItem 层级不变的情况下,每个节点都可以有自己的连接线样式。 总结来说,WPF TreeView 连接线的实现原理就是通过创建自定义的 ItemContainerStyle,然后在样式中使用 Border 件来表示连接线,根据数据的层次关系和节点的层级关系,来动态生成连接线。这样可以实现不同样式的连接线,使 TreeView 更加直观和易于理解。 ### 回答2: WPF TreeView组件是一种用于显示层次结构数据的件,常被用来展示树形数据。连接线是指在展示树形数据时,为了更好地展示层次结构,将父节点和子节点通过线条连接起来的效果。 WPF TreeView组件默认情况下没有提供连接线的功能,但是我们可以通过自定义样式来实现连接线的效果。以下是一种常见的实现方法: 1. 首先,在TreeView件的样式中添加一个名为"TreeViewItemStyle"的样式。在这个样式中,我们可以设置节点的外观以及连接线的细节。在这个样式中,通常包含一个名为"TreeViewItem"的件模板。 2. 接着,在"TreeViewItem"件模板中,我们可以使用一个名为"Grid"的容器来布局节点的外观和连接线。通常,我们可以在"Grid"中添加一个名为"ExpanderButton"的按钮件用于展开和折叠子节点,以及一个名为"ContentPresenter"的件用于显示节点的内容。同时,我们可以在该模板中添加一个名为"Connector"的路径件,用于绘制连接线。 3. 在"Connector"路径件中,我们可以使用"BezierSegment"或"LienSegment"等路径段来绘制连接线的形状。通过设置路径段的起始点和终点,以及制点的位置能够实现不同类型的连接线形状,如直线、曲线等。 4. 最后,在TreeView的XAML代码中,将自定义的"TreeViewItemStyle"应用到TreeViewItem的"ItemContainerStyle"属性上,以达到连接线的效果。 总结起来,通过自定义TreeViewItem的样式和件模板,我们可以添加连接线的效果。这样,当我们使用WPF TreeView件展示层次结构数据时,可以更清晰地表示父子关系。 ### 回答3: WPF(Windows Presentation Foundation)中的TreeView件是用于显示层次结构数据的件,常用于展示树型结构数据。在TreeView中添加连接线的一种实现方式是使用TreeView件中的TreeViewItem件和HierarchicalDataTemplate。 TreeViewItem是TreeView件中的每个节点,通过在每个TreeViewItem中添加一个HierarchicalDataTemplate,可以定义节点的样式和布局。连接线可以通过在HierarchicalDataTemplate中添加Border或者Line等件来实现。 首先,我们可以使用ItemContainerStyle属性来定义每个TreeViewItem的样式。在样式中使用Setter来设置件的属性,例如设置TreeViewItem的边框颜色、边框厚度等。 接着,在每个TreeViewItem的样式中,我们可以使用HierarchicalDataTemplate来定义节点内容的布局。在HierarchicalDataTemplate中,我们可以添加连接线件(如Line)来实现连接效果。 具体实现时,可以为每个TreeViewItem添加一个包含连接线的容器(如Border),然后再在该容器中添加子节点。连接线可以使用WPF的线型件Line,设置其起始点和终点,并设置线的颜色、粗细等属性。 整个过程大致如下: 1. 创建TreeView件,并绑定数据源。 2. 定义TreeViewItem的样式,设置边框颜色和厚度等属性。 3. 在TreeViewItem的模板中使用HierarchicalDataTemplate定义节点内容的布局。 4. 在HierarchicalDataTemplate中添加连接线件(如Line),设置起始点和终点,设置线的颜色、粗细等属性。 5. 设置TreeView件的ItemContainerStyle为定义的样式。 通过以上步骤,我们可以实现在WPF TreeView中添加连接线的效果,使树形结构的数据更加直观和美观。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值