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

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&amp;type=1&amp;f=40&amp;uin=3128767651&amp;t=1432111720&amp;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&amp;type=1&amp;f=40&amp;uin=1286679566&amp;t=1432111720&amp;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

winform实现QQ聊天气泡200行代码相关推荐

C# winform 简单五子棋 200行代码实现双人对战
1.需求基于C# winform用200行代码实现简易五子棋双人对战,支持悔棋,需要的知识有C# winform界面,C#,以及几张素材图片. 2.界面界面设计如图1所示,背影图是用Graphic ...
C# winform 简单五子棋 200行代码实现人机对战
1.功能需求接上篇博文,本文描述简单人机对战实现过程,只是简单实现考虑走一步策略,如果要想实现走多步策略,可以在本文估值算法的基础上用极大极小值配合剪枝算法,实现考虑多步策略,这样ai会显得更加聪明 ...
HTML怎么做类似QQ聊天气泡,h5实现QQ聊天气泡的实例介绍
这篇文章主要介绍了HTML5实现QQ聊天气泡效果,用 HTML/CSS 做了个类似QQ的聊天气泡,具有一定的参考价值,感兴趣的小伙伴们可以参考一下今天自己用 HTML/CSS 做了个类似QQ的聊天气 ...
go语言:200行代码做udp rtp转发并发分布服务器
使用go做服务器最近写服务器使用c++多了以后,java和node逐渐被放到一边,最后又做了一个决定,使用go来做服务器,将会使用200行代码不到来做这个并发和分布式服务器,为什么? go语言的优势 ...
qq气泡php接口,h5实现QQ聊天气泡的实例介绍
这篇文章主要介绍了HTML5实现QQ聊天气泡效果,用 HTML/CSS 做了个类似QQ的聊天气泡,具有一定的参考价值,感兴趣的小伙伴们可以参考一下今天自己用 HTML/CSS 做了个类似QQ的聊天气 ...
QQ聊天气泡拖动效果实现
#QQ聊天气泡拖动效果实现 ##概述本文的目的是实现类似于QQ消息提醒的气泡的拖拽效果.网上已有大神的实现效果是通过监听控件的OnTouchEvent事件的ACTION_DOWN,ACTION_MO ...
宁愿“大小周”、每天只写 200 行代码、月薪 8k-17k 人群再涨！揭晓中国开发者真实现状...
作者 | 郑丽媛出品 | CSDN(ID:CSDNnews) 程序员,一个圈外人羡慕.圈内人喊苦的"神奇"职业--高薪.福利好是旁人羡慕的理由,高压.加班多却也是他们最常见的写照 ...
js websocket同步等待_WebSocket硬核入门：200行代码，教你徒手撸一个WebSocket服务器...
本文原题"Node.js - 200 多行代码实现 Websocket 协议",为了提升内容品质,有较大修订. 1.引言最近正在研究 WebSocket 相关的知识,想着如何能自 ...
爬虫python代码-Python爬虫教程：200行代码实现一个滑动验证码
Python爬虫教程:教你用200行代码实现一个滑动验证码做网络爬虫的同学肯定见过各种各样的验证码,比较高级的有滑动.点选等样式,看起来好像挺复杂的,但实际上它们的核心原理还是还是很清晰的,本文章大 ...

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

winform实现QQ聊天气泡200行代码相关推荐

最新文章

热门文章