用VB.NET在窗体中控制网页元素

原创：Mr.lu 2003年12月10日

大家都知道网页的表现力可以说是无限的，而且通过各种各样的技术，如JScript,CSS,DHTML技术更是能把您的思想表现淋漓尽致。而在Windows Forms里进行标准应用程序（如：信息管理系统开发）的编程很方便，只需要通过对组件的编程就可实现，而想表现一些色彩鲜艳的事物，除非你学过高深的GDI+技术进行编程或是用Direct3D调用三维场景，可能很难实现。 今天我就给大家讲一讲如何在窗体中调用网页并控制网页元素，顺便介绍个小技巧重新用图片绘制VB.NET控件中的ListBox选项。 程序运行如图： 第一部分，给大家介绍如何用图片重绘ListBox控件的选择项，关键是会用到ListBox的两个事件。 DrawItem Occurs when a visual aspect of an owner-drawn ListBox changes. MeasureItem Occurs when an owner-drawn ListBox is created and the sizes of the list items are determined. 在这两个事件描述中，可以知道需要设置Listbox属性，使其成为"owner-drawn listBox",所以需要调整下面属性。 DrawMode Gets or sets the drawing mode for the control. 将其设置为下列表中有红色标记的值 Member name Description Normal All the elements in a control are drawn by the operating system and are of the same size. OwnerDrawFixed All the elements in the control are drawn manually and are of the same size. OwnerDrawVariable All the elements in the control are drawn manually and can differ in size. 具体绘制Listbox选项需要笔刷，在System.Drawing和System.Drawing.Drawing2D域名下有如下几种笔刷用于填充几何体。 System.Drawing.Drawing2D.HatchBrush System.Drawing.Drawing2D.LinearGradientBrush System.Drawing.Drawing2D.PathGradientBrush System.Drawing.SolidBrush System.Drawing.TextureBrush 他们都是继承自System.Drawing.Brush. 今天我只给大家讲用图片填充ListBox选项，只会用到TextureBrush，其他笔刷读者可以举一反三作为练习。 步骤一：在一个ImageList里加入三副位图。并且在窗体实例化时，用其作为TextureBrush实例化的参数，生成一组笔刷。 代码如下： Public Class Form1     Inherits System.Windows.Forms.Form    Private LyBrushes(3) As System.Drawing.TextureBrush     '生成笔刷引用     Private LyHeights() As Integer = {34, 34, 34}    '对于要重新绘制的Listbox项的高度描述     ... Public Sub New()        '窗体构造函数     MyBase.New()     'This call is required by the Windows Form Designer.     InitializeComponent()     'Add any initialization after the InitializeComponent() call     evaluateBrush(3)    '生成笔刷函数 End Sub Private Sub evaluateBrush(ByVal evaluatetop As Integer)    'evaluateBrush函数实现     Dim i As Integer     Dim Tempbg(evaluatetop) As Image     Dim f As TextureBrush 　 For i = 0 To evaluatetop - 1         Tempbg(i) = imgLBitems.Images.Item(i)         LyBrushes(i) = New TextureBrush(Tempbg(i))     Next End Sub 步骤二，由于ListBox的DrawMode属性已经设置为OwnerDrawVariable，所以接收ListBox控件的DrawItem和MeasureItem事件，并在处理函数中用笔刷绘制ListBox选项。 代码如下： #Region "lbSelect"          '处理ListBox控件的DrawItem和MeasureItem事件     Private Sub lbSelect_DrawItem(ByVal sender As Object, ByVal e As System.Windows.Forms.DrawItemEventArgs) _         Handles lbSelect.DrawItem         Dim brush1 As Brush         e.DrawBackground()         brush1 = LyBrushes(e.Index)         e.Graphics.FillRectangle(brush1, e.Bounds)         e.DrawFocusRectangle()    End Sub    Private Sub lbSelect_MeasureItem(ByVal sender As Object, ByVal e As System.Windows.Forms.MeasureItemEventArgs）_         Handles lbSelect.MeasureItem         e.ItemHeight = LyHeights(e.Index)    End Sub #End Region 程序运行结果： 第二部分，我来说一说如何在窗体中嵌入网页，并通过控件控制网页元素。 首先需要一个Microsoft Web Browser的控件来将普通网页载入窗体。 确定后，你会在ToolBox里看到此控件。 由于它是Com组件，.NET会帮你把它封装成符合.NET规范的控件，你会注意到在你的程序文件夹里会有两个.dll文件 将你制作好的网页放在Windows Application目录下。 在程序中加入网页地址，代码如下： Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load     Dim String1 As String     Dim String2 As String     Dim Len1 As Integer     Dim Len2 As Integer     Dim Lenmid As Integer     String1 = System.Reflection.Assembly.GetExecutingAssembly.Location    '得到程序绝对路径     Len1 = Len(String1)     Len2 = Len("bin/MyApp.exe")     Lenmid = Len1 - Len2     String1 = Mid(String1, 1, Lenmid)     String2 = String1 + "MyHtmlFiles/myhtml.htm"    '得到网页绝对路径     Me.MyWebBrowser.Navigate2(String2)    '使Web Browser控件锁定网页     Me.Show()     Me.Activate() End Sub 接下来如何用控件来控制网页元素那，这需要在程序中加入新的引用。 这个引用有很多的接口，它可以帮助你把网页中不同类的网页元素，样式，以及事件整理出来，在程序中形成集合。想深入了解，请查找如图。 在我的程序，代码如下： Public Class Form1 Inherits System.Windows.Forms.Form Private LyBrushes(3) As System.Drawing.TextureBrush '生成笔刷引用 Private LyHeights() As Integer = {34, 34, 34} '对于要重新绘制的Listbox项的高度描述 Private htmlDoc As mshtml.IHTMLDocument2 '可以获得网页里所有元素，一个集合 Private htmlDivElements As mshtml.IHTMLElementCollection '一个元素集合的引用 在程序中添加Web Browser控件的DocumentComplete事件，在处理函数中进行如下操作。 Private Sub MyWebBrowser_DocumentComplete(ByVal sender As Object, ByVal e As _     AxSHDocVw.DWebBrowserEvents2_DocumentCompleteEvent) Handles MyWebBrowser.DocumentComplete     htmlDoc = MyWebBrowser.Document     htmlDivElements = htmlDoc.all.tags("DIV")     '获得网页中所有的DIV标记元素 End Sub 现在，可以用我们的之前制作的Listbox来控制网页元素了。 Private Sub lbSelect_SelectedIndexChanged(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles _     lbSelect.SelectedIndexChanged     Dim SelectID As Integer     SelectID = lbSelect.SelectedIndex     Select Case SelectID         Case 0             ControlIE(1)　　　　'根据不同的选择控制网页元素函数         Case 1             ControlIE(2)         Case 2             ControlIE(3)     End Select End Sub Private Sub ControlIE(ByVal orderplan As Integer)     Dim htmlstyle1 As mshtml.IHTMLStyle       '通过它可以获得某元素的样式集合     Dim htmlstyle2 As mshtml.IHTMLStyle     Dim htmlstyle3 As mshtml.IHTMLStyle     Dim divLayer1 As mshtml.IHTMLDivElement     Dim divLayer2 As mshtml.IHTMLDivElement     Dim divLayer3 As mshtml.IHTMLDivElement     divLayer1 = htmlDivElements.item("Layer1")     divLayer2 = htmlDivElements.item("Layer2")     divLayer3 = htmlDivElements.item("Layer3")     htmlstyle1 = divLayer1.style　　　　'注意"divLayer."时,VS.NET没有".style"代码提示，但是可以直接写，不会出错     htmlstyle2 = divLayer2.style     htmlstyle3 = divLayer3.style     Select Case orderplan         Case 1             htmlstyle1.zIndex = 3       '这时同在编辑网页中DIV元素的样式已经完全一样，并且VS.NET会有代码提示             htmlstyle2.zIndex = 2             htmlstyle3.zIndex = 1         Case 2             htmlstyle1.zIndex = 2             htmlstyle2.zIndex = 3             htmlstyle3.zIndex = 1         Case 3             htmlstyle1.zIndex = 1             htmlstyle2.zIndex = 2             htmlstyle3.zIndex = 3     End Select End Sub 到这里就全部讲完了，可能有的地方不够详细，请参考源程序。 顺便给大家展示一下它的应用，我和宁为、以及李琰共同开发的电子宠物主界面，主窗口就是一个IE。