您的位置：首页 > 编程语言

winform实现QQ聊天气泡200行代码

2015-05-20 19:58 651 查看

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;

}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航