WPF+WCF Step by step Create audio Chat room (ii): text chat and whiteboard sharing

This article will describe the implementation of the WPF UI and duplex communication in WCF. Realize the chat function of the text part and realize the function of sharing whiteboard.

Painting the WPF interface is actually a hassle. Although WPF, like WindowsForm, can drag a control anywhere, it is there. We are developing asp.net projects from the original table layout, to the current popular div+css layout. These require careful design by designers. The layout of this program I use grid and StackPanel two ways. Gird HTML-like table layout, StackPanel is just like its literal "stack panel".

UI implementations for WPF

First, create a new WPF application and rename it to Zqlchart. Add a UserControl to implement the login form, which is a stackpanel layout. The XAML code is as follows:

<usercontrol x:class= "Zqlchart.logincontrol"
Xmlns= "Http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x= "Http://schemas.microsoft.com/winfx/2006/xaml"
"210" width= "height=" loaded= "usercontrol_loaded" >
<StackPanel>
<border height= "borderbrush=" "#FFFFFFFF" borderthickness= "2,2,2,0" cornerradius= "5,5,0,0" >
<Border.Background>
<lineargradientbrush endpoint= "0.713,0.698" startpoint= "0.713,-0.139" >
<gradientstop color= "#FFFFFFFF" offset= "0.933"/>
<gradientstop color= "LightBlue" offset= "0.337"/>
</LinearGradientBrush>
</Border.Background>
<stackpanel name= "Infopanel" orientation= "Vertical" margin= "10,10,10,10" >
<stackpanel name= "Typepanel" orientation= "Horizontal" >
<radiobutton name= "Chattypeserver" fontsize= "margin=" "80,0,20,0"
Checked= "chattypeserver_checked" verticalcontentalignment= "Center" > Server </RadioButton>
<radiobutton name= "chattypeclient" fontsize= "checked=" chattypeclient_checked "verticalcontentalignment=" Center "> Client </RadioButton>
</StackPanel>
<stackpanel name= "Serverpanel" orientation= "horizontal" margin= "0,10,0,0" >
<label name= "Lblserver" fontsize= "width=" horizontalcontentalignment= "right" verticalcontentalignment= " Center "> Service end:</label>
<textbox height= "name=" Txtserver width= "160" fontsize= "Center" verticalcontentalignment=
</StackPanel>
<stackpanel name= "Usernamepanel" orientation= "horizontal" margin= "0,10,0,10" >
<label name= "Lblusername" fontsize= "width=" horizontalcontentalignment= "right" > Username:</label>
<textbox height= "name=" txtUserName width= "160" fontsize= "Center" verticalcontentalignment=
</StackPanel>
<stackpanel name= "Buttonpanel" orientation= "horizontal" horizontalalignment= "center" verticalalignment= "center" >
<button name= "Btnlogin" width= "fontsize=" margin= "10,10,10,10" click= "Btnlogin_click" > Connection </Button >
<button name= "Btncancel" width= "fontsize=" margin= "10,10,10,10" click= "Btncancel_click" > Cancel </Button >
</StackPanel>
</StackPanel>
</Border>
</StackPanel>
</UserControl>

The interface effect is as follows: