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. glibc中malloc()的空间overhead

    在linux下调用malloc()分配内存的时候,实际占用的内存与请求的内存尺寸的关系是什么呢,这个需要研究一下glibc中malloc()的实现.现在常见linux发行版中带的glibc中采用的都是 ...

  2. DOM方法 getElementsByName()方法

    http://www.imooc.com/code/1583 getElementsByName()方法 返回带有指定名称的节点对象的集合. 语法: document.getElementsByNam ...

  3. 一款基于css3和jquery实现的动画弹出层

    今天给大家分享一款基于css3和jquery实现的动画弹出层.这款弹出层初页面面一个显示弹出层按钮.单击该按钮时,弹出层以非常炫的动画形式出现.弹出层有关闭按钮,单击半闭按钮,弹出层关闭.效果图如下: ...

  4. git init 与 git init --bare 区别

    git init 与 git init --bare 区别 发现问题 最早是在公司的wiki上发现了这个命令,google后发现值得记录下来 实践中发现的区别 网上找了很多资料,但说的很乱,干脆在自己 ...

  5. 【转】【iOS测试系列】常用测试小插件的使用

    背景介绍 由于iOS系统的限制,在非越狱的自动化测试中无法实现一些常用的功能,比如不同应用之间来回切换.模拟全局的点击事件等等.但是在越狱的环境下,这些限制就不存在了,我们可以利用各种小插件来实现我们 ...

  6. 第二百七十三节，Tornado框架-文件上传

    Tornado框架-文件上传 第一.普通表单上传文件 self.request.files["fafafa"] 获取上传文件信息,参数["上传文件框的name名称&quo ...

  7. Web前端开发中的MCRV模式(转)

    作者: izujian  来源: baiduux 摘要:针对前端开发中基于ajax的复杂页面开发所面临的代码规模大,难以组织和维护,代码复用性.扩展性和适应性差等问题,本文尝试以MVC思想为 基础,结 ...

  8. 【BZOJ】1620: [Usaco2008 Nov]Time Management 时间管理（贪心）

    http://www.lydsy.com/JudgeOnline/problem.php?id=1620 一开始想不通啊.. 其实很简单... 每个时间都有个完成时间,那么我们就从最大的 完成时间的开 ...

  9. FCN 分割网络详解

    博客来源于:https://www.cnblogs.com/gujianhan/p/6030639.html: https://blog.csdn.net/sinat_24143931/article ...

  10. 上传Docker镜像到阿里云

      1.配置阿里云的镜像加速器:https://cr.console.aliyun.com/#/accelerator 2.命令行登录到阿里云的doker仓库,--username为阿里云的用户名 d ...