模拟浏览器访问页面，实现tabpage关闭按钮

Posted 2022-05-06 VB.Net

版权声明：本文为博主原创文章，转载请在显著位置标明本文出处以及作者网名，未经作者允许不得用于商业目的。

本文描述了如何实现模拟常见浏览器在一个窗体内打开多个页面，实际很多人第一想到的是使用tabcontrol选项卡控件。但是在开发程序时，实际存在以下2个难点：

1、tabcontrol上的选项卡本身没有提供关闭按钮，需要在tabpage上绘制关闭按钮。此难点可以通过在TabControl的DrawItem事件中，绘制选项卡来解决。注意：需要将TabControl的DrawMode属性设置为 TabDrawMode.OwnerDrawFixed。

2、点击链接打开新页面。可以使用webbrowser访问网页，当webbrowser的NewWindow事件时，获得新页面的网址，在tabcontrol上新建一个tabpage，并在里面放置一个新的webbrowser控件，打开新页面的网址。

具体代码如下，其中包含了部分说明：

Imports System.ComponentModel

Public Class Form1
    Private Sub Form1_Load(sender As Object, e As EventArgs) Handles MyBase.Load

        '定义tabpage的大小，其中宽度重要
        TabControl1.ItemSize = New Size(200, 20)
        TabControl1.SizeMode = TabSizeMode.Fixed
        TabControl1.DrawMode = TabDrawMode.OwnerDrawFixed


        Dim wb As New WebBrowser
        wb.Dock = DockStyle.Fill
        wb.Url = New Uri("https://www.baidu.com")
        '不弹出错误提示
        wb.ScriptErrorsSuppressed = True

        TabControl1.TabPages(0).Controls.Add(wb)

        AddHandler wb.DocumentCompleted, AddressOf wb_DocumentCompleted
        AddHandler wb.NewWindow, AddressOf wb_NewWindow
    End Sub


    Private Sub TabControl1_DrawItem(sender As Object, e As DrawItemEventArgs) Handles TabControl1.DrawItem
        '绘制关闭按钮
        '按钮大小统一为18*18

        '获得tabpage的序号
        Dim index As Integer = e.Index

        '判断是否是最后一个tabpage，如果是最后一个，那么应该显示增加按钮；否则显示关闭按钮
        If index = TabControl1.TabPages.Count - 1 Then

            ''绘制tabpage的新建按钮
            Dim pClose As New Point
            pClose.X = e.Bounds.X + (e.Bounds.Width - 18) / 2
            pClose.Y = e.Bounds.Top + 1

            e.Graphics.DrawImage(ImageList1.Images(2), pClose)
        Else

            Dim rectTab As Rectangle = TabControl1.GetTabRect(e.Index)
            e.Graphics.FillRectangle(New SolidBrush(Color.White), rectTab)


            '绘制tabpage的标题
            '使用tabpage设置的字体
            Dim f As Font = e.Font
            '绘制文字的位置
            Dim pTitle As New Point
            pTitle.X = e.Bounds.X + 1
            pTitle.Y = e.Bounds.Top + 3
            '文字内容

            Dim title As String = TabControl1.TabPages(e.Index).Text
            If title.Length > 15 Then title = title.Substring(0, 15)

            '绘制文字
            e.Graphics.DrawString(title, f, Brushes.Black, pTitle)

            '绘制tabpage的关闭按钮
            Dim pClose As New Point
            pClose.X = e.Bounds.Right - 19
            pClose.Y = e.Bounds.Top + 1

            e.Graphics.DrawImage(ImageList1.Images(0), pClose)
        End If

    End Sub


    Private Sub TabControl1_MouseMove(sender As Object, e As MouseEventArgs) Handles TabControl1.MouseMove
        Dim g As Graphics = TabControl1.CreateGraphics

        '获得鼠标移动位置
        Dim movePoint As Point = e.Location

        If TabControl1.TabPages.Count < 2 Then Exit Sub

        '获得每个tabpage的header的区域
        For i As Integer = 0 To TabControl1.TabPages.Count - 2
            '获得header区域
            Dim rectTab As Rectangle = TabControl1.GetTabRect(i)
            '获得关闭按钮的区域
            Dim rectClose As Rectangle
            rectClose.X = rectTab.Right - 19
            rectClose.Y = rectTab.Top + 1
            rectClose.Width = 18
            rectClose.Height = 18

            '如果移动的位置在tabpage header区域内
            If rectTab.Contains(movePoint) Then
                '如果移动的位置在关闭按钮区域内
                If rectClose.Contains(movePoint) Then
                    g.DrawImage(ImageList1.Images(1), rectClose)
                Else
                    g.DrawImage(ImageList1.Images(0), rectClose)
                End If
            End If

        Next
    End Sub

    Private Sub TabControl1_MouseClick(sender As Object, e As MouseEventArgs) Handles TabControl1.MouseClick

        '获得鼠标点击位置
        Dim clickPoint As Point = e.Location

        '获得每个tabpage的header的区域
        For i As Integer = 0 To TabControl1.TabPages.Count - 1
            '获得header区域
            Dim rectTab As Rectangle = TabControl1.GetTabRect(i)
            '获得关闭按钮的区域
            Dim rectClose As Rectangle
            rectClose.X = rectTab.Right - 19
            rectClose.Y = rectTab.Top + 1
            rectClose.Width = 18
            rectClose.Height = 18
            '如果点击的位置在关闭按钮区域内
            If rectClose.Contains(clickPoint) Then
                '移除选项卡
                TabControl1.TabPages.RemoveAt(i)
                Exit For
            End If
        Next
    End Sub

    Private Sub wb_NewWindow(sender As Object, e As CancelEventArgs)
        Dim wb As WebBrowser = CType(sender, WebBrowser)
        e.Cancel = True

        Dim toUrl As String
        toUrl = wb.Document.ActiveElement.GetAttribute("href")

        Dim newtp As New TabPage()
        newtp.Text = "正在打开"

        Dim newwb As New WebBrowser
        newwb.Dock = DockStyle.Fill
        '不弹出错误提示
        newwb.ScriptErrorsSuppressed = True

        newtp.Controls.Add(newwb)
        newwb.Url = New Uri(toUrl)

        Dim insertIndex As Integer = TabControl1.SelectedIndex + 1
        TabControl1.TabPages.Insert(insertIndex, newtp)


        AddHandler newwb.DocumentCompleted, AddressOf wb_DocumentCompleted
        AddHandler newwb.NewWindow, AddressOf wb_NewWindow

        TabControl1.SelectedTab = newtp
    End Sub

    Private Sub wb_DocumentCompleted(sender As Object, e As WebBrowserDocumentCompletedEventArgs)
        Dim wb As WebBrowser = CType(sender, WebBrowser)

        Dim tp As TabPage
        tp = CType(wb.Parent, TabPage)
        tp.Text = wb.DocumentTitle

        'Console.WriteLine(tp.TabIndex & " " & tp.Text)
    End Sub
End Class

运行如下图：

需要源代码的，可以到这里下载：模拟浏览器，实现tabpage关闭按钮代码-桌面系统文档类资源-CSDN文库

由于.net平台下C#和vb.NET很相似，本文也可以为C#爱好者提供参考。

学习更多vb.net知识，请参看 vb.net 教程 目录