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. MySQL是如何做到安全登陆

    首先Mysql的密码权限存储在mysql.user表中.我们不关注鉴权的部分,我们只关心身份认证,识别身份,后面的权限控制是很简单的事情.在mysql.user表中有个authentication_s ...

  2. print()函数的end 参数

    print()函数含end参数时:结束的时候已什么结尾,后面的参数可以是任何形式 [print() 默认以'\n'  结尾] 输出结果:  print()函数不含end参数时: 输出结果:

  3. python内置函数之print()

    定义:将值打印到一个流对象,或者默认打印到sys.stdout. 语法: print(value, ..., sep=' ', end='\n', file=sys.stdout, flush=Fal ...

  4. hdoj 4526 威威猫系列故事——拼车记

    威威猫系列故事——拼车记 Time Limit: 500/200 MS (Java/Others)    Memory Limit: 65535/32768 K (Java/Others)Total ...

  5. android布局自适应小示例（用户反馈界面）

    要求: 1.整个界面刚好填满屏幕,不需要滚动 2.输入反馈内容的EditText控件高度能够自适应 3.提交按钮位于屏幕最下方 核心布局文件如下: <?xml version="1.0 ...

  6. TortoiseGit状态图标不能显示

    一开始网上搜到的办法基本都一样,都试过了,没有效果: 办法一: 注册表中找到 HKEY_LOCAL_MACHINE\Software\Microsoft\Windows\CurrentVersion\ ...

  7. [C++]VAssistX文件头添加注释功能设置

    问题情况:每次手写注释太慢,而且不统一.问题原因:C++可以利用宏写注释,也可以使用VAssistX提供的方法.问题处理:1.安装VAssistX在VS2010上2.VS2010菜单->VAss ...

  8. java ssm框架入门（三）正式项目的web.xml配置

    一个正规的上线的web.xml的配置. <?xml version="1.0" encoding="UTF-8"?> <web-app id= ...

  9. 转：Andriod studio技巧合集

    1. 书签(Bookmarks) 描述:这是一个很有用的功能,让你可以在某处做个标记(书签),方便后面再跳转到此处. 调用:Menu → Navigate → Bookmarks 快捷键: 添加/移除 ...

  10. RP2837 IN1-IN2 对应关系 2路ＤＩ

    RP2837 IN1-IN2 对应关系: IN1   ARM-IO2   PA16 IN2   ARM-IO6   PA4 root@sama5d3-linux:~ echo 16  > /sy ...