WPF+WCF一步一步打造音频聊天室（二）：文字聊天和白板共享

WPF+WCF一步一步打造音频聊天室（二）：文字聊天和白板共享2012-05-20 博客园朱祁林这篇文章将讲述实现WPF的UI和WCF中的双工通信。实现文字部分的聊天功能和实现共享白板的功能。

画WPF的界面其实是一件麻烦的事情。虽然WPF和WindowsForm一样，能将控件拖到哪，它就在哪。我们在开发asp.net项目的时候用从原始的table布局，到现在流行的div+css布局。这些都需要设计人员的仔细设计。这个程序的布局我采用Grid和StackPanel两种方式。 Gird 类似html的表格布局，StackPanel就就像它的字面意思“堆栈面板”。

WPF的UI实现

首先新建一个wpf的应用程序，改名为ZqlChart。添加一个UserControl，用来实现登陆窗体，这个是用了StackPanel进行布局。XAML代码如下：

<UserControl x:Class="ZqlChart.LoginControl"
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     Height="210" Width="350" Loaded="UserControl_Loaded">
     <StackPanel>
         <Border Height="220" 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="24" Margin="80,0,20,0" 
                                  Checked="chatTypeServer_Checked"  VerticalContentAlignment="Center">服务端</RadioButton>
                     <RadioButton Name="chatTypeClient" FontSize="24" Checked="chatTypeClient_Checked"  VerticalContentAlignment="Center">客户端</RadioButton>
                 </StackPanel>
                 <StackPanel Name="serverPanel" Orientation="Horizontal" Margin="0,10,0,0">
                     <Label Name="lblServer" FontSize="20" Width="120" HorizontalContentAlignment="Right"  VerticalContentAlignment="Center">服务端:</Label>
                     <TextBox Height="30" Name="txtServer" Width="160" FontSize="20" VerticalContentAlignment="Center" />
                 </StackPanel>
                 <StackPanel Name="usernamePanel" Orientation="Horizontal" Margin="0,10,0,10">
                     <Label Name="lblUserName" FontSize="20" Width="120" HorizontalContentAlignment="Right">用户 名:</Label>
                     <TextBox Height="30" Name="txtUserName" Width="160" FontSize="20" VerticalContentAlignment="Center" />
                 </StackPanel>
                 <StackPanel Name="buttonPanel" Orientation="Horizontal" HorizontalAlignment="Center"  VerticalAlignment="Center">
                     <Button Name="btnLogin" Width="120" FontSize="20" Margin="10,10,10,10" Click="btnLogin_Click">连接 </Button>
                     <Button Name="btnCancel" Width="120" FontSize="20" Margin="10,10,10,10" Click="btnCancel_Click">取消 </Button>
                 </StackPanel>
             </StackPanel>
         </Border>
     </StackPanel>
</UserControl>

界面效果如下：