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;

        }

winform实现QQ聊天气泡200行代码的更多相关文章

  1. C#绘制三角形并填充，使用winform实现qq聊天气泡

    首先是需求,需要制作一个聊天气泡, 但是winform中有没有类似Android的.9图,只有自己设计图形拼接气泡. 第一种是绘制空心三角形,第二种是绘制三角形区域,可以指定RGB颜色. privat ...

  2. QQ聊天气泡（图片拉伸不变样）、内容尺寸定制（高度随字数、字体而变）

    - (void)viewDidLoad { [super viewDidLoad]; self.view.backgroundColor = [UIColor whiteColor]; /** QQ聊 ...

  3. 200行代码实现简版react🔥

    200行代码实现简版react

  4. 不到 200 行代码，教你如何用 Keras 搭建生成对抗网络（GAN）【转】

    本文转载自:https://www.leiphone.com/news/201703/Y5vnDSV9uIJIQzQm.html 生成对抗网络(Generative Adversarial Netwo ...

  5. 200行代码，7个对象——让你了解ASP.NET Core框架的本质

    原文:200行代码,7个对象--让你了解ASP.NET Core框架的本质 2019年1月19日,微软技术(苏州)俱乐部成立,我受邀在成立大会上作了一个名为<ASP.NET Core框架揭秘&g ...

  6. 200行代码实现Mini ASP.NET Core

    前言 在学习ASP.NET Core源码过程中,偶然看见蒋金楠老师的ASP.NET Core框架揭秘,不到200行代码实现了ASP.NET Core Mini框架,针对框架本质进行了讲解,受益匪浅,本 ...

  7. SpringBoot，用200行代码完成一个一二级分布式缓存

    缓存系统的用来代替直接访问数据库,用来提升系统性能,减小数据库复杂.早期缓存跟系统在一个虚拟机里,这样内存访问,速度最快. 后来应用系统水平扩展,缓存作为一个独立系统存在,如redis,但是每次从缓存 ...

  8. 200 行代码实现基于 Paxos 的 KV 存储

    前言 写完[paxos 的直观解释]之后,网友都说疗效甚好,但是也会对这篇教程中一些环节提出疑问(有疑问说明真的看懂了 ),例如怎么把只能确定一个值的 paxos 应用到实际场景中. 既然 Talk ...

  9. 【HTML5】实现QQ聊天气泡效果

    今天自己用 HTML/CSS 做了个类似QQ的聊天气泡,以下是效果图: 以下说下关键地方的样式设置.然后贴出html和css代码(不多). 步骤1:布局 消息採用div+float布局,每条消息用一个 ...

随机推荐

  1. Activity生命运行中的几个方法

    给大家看看一个周期图

  2. angular初体验

    所有需要ng管理的代码必须被包裹在一个有ng-app指令的元素中ng-app是ng的入口,表示当前元素的所有指令都会被angular管理(对每一个指令进行分析和操作) 利用angular实现双向绑定: ...

  3. 从零开始，跟我一起做jblog项目（一）引言

    从零开始,跟我一起做jblog项目(一)引言 想做一个java版的blog,源自一个很久之前的想法 当时刚学习JAVA的web编程 想买自己的域名,自己的VPS,安装自己的WEB服务 用google ...

  4. 一款基于jquery的喜欢动画按钮

    今天给大家带来一款基于jquery的喜欢动画按钮.这个实例中给了三种动画特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <p class='heading'> C ...

  5. Setup Factory 读取安装包的配置文件

    result = INIFile.GetValue(SessionVar.Expand("%SourceFolder%\\set.ini"), "set", & ...

  6. 【Spring实战】—— 3 使用facotry-method创建单例Bean总结

    如果有这样的需求: 1 不想再bean.xml加载的时候实例化bean,而是想把加载bean.xml与实例化对象分离. 2 实现单例的bean 以上的情况,都可以通过工厂方法factory-metho ...

  7. oozie中时间EL表达式

    EL表达式: 常量表示形式 含义说明 ${coord:minutes(int n)} 返回日期时间:从一开始,周期执行n分钟 ${coord:hours(int n)} 返回日期时间:从一开始,周期执 ...

  8. window.parent.document解决原生js或jQuery 实现父窗口的问题

    做WEB前端开发的过程中,经常会有这样的需求,用户点击[编辑]按钮,弹出一个对话框,在里边修改相应的值,然后把修改后的值显示在原页面,最后点击保存. 用window.parent.document.g ...

  9. JavaBeans 官方文档学习

    提示,重点:JavaBeans的Property和 Events:PropertyEditor极其注册和查找机制. 从目前来看,JavaBeans 更像是源自GUI的需求. 使用NetBeans新建一 ...

  10. 多媒体开发之rtp 打包发流--- 从h264中获取分辨率

    http://blog.csdn.net/DiegoTJ/article/details/5541877 http://www.cnblogs.com/lidabo/p/4482684.html 分辨 ...