請來圍觀：WPF開發的微信客戶端！！！

本文經原作者授權以原創方式二次分享，歡迎轉載、分享。
原文作者：眾尋
原文鏈接：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.Send<object>(null,?"ShowLoginInfoUC");}//已完成登錄if?(login_result?is?string){//訪問登錄跳轉URLls.GetSidUid(login_result?as?string);//廣播，隱藏登錄頁面,打開主頁面Messenger.Default.Send<object>(null,?"HideLoginUC");thread.Abort();break;}超時if?(login_result?is?int){//QRCodeImageSource?=?ls.GetQRCode();//返回二維碼頁面Messenger.Default.Send<object>(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:Key="ListBoxItemChatStyle"?TargetType="{x:Type?ListBoxItem}"><Setter?Property="Template"><Setter.Value><ControlTemplate?TargetType="ListBoxItem"><Border><StackPanel?x:Name="sp"?Orientation="Horizontal"?Height="{Binding?Converter={StaticResource?objectToHeight}}"?Background="{Binding?Converter={StaticResource?objectToColor}}"><Grid><Image?Source="{Binding?Icon}"?Width="40"?Height="40"?Margin="10"/><Button?Foreground="White"?Visibility="{Binding?UnReadCount,Converter={StaticResource?countToVisibility}}"?Content="{Binding?UnReadCount}"?HorizontalAlignment="Right"?VerticalAlignment="Top"?Margin="0,5"?Style="{StaticResource?CirButtonStyle}"/></Grid><Grid?Width="176"><Grid.RowDefinitions><RowDefinition/><RowDefinition/></Grid.RowDefinitions><TextBlock?Grid.Row="0"?Text="{Binding?ShowName}"?FontSize="15"?HorizontalAlignment="Left"?Margin="5,10,0,0"/><TextBlock?Grid.Row="0"?Text="{Binding?LastTime}"?FontSize="15"?HorizontalAlignment="Right"?Margin="0,10,5,0"/><TextBlock?Grid.Row="1"?Text="{Binding?LastMsg}"?FontSize="12"?HorizontalAlignment="Left"?Margin="5,0,0,0"/></Grid></StackPanel></Border><ControlTemplate.Triggers><Trigger?Property="IsMouseOver"?Value="true"><Setter?Property="Background"?Value="#FFE2E4E6"?TargetName="sp"/></Trigger><Trigger?Property="IsSelected"?Value="true"><Setter?Property="Background"?Value="#FFCACDD3"?TargetName="sp"/></Trigger></ControlTemplate.Triggers></ControlTemplate></Setter.Value></Setter>
</Style>

