c# winform实现QQ聊天气泡界面，原理非常简单，通过webKitBrowser(第三方浏览器控件，因为自带的兼容性差)加载html代码实现，聊天界面是一个纯HTML的代码，与QQ的聊天界面可以比拟，很不错，因为是html所以扩展性非常大，点击发送按钮可以将文本框的文字加入聊天里，项目开发过程遇到几个难点都解决了，如：
1、怎么在聊天新消息插入后将滚动条滚动到最底部，这里我网上搜索了webKitBrowser的滚动条用法找不到，所以这里我用了锚点链接通过每次加载html用js跳到锚点实现滚动条始终在最底部；
2、html的兼容性问题，原来开始我是用内置的webbrowser来开发，由于他的内核是ie很多html特效无法得到释放，所以使用了第三方控件webKitBrowser，这控件缺点是需要用到一大堆dll，在羞涩的指甲油目录下。
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; }
转载于:https://www.cnblogs.com/tuzhiyuan/p/4518076.html