用WPF实现微信公众号多客服功能

原文标题：用wpf实现微信公众号多客服功能 

简介：

　　这是利用WPF作为前端技术，实现桌面版微信多客服系统。项目采用Prism作为前端框架，采用MVVM模式极好的对UI和逻辑代码分离，使用MefBootstrapper集成的MEF IOC容器，解耦各模块对象。合理利用 IEventAggregator 实现事件和交互。文章在介绍对应功能时候会给出相关实现的参考，读者可以参考改进，引入到自己的项目中。

程序运行界面及功能预览：

 

一、登陆：

功能：支持记住用户和用户设置，可选择记住用户密码。

实现相关：

自定义登陆窗口，引入Microsoft.Windows.Shell。可参考 WPF Custom Chrome Library 和  MSDN WindowChrome Class 有相关自定义窗口实现。

最小化、最大化、关闭按钮功能实现可参考上面的例子。

登陆按钮，自定义Style，重写Button的Template，参考代码如下：

 <Style x:Key="LogginButton" TargetType="{x:Type Button}">
        
            
                
                    
                        
                        
                        
                    
                    
                        
                            
                            
                        
                        
                            
                            
                        
                    
                
            
        
    </Style>

登录后复制

View Code

记住密码，采用 XmlSerializer 把用户信息序列化到本地xml配置文件中，程序启动时加载该xml配置文件。用法 MSDN XmlSerializer 

 

二、聊天窗口，信息发送

功能：文字发送，表情发送，图片发送，屏幕截图，快捷回复

 

RichTextBox 相关实现：文字，表情，图片所有输入都是在富文本框 里实现，因此针对 TextChanged 事件对输入进行一系列处理。

文字：不用做任何处理。

表情：文本框里输入的是表情的转义符号，然后根据转义符号找到对应表情图片进行替换。InlineUIContainer

Gif 动态图：WPF中不支持Gif，所以要编写自定义用户控件作为用来显示gif表情。参考 周银辉 [WPF疑难]在WPF中显示动态GIF

截图功能：源码在网上找到的，是Winform的一个截图。做了小许修改引进到项目。

 参考：C# 实现完整功能的截图控件(4)-完整版 http://www.huida178.com/

 

三、客户列表

控件为 TabControl，重写了TabControl 的Style 和 TabItem的Style

    <Style x:Key="CustomerTabStyle" TargetType="{x:Type TabControl}">
        
        
        
        
        
        
            
                
                    
                        
                            
                            
                        
                        
                            
                            
                        
                        
                        
                            
                        
                    
                    
                        
                            
                        
                    
                
            
        
    </Style>

    <Style x:Key="ConnectedTabItemStyle" TargetType="{x:Type TabItem}">
        
        
        
        
        
        
        
            
                
                    
                        
                            
                                
                                
                                    
                                
                            
                        
                    
                    
                        
                            
                        
                        
                            
                            
                            
                            
                        
                        
                            
                                
                                
                            
                            
                        

                    
                
            
        
    </Style>

登录后复制

View Code

 

四、快捷回复面板

应用 TreeView 加 HierarchicalDataTemplate 实现树形列表。

 

五、转接客户

自定义转接客户窗口，样式Xaml代码如下：

<Style x:Key="NoResize_Window" TargetType="{x:Type Window}">
                        
                        
                        
                            
                                
                                    
                                        
                                            
                                            
                                        
                                        
                                            
                                                
                                                    
                                                    
                                                
                                            
                                            
                                                <!--Icon and Title-->
                                                
                                                    
                                                    
                                                        
                                                    
                                                
                                            
                                        

                                        
                                            
                                                
                                            
                                        
                                    
                                
                            
                        
                    </Style>

登录后复制

View Code

转接客户列表，样式Xaml代码如下：

    <Style x:Key="OnlineUserListBoxStyle" TargetType="{x:Type ListBox}">
        
        
        
        
        
        
        
        
        
            
                
                    
                        
                            
                                
                                    
                                        
                                        
                                        
                                    
                                    状态
                                    工号
                                    昵称
                                
                            
                            
                                
                            
                        
                    
                    
                        
                            
                        
                    
                
            
        
    </Style>
    <Style x:Key="OnlineUserListBoxItemStyle" TargetType="{x:Type ListBoxItem}">
        
        
        
        
        
            
                
                    
                        
                            
                                
                                
                                
                            

                            
                                
                                    
                                        
                                        
                                    
                                
                                
                            
                            
                                
                            
                            
                                
                            
                        
                    
                    
                        
                            
                            
                        
                        
                            
                                
                                
                            
                            
                        
                        
                            
                        
                    
                
            
        
    </Style>

登录后复制

View Code

 

关于以上控件的事件与命令，引进System.Windows.Interactivity.

在Xmal中导入命名控件 xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"

使用代码如下：

登录后复制

View Code

 

系统运行截图：

 

说明：

程序UI布局及展示为模仿微信多客服官方程序，所有样式源码为本人所写及参考网上部分资源。

程序中所用图标来源于这两个资源库：http://www.huida178.com/  http://www.huida178.com/

 

小结：

本文只作了简单的介绍，主要介绍UI上的一些实现和功能介绍。具体后台业务逻辑看以后能否补上，包括Prism使用，和微信公众号相关的知识。

 

博客地址：http://www.huida178.com/
博客版权：本文以学习、研究和分享为主，欢迎转载，但必须在文章页面明显位置标明原文连接并保留此处说明。
如果文中有不妥或者错误的地方还望您指出，以免让读者产生误解。
感谢您的阅读，喜欢就点个赞，【推荐】一下！