3、聊天內容部分用的是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:Key="ChatListBoxStyle"?TargetType="{x:Type?ListBox}"><Setter?Property="Background"?Value="{DynamicResource?{x:Static?SystemColors.WindowBrushKey}}"/><Setter?Property="BorderBrush"?Value="{StaticResource?ListBorder}"/><Setter?Property="BorderThickness"?Value="0"/><Setter?Property="Foreground"?Value="{DynamicResource?{x:Static?SystemColors.ControlTextBrushKey}}"/><Setter?Property="ScrollViewer.HorizontalScrollBarVisibility"?Value="Hidden"/><Setter?Property="ScrollViewer.VerticalScrollBarVisibility"?Value="Hidden"/><Setter?Property="ScrollViewer.CanContentScroll"?Value="true"/><Setter?Property="ScrollViewer.PanningMode"?Value="Both"/><Setter?Property="Stylus.IsFlicksEnabled"?Value="False"/><Setter?Property="VerticalContentAlignment"?Value="Center"/><Setter?Property="ItemContainerStyle"><Setter.Value><Style?TargetType="ListBoxItem"><Setter?Property="Focusable"?Value="False"/><Setter?Property="Template"><Setter.Value><ControlTemplate><StackPanel?Orientation="Horizontal"?Grid.Column="1"?HorizontalAlignment="Stretch"?VerticalAlignment="Top"?FlowDirection="{Binding?FlowDir}"?Margin="15,5"><Image?Grid.Column="1"?Source="{Binding?Image}"?Height="35"?Width="35"?VerticalAlignment="Top"/><Path?Grid.Column="2"?StrokeThickness="1"?Stroke="{Binding?TbColor}"?Data="M12,13?L5,18?L12,23Z"?Fill="{Binding?TbColor}"?Margin="0"?SnapsToDevicePixels="True"/><TextBox?Grid.Column="3"?MaxWidth="355"?TextWrapping="Wrap"?FontSize="15"?BorderBrush="{Binding?TbColor}"?Background="{Binding?TbColor}"?IsReadOnly="True"?BorderThickness="0"?Style="{StaticResource?ChatTextBoxStyle}"?FlowDirection="LeftToRight"?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.Row="1"?Grid.RowSpan="2"?HorizontalAlignment="Center"?VerticalAlignment="Center"?Visibility="{Binding?ElementName=rb_friend,Path=IsChecked,Converter={StaticResource?boolToVisibility}}"?Margin="0,50,0,0"><Grid.RowDefinitions><RowDefinition?Height="Auto"/><RowDefinition?Height="Auto"/><RowDefinition?Height="Auto"/><RowDefinition?Height="Auto"/><RowDefinition?Height="Auto"/><RowDefinition?Height="Auto"/><RowDefinition?Height="Auto"/></Grid.RowDefinitions><Image?Source="{Binding?FriendInfo.Icon}"?Grid.Row="0"?Height="124"?Width="124"?HorizontalAlignment="Center"/><StackPanel?Orientation="Horizontal"?Grid.Row="1"?HorizontalAlignment="Center"><TextBlock?Text="{Binding?FriendInfo.NickName}"?FontSize="30"?Foreground="Black"?FontWeight="Bold"/><Image?Visibility="{Binding?FriendInfo.Sex,Converter={StaticResource?parameterToVisibility},ConverterParameter=2}"?Source="/Image/female.png"/><Image?Visibility="{Binding?FriendInfo.Sex,Converter={StaticResource?parameterToVisibility},ConverterParameter=1}"?Source="/Image/male.png"/></StackPanel><TextBlock?Text="{Binding?FriendInfo.Signature}"?Foreground="#FF919191"?Grid.Row="2"?HorizontalAlignment="Center"/><StackPanel?Orientation="Horizontal"?Visibility="{Binding?FriendInfo.RemarkName,Converter={StaticResource?epmtyToVisibility}}"?Margin="10"?Grid.Row="3"?HorizontalAlignment="Center"><TextBlock?Text="備??注"?Margin="0,0,10,0"?FontSize="15"/><TextBlock?Text="{Binding?FriendInfo.RemarkName}"?FontSize="15"/></StackPanel><StackPanel?Orientation="Horizontal"?Visibility="{Binding?FriendInfo.Province,Converter={StaticResource?epmtyToVisibility}}"?Margin="10"?Grid.Row="4"?HorizontalAlignment="Center"><TextBlock?Text="地區"?Margin="0,0,10,0"?FontSize="15"/><TextBlock?Text="{Binding?FriendInfo.Province}"?Margin="0,0,2,0"?FontSize="15"/><TextBlock?Text="{Binding?FriendInfo.City}"?FontSize="15"/></StackPanel><Button?Content="發消息"?Width="166"?Height="37"?Grid.Row="5"?Command="{Binding?FriendSendComamnd}"?Margin="0,50,0,0"?Style="{StaticResource?FriSendButtonStyle}"/><Grid?Grid.Row="0"?Grid.RowSpan="7"?Background="WhiteSmoke"?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的方法，好像是不能重寫，所以比較糾結，希望哪位大神看完我的代碼以后，能夠給提供一下解決思路，謝謝了。