代刷开通建设网站,网站建设与管理心得,企业管理软件销售工程师,入门网站建设本文经原作者授权以原创方式二次分享#xff0c;欢迎转载、分享。原文作者#xff1a;眾尋原文链接#xff1a;https://www.cnblogs.com/ZXdeveloper/p/6058206.html公司的同事离职了#xff0c;接下来的日子可能会忙碌#xff0c;能完善DEMO的时间也会少了#xff0c;因… 本文经原作者授权以原创方式二次分享欢迎转载、分享。原文作者眾尋原文链接https://www.cnblogs.com/ZXdeveloper/p/6058206.html公司的同事离职了接下来的日子可能会忙碌能完善DEMO的时间也会少了因此把做的简易DEMO整体先记录一下等后续不断的完善。参考两位大神的日志WEB版微信协议部分功能分析[1]、【完全开源】微信客户端.NET版[2]尤其是周见智[3]大神的DEMO因为好多和微信的服务端交互都借鉴了大神的源码帮助巨大可以说我相当于做了一个翻版只是用WPF开发的而已外观上不同但是实际交互上是差不多的。微信分为两个部分一个是登录一个是主体基于此WPF也主要是这两个窗体来实现。一、登录模块1、登录部分分为二维码和获取用户头像两个页面因为是给予WEB的所以没有客户端的登录按钮只能通过扫码来登录在程序启动以后先通过请求获取到二维码然后在启动一个新的线程不断的循环检索登录状态。private void LoopLoginCheck()
{object login_result null;//循环判断手机扫描二维码结果while (true){login_result ls.LoginCheck();//已扫描 未登录if (login_result is ImageSource){HeadImageSource login_result as ImageSource;//广播通知到LoginUC页面切换Messenger.Default.Sendobject(null, ShowLoginInfoUC);}//已完成登录if (login_result is string){//访问登录跳转URLls.GetSidUid(login_result as string);//广播隐藏登录页面,打开主页面Messenger.Default.Sendobject(null, HideLoginUC);thread.Abort();break;}超时if (login_result is int){//QRCodeImageSource ls.GetQRCode();//返回二维码页面Messenger.Default.Sendobject(null, ShowQRCodeUC);}}
}因为是MVVM所以需要用广播来进行操作页面的切换即填充到登录窗体中间的控件是二维码还是头像。2、大家可以看到我上面的截图部分包含了一部分的背景这个是用Snagit推荐这个截图工具很好用截图时自动截出的因为窗体本身的大小就是那么大多余出来的部分是透明的用来做二维码滑动出现的效果部分。当处于二维码状态时划过则出现动画头像状态下则没有动画是设置了Image的Visibility属性来控制的滑动效果可以看我的另一篇博客微信 二维码鼠标滑动 图像显隐效果[4]。3、当扫码成功并且在手机端点击登录以后则跳转到主页面此处没有加异步等待处理所以用户量大的朋友请耐心等待后期会加上。登录成功以后就会出现主窗体和系统托盘主窗体包含最近联系人和通讯录系统托盘网上很多解决方案可以自行查找。登录成功现在发现了一个问题就是我有两个微信号其中一登录以后是有数据的另一个则没有数据。跟踪代码发现返回的Json是空的也就是说没有返回值试验了下周大神的代码发现也是空的不清楚什么情况我同事的有的也是空的这个一直没有深究等把功能基本都完善以后再看看问题所在。二、主窗体模块1、主窗体的布局部分很简单采用了Grid进行分隔三列上面的控件如图所示大部分到没什么可能大家比较疑惑的是我的聊天窗体为什么是ListBox这个东西的话我认为自己有自己的开发习惯很多控件都可以实现panel就可以。RadioButton的样式是用path画的可以看我另一篇博客微信聊天和通讯录按钮样式[5]2、聊天列表里未读的消息上会有带数字的小红点这个是用Button写的Item的整体组成是Image头像、Button未读数、TextBlock昵称、时间和聊天内容Style x:KeyListBoxItemChatStyle TargetType{x:Type ListBoxItem}Setter PropertyTemplateSetter.ValueControlTemplate TargetTypeListBoxItemBorderStackPanel x:Namesp OrientationHorizontal Height{Binding Converter{StaticResource objectToHeight}} Background{Binding Converter{StaticResource objectToColor}}GridImage Source{Binding Icon} Width40 Height40 Margin10/Button ForegroundWhite Visibility{Binding UnReadCount,Converter{StaticResource countToVisibility}} Content{Binding UnReadCount} HorizontalAlignmentRight VerticalAlignmentTop Margin0,5 Style{StaticResource CirButtonStyle}//GridGrid Width176Grid.RowDefinitionsRowDefinition/RowDefinition//Grid.RowDefinitionsTextBlock Grid.Row0 Text{Binding ShowName} FontSize15 HorizontalAlignmentLeft Margin5,10,0,0/TextBlock Grid.Row0 Text{Binding LastTime} FontSize15 HorizontalAlignmentRight Margin0,10,5,0/TextBlock Grid.Row1 Text{Binding LastMsg} FontSize12 HorizontalAlignmentLeft Margin5,0,0,0//Grid/StackPanel/BorderControlTemplate.TriggersTrigger PropertyIsMouseOver ValuetrueSetter PropertyBackground Value#FFE2E4E6 TargetNamesp//TriggerTrigger PropertyIsSelected ValuetrueSetter PropertyBackground Value#FFCACDD3 TargetNamesp//Trigger/ControlTemplate.Triggers/ControlTemplate/Setter.Value/Setter
/Style3、聊天内容部分用的是ScrollingListBox继承自ListBox但是重写了里面的OnItemsChanged属性保证可以时刻滚动到最后一行public class ScrollingListBox : ListBox
{protected override void OnItemsChanged(System.Collections.Specialized.NotifyCollectionChangedEventArgs e){if (e.NewItems!null){int newItemCount e.NewItems.Count;if (newItemCount 0)this.ScrollIntoView(e.NewItems[newItemCount - 1]);base.OnItemsChanged(e);} }
}样式部分是重写控件模板用的是Image头像path三角部分textbox内容部分Style x:KeyChatListBoxStyle TargetType{x:Type ListBox}Setter PropertyBackground Value{DynamicResource {x:Static SystemColors.WindowBrushKey}}/Setter PropertyBorderBrush Value{StaticResource ListBorder}/Setter PropertyBorderThickness Value0/Setter PropertyForeground Value{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}/Setter PropertyScrollViewer.HorizontalScrollBarVisibility ValueHidden/Setter PropertyScrollViewer.VerticalScrollBarVisibility ValueHidden/Setter PropertyScrollViewer.CanContentScroll Valuetrue/Setter PropertyScrollViewer.PanningMode ValueBoth/Setter PropertyStylus.IsFlicksEnabled ValueFalse/Setter PropertyVerticalContentAlignment ValueCenter/Setter PropertyItemContainerStyleSetter.ValueStyle TargetTypeListBoxItemSetter PropertyFocusable ValueFalse/Setter PropertyTemplateSetter.ValueControlTemplateStackPanel OrientationHorizontal Grid.Column1 HorizontalAlignmentStretch VerticalAlignmentTop FlowDirection{Binding FlowDir} Margin15,5Image Grid.Column1 Source{Binding Image} Height35 Width35 VerticalAlignmentTop/Path Grid.Column2 StrokeThickness1 Stroke{Binding TbColor} DataM12,13 L5,18 L12,23Z Fill{Binding TbColor} Margin0 SnapsToDevicePixelsTrue/TextBox Grid.Column3 MaxWidth355 TextWrappingWrap FontSize15 BorderBrush{Binding TbColor} Background{Binding TbColor} IsReadOnlyTrue BorderThickness0 Style{StaticResource ChatTextBoxStyle} FlowDirectionLeftToRight Text{Binding Message}//StackPanel/ControlTemplate/Setter.Value/Setter/Style/Setter.Value/Setter
/Style需要注意的是此处必须要重写控件模板而不能重写数据模板虽然很多情况下控件模板和数据模板可以得到的效果相同但是此处如果写数据模板的话则自己发的信息不会在右侧就算设置FlowDirection也没有用大家可以自行尝试。4、如果发送内容是空的情况下则会有一个ToolTip出现此处的TooLTipye也是重写了样式的Button好定位毕竟就算是最大化位置也是不变的。通讯录部分和聊天列表差不多不过由于需要进行分组也就是A、B……这种组合所以用的Object类型在点选过程中通过is来进行判别是不是WeChatUser如果是则进行转换来进一步处理。大家可以看到上面那个好友是 同程旅游顾问span …… 其实它是一个emoji只是现在我还没有做到那一部分如果做到的话则进行转换如果谁有好的emoji处理方式希望告知谢谢了。当点选列表以后并且转换成功的情况下则显示出用户的信息通过内容是否未空来判别是否要显示Grid Grid.Row1 Grid.RowSpan2 HorizontalAlignmentCenter VerticalAlignmentCenter Visibility{Binding ElementNamerb_friend,PathIsChecked,Converter{StaticResource boolToVisibility}} Margin0,50,0,0Grid.RowDefinitionsRowDefinition HeightAuto/RowDefinition HeightAuto/RowDefinition HeightAuto/RowDefinition HeightAuto/RowDefinition HeightAuto/RowDefinition HeightAuto/RowDefinition HeightAuto//Grid.RowDefinitionsImage Source{Binding FriendInfo.Icon} Grid.Row0 Height124 Width124 HorizontalAlignmentCenter/StackPanel OrientationHorizontal Grid.Row1 HorizontalAlignmentCenterTextBlock Text{Binding FriendInfo.NickName} FontSize30 ForegroundBlack FontWeightBold/Image Visibility{Binding FriendInfo.Sex,Converter{StaticResource parameterToVisibility},ConverterParameter2} Source/Image/female.png/Image Visibility{Binding FriendInfo.Sex,Converter{StaticResource parameterToVisibility},ConverterParameter1} Source/Image/male.png//StackPanelTextBlock Text{Binding FriendInfo.Signature} Foreground#FF919191 Grid.Row2 HorizontalAlignmentCenter/StackPanel OrientationHorizontal Visibility{Binding FriendInfo.RemarkName,Converter{StaticResource epmtyToVisibility}} Margin10 Grid.Row3 HorizontalAlignmentCenterTextBlock Text备 注 Margin0,0,10,0 FontSize15/TextBlock Text{Binding FriendInfo.RemarkName} FontSize15//StackPanelStackPanel OrientationHorizontal Visibility{Binding FriendInfo.Province,Converter{StaticResource epmtyToVisibility}} Margin10 Grid.Row4 HorizontalAlignmentCenterTextBlock Text地区 Margin0,0,10,0 FontSize15/TextBlock Text{Binding FriendInfo.Province} Margin0,0,2,0 FontSize15/TextBlock Text{Binding FriendInfo.City} FontSize15//StackPanelButton Content发消息 Width166 Height37 Grid.Row5 Command{Binding FriendSendComamnd} Margin0,50,0,0 Style{StaticResource FriSendButtonStyle}/Grid Grid.Row0 Grid.RowSpan7 BackgroundWhiteSmoke Visibility{Binding FriendInfo,Converter{StaticResource nullToVisibility}}/
/Grid点击发消息按钮则跳转回聊天页面然后将当前的好友加入到聊天的第一项。三、总结做WPF微信DEMO用到了转换器转换颜色转换显隐重写了控件的样式例如Button、RadioButton、ListBox然后MVVM模式下Bind的用法感觉这个DEOM对于初学者来说应该会有很大的帮助。不过这个DEMO的BUG和不完善的地方还有很多例如系统托盘还没有做闪烁现在只能发送文字最大化的问题。系统托盘闪烁可以用Timer和Opacity来进行控制比如来未读消息了则在进行时间间隔的控制显隐。后期会把TextBox换成RichTextBox这样可以发送图片和emoji。最大化问题是我一直还没有想到好的解决办法最大化的情况下会占据整个屏幕而不把状态栏空出来网上的办法都是重新设置Width和Height但是这样的话就要记录原来的大小和位置一直没有找到可以重写WindowState.Maximized的方法好像是不能重写所以比较纠结希望哪位大神看完我的代码以后能够给提供一下解决思路谢谢了。参考资料[1]WEB版微信协议部分功能分析: http://blog.csdn.net/wonxxx/article/details/51787041[2]【完全开源】微信客户端.NET版: http://www.cnblogs.com/xiaozhi_5638/p/4923811.html[3]周见智: http://home.cnblogs.com/u/xiaozhi_5638/[4]微信 二维码鼠标滑动 图像显隐效果: http://www.cnblogs.com/ZXdeveloper/p/6054278.html[5]微信聊天和通讯录按钮样式: http://www.cnblogs.com/ZXdeveloper/p/5997372.html
