使用HTML页面美化WinForm窗体

最新推荐文章于 2022-12-15 10:17:04 发布

goodlifesantook

最新推荐文章于 2022-12-15 10:17:04 发布

阅读量1w

点赞数 2

分类专栏： web vb .net gui html 文章标签： winform html javascript webbrowser class vbscript

本文链接：https://blog.csdn.net/santook/article/details/7233261

版权

vb 同时被 3 个专栏收录

15 篇文章 0 订阅

订阅专栏

.net

14 篇文章 0 订阅

订阅专栏

gui

2 篇文章 0 订阅

订阅专栏

对于大多数的Windows Form桌面表单程序员来说，一直都会希望开发出美观的用户界面。这经常会让我们感到头疼，因为使用GDI或GDI+都需要做很多的事情，今天我在此介绍一种简单便捷且可以让你创作出更为简单且美观的用户界面。当然也许我不是第一个介绍这种方法，但起码会给你一点更为简单的提示，来帮助你快速设计一个以HTML为UI的WinForm应用程序。

首先，假设您已经基本知道如何设计一个HTML页面，并且简单的了解VBScript或者JavaScript。

下面来看一下运行的效果

本例子只是简单的展示了HTML和winform之间的交互，如果想要设计更为优越的效果，您可能需要了解css。

看一下HTML页面的代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Untitled Page</title>
    <style type="text/css">
        .style1
        {
            width: 100%;
margin-bottom: 1px;
}
        .style2
        {
            width: 106px;
        }
    .copyright {
font-family: 宋体, Arial, Helvetica, sans-serif;
font-size: x-small;
font-weight: 100;
font-style: normal;
text-transform: none;
font-variant: normal;
color: #C0C0C0;
text-decoration: underline;
}
    .MenuStyle {
border-style: 1;
border-width: 1px;
border-color: #000000;
background-color: #C0C0C0;
  padding: 1px;
  margin: 1px;
}
.style3 {
border: 1px solid #800000;
background-color: #FF0000;
}
.style4 {
border: 1px solid #000000;
background-color: #FF0000;
}
    </style>
    <script language="vbscript">

</script>
</head>
<body οnlοad="javascript:menu.style.visibility='hidden';">

<p>表格与控件</p>
    <table class="style1"
        style="padding: 1px; font-size: small; color: #000000; background-color: #FFFFFF; border: thin solid #808080; border-spacing: 1px; margin-left: 1px; margin-right: 1px; margin-top: 1px;">
        <tr>
            <td id="FILE" οnmοuseοver="javascript:this.style.backgroundColor='#FF2A7F'"
                οnmοuseοut="javascript:this.style.backgroundColor='#FFFFFF'"
                οnmοusedοwn="javascript:this.style.backgroundColor='#00FF00'"
                οnmοuseup="javascript:this.style.backgroundColor='#0000FF';menu.style.visibility='visible';menu.style.left=FILE.style.left;" class="style2" style="height: 17px; width: 222px;">
                文件</td>
            <td id="EDIT" οnmοuseοver="javascript:this.style.backgroundColor='#FF2A7F'" οnmοuseοut="javascript:this.style.backgroundColor='#FFFFFF'" οnmοusedοwn="javascript:this.style.backgroundColor='#00FF00'" οnmοuseup="javascript:this.style.backgroundColor='#0000FF'" style="height: 17px; width: 354px;">
                编辑</td>
            <td id=VIEW" οnmοuseοver="javascript:this.style.backgroundColor='#FF2A7F'" οnmοuseοut="javascript:this.style.backgroundColor='#FFFFFF'" οnmοusedοwn="javascript:this.style.backgroundColor='#00FF00'" οnmοuseup="javascript:this.style.backgroundColor='#0000FF'" style="height: 17px; width: 96px;">
                视图</td>
            <td id="PROJECT" οnmοuseοver="javascript:this.style.backgroundColor='#FF2A7F'" οnmοuseοut="javascript:this.style.backgroundColor='#FFFFFF'" οnmοusedοwn="javascript:this.style.backgroundColor='#00FF00'" οnmοuseup="javascript:this.style.backgroundColor='#0000FF'" style="height: 17px; width: 90px;">
                项目</td>
            <td id="DEBUG" οnmοuseοver="javascript:this.style.backgroundColor='#FF2A7F'" οnmοuseοut="javascript:this.style.backgroundColor='#FFFFFF'" οnmοusedοwn="javascript:this.style.backgroundColor='#00FF00'" οnmοuseup="javascript:this.style.backgroundColor='#0000FF'" style="height: 17px">
                调试</td>
        </tr>
        <tr οnmοuseοver="javascript:this.style.backgroundColor='#FF2A7F'" οnmοuseοut="javascript:this.style.backgroundColor='#FFFFFF'" οnmοusedοwn="javascript:this.style.backgroundColor='#00FF00'" οnmοuseup="javascript:this.style.backgroundColor='#0000FF'">
            <td style="width: 222px" >
     <input id="Text1" type="text" />
   </td>
            <td style="width: 354px">

