这个演示项目是一个头脑风暴的结果，本来是准备写文章参加VS2008比赛的。我们打算尝试Visual Studio最新版本引入的.NET 3.0（和3.5）中的一些特性。最初我们提出了一个网络聊天程序的概念，打算用WPF来实现界面，用WCF实现网络通讯。试验了一些WPF的新控件后，我们认为使用InkCanvas控件会比较好，并做了一个多用户网络画图演示程序。DrawMe就是最后的结果，在本文中，我们会讲解我们遇到的一些有意思的WPF和WCF特性。
在高层次上，DrawMe使用了C/S的结构。当用户运行DrawMe后，有两个选择——建立一个新服务器或者连接到一个已存在的服务器。当某个用户在画布上绘画时，墨水笔迹将会广播到每一个登录在服务器上的客户端，这样就可以建立实时协作绘画。虽然这不是一个新概念，但是本文可以说明使用WPF和WCF实现的话会十分简单。
使用演示程序
如果你仅想要试一下最终程序，你可以下载演示程序。大多数人可能会在一台计算机上试验，这样也许不需要配置防火墙。运行DrawMe.exe两个实例，并把第一个设为服务器。在第二个实例中，把类型设为客户端，然后输入localhost、服务器机器名或者IP地址即可。如果你想在局域网内的多台机器上试验，也许你需要在防火墙中设置允许DrawMe通过。如果你想在Internet上的多台机器试验，也许需要把路由器的8000端口映射到你的机器上。上面几种情况我们都已成功测试过，希望你的也正常。
使用WPF建立用户界面
DrawMe的用户界面包含两个主要窗体：
- 登录控件 - 建立或连接服务器的WPF用户控件
- 主程序窗体 - 所有墨水笔绘画的地方
下面几个小节分别介绍每个界面的功能和创建过程
登录控件
用户启动DrawMe后，他们会看到登录界面。用户界面的作用是让用户选择是加入一个已经存在的服务器，还是建立一个服务器并加入进去。下面的截图就是登录窗口的样子。
这是个比较基础的界面，它不用做很多事儿所以比较简单。这里需要指出一些WPF带来的一些很棒的特性。
<UserControl x:Class="DrawMe.LoginControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Height="300" Width="350" Loaded="UserControl_Loaded">
<StackPanel>
<Border Height="50" BorderBrush="#FFFFFFFF" Background="Black" BorderThickness ="2,2,2,0" CornerRadius="5,5,0,0">
<Label Content="Welcome to DrawMe" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="20" Foreground="White"/>
</Border>
<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">
<Label Name="lblChatType" FontSize="20" Width="120" HorizontalContentAlignment="Right" VerticalContentAlignment="Center">Type:</Label>
<RadioButton Name="chatTypeServer" FontSize="20" VerticalAlignment="Center" Margin="0,0,20,0"
Checked="chatTypeServer_Checked" VerticalContentAlignment="Center">Server</RadioButton>
<RadioButton Name="chatTypeClient" FontSize="20" VerticalAlignment="Center"
Checked="chatTypeClient_Checked" VerticalContentAlignment="Center">Client</RadioButton>
</StackPanel>
<StackPanel Name="serverPanel" Orientation="Horizontal" Margin="0,10,0,0">
<Label Name="lblServer" FontSize="20" Width="120" HorizontalContentAlignment="Right" VerticalContentAlignment="Center">Server:</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">User Name:</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">Connect</Button>
<Button Name="btnCancel" Width="120" FontSize="20" Margin="10,10,10,10" Click="btnCancel_Click">Cancel</Button>
</StackPanel>
</StackPanel>
</Border>
<Border Height="30" Background="#FF2E2E2E" BorderBrush="#FFFFFFFF" BorderThickness="2,0,2,2" CornerRadius="0,0,5,5">
<Label Content="DrawMe is using .NET 3.5 (WPF and WCF)" FontSize="9" Foreground="#FFFFFFFF"
HorizontalAlignment="Center" VerticalAlignment="Center" Background="#00FFFFFF"/>
</Border>
</StackPanel>
</UserControl>
- 很容易创建漂亮的圆角矩形界面，只用指定CornerRadius属性
- 很容易设置漂亮的渐变颜色，只需给元素的背景上添加一个LinearGradientBrush
下面的XAML代码说明了我们如何建立登录控件，我们觉得直接用XAML代码工作是试验和调试设计的最快方法，当然，VS2008里的界面设计器也很不错。
(Tim Callaghan, Alvin)
