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
查看評論