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. 源码分析HotSpot GC过程(二)：DefNewGeneration的GC过程

    由于虚拟机的分代实现,虚拟机不会考虑各个内存代如何实现垃圾回收,具体的工作(对象内存的分配也是一样)由各内存代根据垃圾回收策略自行实现. DefNewGeneration的使用复制算法进行回收.复制算 ...

  2. 【C/C++语言】int 在计算机内部的存储

    int在32位计算机中占4个字节,主要是想弄清楚这4个字节的在内存中存放的顺序. #include <iostream> using namespace std; typedef stru ...

  3. 移动端rem的用法

    标签: 1.rem(font size of the root element)是指相对于根元素的字体大小的单位,em(font size of the element)是指相对于父元素的字体大小的单 ...

  4. Pyhton 列表转字典

    1.一个list 2.两个list

  5. Makefile 11——支持头文件目录指定

    现在,是时候在对应目录放入对应文件了: /× foo.h */ #ifndef __FOO_H #define __FOO_H void foo(void) #endif/*__FOO_H*/ /* ...

  6. DelphiXE8FMX工程实现无边框托动(发送消息)

    1.引用单元 uses Winapi.Windows, FMX.Platform.Win, Winapi.Messages; 2.发送消息 //发送系统消息SendMessage(FmxHandleT ...

  7. mysql学习笔记2--mysql的基本使用

    4. 运行和关闭MySQL服务器 首先检查MySQL服务器正在运行与否.在资源管理器查看有没有mysqld的进程,如果MySQL正在运行,那么会看到列出来的 mysqld 进程.如果服务器没有运行,那 ...

  8. 修复安卓的bug

    一直不明白listview中的复用,为什么会出现,项目多了.点击同一行的按钮,操作的不是指定行的对象. 仔细研读了代码,突然明白了.因为复用了,导致了position改变了. 伪码 if(conver ...

  9. php5共存php7

    PHP7与PHP5共存于CentOS7 原文参考 原理 思路很简单:PHP5是通过yum安装的在/usr/,套接字在/var/run/php-fpm.socket,PHP7自己编译装在/usr/loc ...

  10. 2015 Multi-University Training Contest 3 1006 Beautiful Set

    Beautiful Set Problem's Link: http://acm.hdu.edu.cn/showproblem.php?pid=5321 Mean: 给出一个集合,有两种计算集合的值的 ...