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. sass 的使用

    普通变量 ? 1 $fontSize:12px; 默认变量 ? 1 $fontSize:12px; !default; 变量覆盖:只需要在默认变量之前重新声明下变量即可 ? 1 2 $fontSize ...

  2. FreeRTOS 消息队列

    以下基础内容转载自安富莱电子: http://forum.armfly.com/forum.php 本章节为大家讲解 FreeRTOS 的一个重要的通信机制----消息队列,初学者要熟练掌握,因为消息 ...

  3. spoj687（后缀数组）

    http://www.spoj.com/problems/REPEATS/ 题意:给一串字符,需要你求这一串字符中有连续重复的字符的重复次数....... 思路:这是和poj3693一种类型的题目.. ...

  4. nodeJs should+mocha+istanbul 测试 遇到的坑

    .istanbul 和 mocha 结合进行nodejs测试的时候最后执行 istanbul cover _mocha test.sqrt.js的时候报错 如图: 用 ../node_modules/ ...

  5. DEDECMS模板文件命名规则

    DEDECMS提供的模板文件命名规则,也算是一种规范吧,希望能给大家提供参考. 模板保存位置 模板目录:{cmspath} /templets/样式名称(英文,默认为default,其中system为 ...

  6. Android多媒体系列2:利用MediaRecorder实现录音

  7. Fiddler是最强大最好用的Web调试工具之一--网站抓包分析

    Fiddler 教程 Fiddler是最强大最好用的Web调试工具之一,它能记录所有客户端和服务器的http和https请求,允许你监视,设置断点,甚至修改输入输出数据. 使用Fiddler无论对开发 ...

  8. 考虑下面两个JSP文件代码片断： test1.jsp:

    <HTML> <BODY> <% pageContext.setAttribute(”ten”,new Integer(10));%> //1 </BODY& ...

  9. ORDER BY 语句用于对结果集进行排序。

    ORDER BY 语句 ORDER BY 语句用于根据指定的列对结果集进行排序. ORDER BY 语句默认按照升序对记录进行排序. 如果您希望按照降序对记录进行排序,可以使用 DESC 关键字.

  10. 【BZOJ】1088: [SCOI2005]扫雷Mine（递推）

    http://www.lydsy.com/JudgeOnline/problem.php?id=1088 脑残去想递推去了... 对于每一个第二列的格子,考虑多种情况,然后转移.....QAQ 空间可 ...