c# winform實現QQ聊天氣泡界面，原理非常簡單，通過webKitBrowser(第三方瀏覽器控件，因為自帶的兼容性差)加載html代碼實現，聊天界面是一個純HTML的代碼，與QQ的聊天界面可以比擬，很不錯，因為是html所以擴展性非常大，點擊發送按鈕可以將文本框的文字加入聊天里，項目開發過程遇到幾個難點都解決了，如：
1、怎么在聊天新消息插入后將滾動條滾動到最底部，這里我網上搜索了webKitBrowser的滾動條用法找不到，所以這里我用了錨點鏈接通過每次加載html用js跳到錨點實現滾動條始終在最底部；
2、html的兼容性問題，原來開始我是用內置的webbrowser來開發，由於他的內核是ie很多html特效無法得到釋放，所以使用了第三方控件webKitBrowser，這控件缺點是需要用到一大堆dll，在bin目錄下。
3、美化滾動條（網上的代碼）
。項目完整工程：點擊下載
下面是截圖：
以下是部分代碼：
private void Form1_Load(object sender, EventArgs e) { webKitBrowser1.IsWebBrowserContextMenuEnabled = false;//將該控件的 IsWebBrowserContextMenuEnabled 屬性設置為 false，以防止 WebBrowser 控件在用戶右擊它時顯示其快捷菜單. string sb = ""; sb = @"<html><head> <script type=""text/javascript"">window.location.hash = ""#ok"";</script> <style type=""text/css""> /*滾動條寬度*/ ::-webkit-scrollbar { width: 8px; } /* 軌道樣式 */ ::-webkit-scrollbar-track { } /* Handle樣式 */ ::-webkit-scrollbar-thumb { border-radius: 10px; background: rgba(0,0,0,0.2); } /*當前窗口未激活的情況下*/ ::-webkit-scrollbar-thumb:window-inactive { background: rgba(0,0,0,0.1); } /*hover到滾動條上*/ ::-webkit-scrollbar-thumb:vertical:hover{ background-color: rgba(0,0,0,0.3); } /*滾動條按下*/ ::-webkit-scrollbar-thumb:vertical:active{ background-color: rgba(0,0,0,0.7); } textarea{width: 500px;height: 300px;border: none;padding: 5px;} .chat_content_group.self { text-align: right; } .chat_content_group { padding: 10px; } .chat_content_group.self>.chat_content { text-align: left; } .chat_content_group.self>.chat_content { background: #7ccb6b; color:#fff; /*background: -webkit-gradient(linear,left top,left bottom,from(white,#e1e1e1)); background: -webkit-linear-gradient(white,#e1e1e1); background: -moz-linear-gradient(white,#e1e1e1); background: -ms-linear-gradient(white,#e1e1e1); background: -o-linear-gradient(white,#e1e1e1); background: linear-gradient(#fff,#e1e1e1);*/ } .chat_content { display: inline-block; min-height: 16px; max-width: 50%; color:#292929; background: #f0f4f6; /*background: -webkit-gradient(linear,left top,left bottom,from(#cf9),to(#9c3)); background: -webkit-linear-gradient(#cf9,#9c3); background: -moz-linear-gradient(#cf9,#9c3); background: -ms-linear-gradient(#cf9,#9c3); background: -o-linear-gradient(#cf9,#9c3); background: linear-gradient(#cf9,#9c3);*/ -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; padding: 10px 15px; word-break: break-all; /*box-shadow: 1px 1px 5px #000;*/ line-height: 1.4; } .chat_content_group.self>.chat_nick { text-align: right; } .chat_nick { font-size: 14px; margin: 0 0 10px; color:#8b8b8b; } .chat_content_group.self>.chat_content_avatar { float: right; margin: 0 0 0 10px; } .chat_content_group.buddy { text-align: left; } .chat_content_group { padding: 10px; } .chat_content_avatar { float: left; width: 40px; height: 40px; margin-right: 10px; } .imgtest{margin:10px 5px; overflow:hidden;} .list_ul figcaption p{ font-size:12px; color:#aaa; } .imgtest figure div{ display:inline-block; margin:5px auto; width:100px; height:100px; border-radius:100px; border:2px solid #fff; overflow:hidden; -webkit-box-shadow:0 0 3px #ccc; box-shadow:0 0 3px #ccc; } .imgtest img{width:100%; min-height:100%; text-align:center;} </style> </head><body> <div class=""chat_content_group self""> <img class=""chat_content_avatar"" src=""http://face1.web.qq.com/cgi/svr/face/getface?cache=1&type=1&f=40&uin=3128767651&t=1432111720&vfwebqq=5c3a30b487c67c5d37c2415dd32df3ffe3bc5b464d930ddd027d36911fc8d26a4cd23fffce868928"" width=""40px"" height=""40px""> <p class=""chat_nick"">阿狸萌萌噠</p> <p class=""chat_content"">測試一下QQ聊天氣泡</p> </div> <div class=""chat_content_group buddy""> <img class=""chat_content_avatar"" src=""http://face6.web.qq.com/cgi/svr/face/getface?cache=1&type=1&f=40&uin=1286679566&t=1432111720&vfwebqq=5c3a30b487c67c5d37c2415dd32df3ffe3bc5b464d930ddd027d36911fc8d26a4cd23fffce868928"" width=""40px"" height=""40px""> <p class=""chat_nick"">兔紙</p> <p class=""chat_content""><img class=""EQQ_faceImg"" src=""http://pub.idqqimg.com/lib/qqface/3.gif"" width=""24px"" height=""24px"">怎么實現的呢</p> </div> "; webKitBrowser1.DocumentText = sb; }