<p class="copyright">Santook Development Studio. QQ:524413426 非凡计算机科技</p>

</body>
</html>

使用Visual Basic 2010创建一个WinForm应用程序，然后在窗体上绘制一个WebBrowser控件，效果如下：

切换到代码视图，并输入以下代码：

Public Class Form1
Private Sub imgclick()

        Dim x As HtmlElement
        x = Me.WebBrowser1.Document.GetElementById("menu")
        x.Style = Strings.Replace(x.Style, "VISIBILITY: visible;", "VISIBILITY: hidden;")
        MsgBox("您已经点击了页面上的图形!")
    End Sub

    Private Sub buttonclick1()
        MsgBox("用户名=" & Me.WebBrowser1.Document.GetElementById("Text1").GetAttribute("value") & ",密码=" & Me.WebBrowser1.Document.GetElementById("Password1").GetAttribute("value"))
    End Sub

Private Sub Form1_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

Me.WebBrowser1.Navigate("E:\page.htm")

End Sub

    Private Sub WebBrowser1_DocumentCompleted(ByVal sender As System.Object, ByVal e As System.Windows.Forms.WebBrowserDocumentCompletedEventArgs) Handles WebBrowser1.DocumentCompleted
        Dim x As HtmlElement
        x = Me.WebBrowser1.Document.GetElementById("sdss")
        x.AttachEventHandler("onclick", AddressOf imgclick)
        x = Me.WebBrowser1.Document.GetElementById("Button1")
        x.AttachEventHandler("onclick", AddressOf buttonclick1)
    End Sub

    Private Sub Timer1_Tick(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Timer1.Tick
        On Error Resume Next
        Me.WebBrowser1.Document.GetElementById("Label1").InnerText = Now
    End Sub

    Private Sub WebBrowser1_Navigating(ByVal sender As Object, ByVal e As System.Windows.Forms.WebBrowserNavigatingEventArgs) Handles WebBrowser1.Navigating
        On Error Resume Next
        If InStr(e.Url.AbsoluteUri, "#") <> 0 Then
            Dim x As HtmlElement
            x = Me.WebBrowser1.Document.GetElementById("menu")
            x.Style = Strings.Replace(x.Style, "VISIBILITY: visible;", "VISIBILITY: hidden;")
            MsgBox(e.Url)
            e.Cancel = True
        End If

End Sub
End Class

这里只是基本演示了关于使用WebBrowser控件来和HTML进行交互的一些方法，更多方法还需要大家自己去发掘。另外使用WebBrowser还能创建图形化报表等。

源代码请见我的下载资源。

goodlifesantook

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
2
评论
使用HTML页面美化WinForm窗体

对于大多数的Windows Form桌面表单程序员来说，一直都会希望开发出美观的用户界面。这经常会让我们感到头疼，因为使用GDI或GDI+都需要做很多的事情，今天我在此介绍一种简单便捷且可以让你创作出更为简单且美观的用户界面。当然也许我不是第一个介绍这种方法，但起码会给你一点更为简单的提示，来帮助你快速设计一个以HTML为UI的WinForm应用程序。首先，假设您已经基本知道如何设计一个HTM
复制链接

扫一扫