[wpf mvvm框架]WPF框架实现微信公众号多客服实例教程(多图)

时间:2020-01-06  来源:WPF  阅读:

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

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



一、登陆:

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


实现相关:

自定义登陆窗口,引入Microsoft.Windows.Shell。可参考 WPF Custom Chrome Library(www.codeproject.com/Articles/131515/WPF-Custom-Chrome-Library) 和  MSDN WindowChrome Class(https://msdn.microsoft.com/en-us/library/microsoft.windows.shell.windowchrome(v=vs.100).aspx) 有相关自定义窗口实现。

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

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


    
        
            
                
                    
                    
                    
                
                
                    
                        
                        
                    
                    
                        
                        
                    
                
            
        
    


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

二、聊天窗口,信息发送

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


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

文字:不用做任何处理。

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

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


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

三、客户列表

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


    
    
    
    
    
    
        
            
                
                    
                        
                        
                    
                    
                        
                        
                    
                    
                    
                        
                    
                
                
                    
                        
                    
                
            
        
    


    
    
    
    
    
    
    
        
            
                
                    
                        
                            
                            
                                
                            
                        
                    
                
                
                    
                        
                    
                    
                        
                        
                        
                        
                    
                    
                        
                            
                            
                        
                        
                    
                
            
        
    


四、快捷回复面板

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



五、转接客户

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


    
    
    
        
            
                
                    
                        
                        
                    
                    
                        
                            
                                
                                
                            
                        
                        
                            
                            
                                
                                
                                    
                                
                            
                        
                    
                    
                        
                            
                        
                    
                
            
        
    


转接客户列表,样式Xaml代码如下:


    
    
    
    
    
    
    
    
    
        
            
                
                    
                        
                            
                                
                                    
                                    
                                    
                                
                                状态
                                工号
                                昵称
                            
                        
                        
                            
                        
                    
                
                
                    
                        
                    
                
            
        
    


    
    
    
    
    
        
            
                
                    
                        
                            
                            
                            
                        
                        
                            
                                
                                    
                                    
                                
                            
                            
                        
                        
                            
                        
                        
                            
                        
                    
                
                
                    
                        
                        
                    
                    
                        
                            
                            
                        
                        
                    
                    
                        
                    
                
            
        
    




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

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

使用代码如下:


    
        
            
        
    


系统运行截图:



说明:

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

程序中所用图标来源于这两个资源库:http://modernuiicons.com/  https://materialdesignicons.com/

小结:

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

[wpf mvvm框架]WPF框架实现微信公众号多客服实例教程(多图)

http://m.bbyears.com/asp/84271.html

推荐访问:
相关阅读 猜你喜欢
本类排行 本类最新