[原][C#]winform使用html做界面
DirectUI技术开发界面的好奇 今天想到 怎么不让winform也那样了,使用html 做 ui ,大家都知道 使用div +css布局是一件非常容易的事情;
光说不练是假打,所以花了一个把小时尝试把winform的界面做成 webui
一:
大家都知道 winform 中有个控件叫 webBrowser 如果你不知道具体怎么用 详细看msdn 都知道了; 这里的它就是主角;
准备:
现在 我们新建一个winform项目 在上面放一个webBrowser 名称默认 停靠父窗口 在新建一个html 网页 名称 html.htm
#region Windows 窗体设计器生成的代码
/// <summary>
/// 设计器支持所需的方法 - 不要
/// 使用代码编辑器修改此方法的内容。
/// </summary>
private void InitializeComponent()
{
this.components = new System.ComponentModel.Container();
this.moveContron1 = new MoveControns.MoveContron(this.components);
this.webBrowser1 = new System.Windows.Forms.WebBrowser();
this.SuspendLayout();
//
// moveContron1
//
this.moveContron1.form = this;
this.moveContron1.MoveBorder = true;
//
// webBrowser1
//
this.webBrowser1.Dock = System.Windows.Forms.DockStyle.Fill;
this.webBrowser1.IsWebBrowserContextMenuEnabled = false;
this.webBrowser1.Location = new System.Drawing.Point(2, 2);
this.webBrowser1.MinimumSize = new System.Drawing.Size(20, 20);
this.webBrowser1.Name = "webBrowser1";
this.webBrowser1.ScrollBarsEnabled = false;
this.webBrowser1.Size = new System.Drawing.Size(375, 258);
this.webBrowser1.TabIndex = 1;
this.webBrowser1.Url = new System.Uri("file:///E:/visual%20studio/WebUi/WebUi/HTML.htm", System.UriKind.Absolute);
this.webBrowser1.WebBrowserShortcutsEnabled = false;
//
// MianWindow
//
this.AutoScaleDimensions = new System.Drawing.SizeF(6F, 12F);
this.AutoScaleMode = System.Windows.Forms.AutoScaleMode.Font;
this.BackColor = System.Drawing.SystemColors.ActiveCaptionText;
this.ClientSize = new System.Drawing.Size(379, 262);
this.Controls.Add(this.webBrowser1);
this.FormBorderStyle = System.Windows.Forms.FormBorderStyle.None;
this.Name = "MianWindow";
this.Opacity = 0.9D;
this.Padding = new System.Windows.Forms.Padding(2);
this.Text = "Form_Test";
this.Paint += new System.Windows.Forms.PaintEventHandler(this.MianWindow_Paint);
this.ResumeLayout(false);
}
#endregion
private MoveControns.MoveContron moveContron1;
private System.Windows.Forms.WebBrowser webBrowser1;
html的内容如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
</head>
<body style="background-color: Silver; width: 100%; height: 100%; margin: 0; padding: 0">
<div>
<span onmousedown="window.external.WinApiMoveEvent()" onmouseover="this.style.cursor = 'move';"
onmouseout="this.style.cursor='default'">11111111</span> <span style="float: right">
<input id="Button2" type="button" value="最大化" onclick="max()" />
<input id="Button3" type="button" value="CloseMe" onclick="closewin()" /></span>
</div>
<table border="1" cellspacing="0" cellpadding="0" width="100%" height="100%">
<tr>
<td align="right">
</td>
</tr>
<tr>
<td>
</td>
</tr>
<tr>
<td>
</td>
</tr>
</table>
</body>
</html>
<script type="text/javascript">
// 给Winform调用的方法
function ShowAlert(msg) {
alert(msg);
}
function closewin() {
window.external.CloseMe()
}
function max() {
var val = document.getElementById('Button2').value;
if (val = '最大化') {
document.getElementById('Button2').value = '最小化'
}
else {
document.getElementById('Button2').value = '最大化'
};
window.external.MaxWin();
}
</script>
为了 使网页能够 与winform 交互 所以 的把 com 的看见行 设置为真
[PermissionSet(SecurityAction.Demand, Name = "FullTrust")]
[ComVisible(true)] // 将该类设置为com可访问
public partial class MianWindow : GlassForm
{}
为了 更好看 我们把 winform的 边框 去掉
这里 的代码 是 处理 移动窗口 我们使用 winApi
#region win32 api 移动窗体
[DllImport("user32.dll")]
public static extern bool ReleaseCapture();
[DllImport("user32.dll")]
public static extern bool SendMessage(IntPtr hwnd, int wMsg, int wParam, int lParam);
public const int WM_SYSCOMMAND = 0x0112;
public const int SC_MOVE = 0xF010;
public const int HTCAPTION = 0x0002;
this.MouseDown += new MouseEventHandler(WinApiMoveEvent);
public void WinApiMoveEvent() //这里重载了 主要解决 参数问题
{
ReleaseCapture();
SendMessage(dropForm.Handle, WM_SYSCOMMAND, SC_MOVE + HTCAPTION, 0);
}
public void WinApiMoveEvent(object sender, System.Windows.Forms.MouseEventArgs e)
{
ReleaseCapture();
SendMessage(dropForm.Handle, WM_SYSCOMMAND, SC_MOVE + HTCAPTION, 0);
}
#endregion 现在 演示 怎么让js 调用 winform的方法
/// <summary>
/// 给WebBrowser中Web的JS调用的方法 关闭自己
/// </summary>
/// <param name="msg"></param>
public void ShowMsg(string msg)
{
}
void Form1_AeroGlassCompositionChanged(object sender, AeroGlassCompositionChangedEventArgs e)
{
// When the desktop composition mode changes the window exclusion must be changed appropriately.
if (e.GlassAvailable)
{
Invalidate();
}
else
{
this.BackColor = Color.Teal;
}
}
public void CloseMe()
{
if (MessageBox.Show("你确定要关闭吗?", "提示", MessageBoxButtons.YesNo) == DialogResult.Yes)
{
Close();
}
}
///最大化和最小化的处理
public void MaxWin()
{
if (this.WindowState == FormWindowState.Maximized)
{
this.WindowState = FormWindowState.Normal;
}
else
{
this.MaximumSize = new Size(Screen.PrimaryScreen.WorkingArea.Width, Screen.PrimaryScreen.WorkingArea.Height);
this.WindowState = FormWindowState.Maximized;
}
}
如果是winform 要调用 web中的js 看这里
webBrowser1里有 document. InvokeScript("这里是js 的函数名", 这里是参数);
现在 基本完成 ,
现在 基本完成 ,
本人 不善表达 如有不明白 这里下源码看
作者：qq283868910 发表于2012-1-5 17:25:32
原文链接
阅读：441 评论：0
查看评论