2.5.1 基本用户界面功能的实现
要实现“添加联系人”用户控件，请先创建一个Controls文件夹，右键单击该文件夹，添加一个新的WPF用户控件，命名为AddNewFriendControl.xaml。
“添加联系人”用户控件的主体布局由一个Grid布局控件组成，内部包含一个DockPanel控件，在DockPanel内部使用了两个Canvas画布，一个用于设置标题栏，一个用于放置实际的添加联系人内容。XAML大纲视图如图2.14所示。
图2.14 添加联系人用户界面大纲视图
首先，看一下已经完成后的控件的声明部分，代码如下所示。
代码位置：见光盘中本章源代码的Controls\ AddNewFriendControl.xaml文件。
01 <UserControl
02 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
03 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
04 x:Class="MyFriends.AddNewFriendControl"
05 x:Name="Control"
06 Width="750" Height="500" Background="{x:Null}"
07 AllowDrop="True"
08 >
09 <!--中间关于界面布局的代码略-->
10 </UserControl>
● 第06行代码中，设置了控件的高度和宽度，并指定Background为空值。
● 第07行的AllowDrop属性是指是否允许控件作为拖放的目标，这将允许用户拖动图片或多媒体文件到控件上。
在整个用户控件的最外部，使用了一个Border控件来创建一个圆角矩形的外边框，使得用户控件更具吸引力。接下来创建一个Canvas，用于设置用户控件的标题栏。XAML定义代码如下所示。
代码位置：见光盘中本章源代码的Controls\ AddNewFriendControl.xaml文件。
01 <Grid x:Name="LayoutRoot" Opacity="1"> 02 <!--在整个控件的外部，用一个Border设置边框--> 03 <Border HorizontalAlignment="Stretch" 04 Margin="0,0,0,0" Width="Auto" 05 Background="#FF000000" 06 BorderBrush="#FFD0601D" 07 BorderThickness="5,5,5,5" 08 CornerRadius="5,5,5,5"> 09 <!--添加一个用于用户界面布局的DockPanel控件--> 10 <DockPanel Width="Auto" Height="Auto" LastChildFill="True"> 11 <!--添加一个用于定义标题栏的Canvas--> 12 <Canvas Margin="0,-1,0,0" x:Name="cansTop" 13 VerticalAlignment="Top" Width="Auto" 14 Height="100" DockPanel.Dock="Top"> 15 <!--使用属性元素语法定义渐变色--> 16 <Canvas.Background> 17 <LinearGradientBrush EndPoint="0.628,0.051" 18 StartPoint="0.628,0.788"> 19 <GradientStop Color="#FFD0601D" Offset="0"/> 20 <GradientStop Color="#FFFFB917" Offset="1"/> 21 </LinearGradientBrush> 22 </Canvas.Background> 23 <!--添加左侧用于修饰红色椭圆--> 24 <Ellipse Fill="#FFFFFFFF" Stroke="#FFFF6717" 25 StrokeThickness="5" Width="90" 26 Height="90" Panel.ZIndex="1" 27 Canvas.Left="7" Canvas.Top="4"/> 28 <!--添加右侧用于修饰红色椭圆--> 29 <Ellipse Fill="#FFFEFEFE" Stroke="#FFFF6717" 30 StrokeThickness="5" Width="50" 31 Height="50" Panel.ZIndex="0" 32 Canvas.Left="685" Opacity="0.5" 33 Canvas.Top="23"/> 34 <!--添加左侧的图标--> 35 <Image Width="73.196" Height="66.02" 36 Panel.ZIndex="1" Source="..\Images\myFriends.png" 37 Canvas.Left="14" Canvas.Top="13"/> 38 <!--添加右侧的图标--> 39 <Image Width="37.196" Height="33.549" 40 Panel.ZIndex="1" Source="..\Images\myFriends.png" 41 Opacity="0.4" Canvas.Left="690" Canvas.Top="30"/> 42 <!--添加中间的“添加联系人”图像--> 43 <Image Width="230.222" Height="37" 44 Canvas.Left="104.778" Canvas.Top="31" 45 Source="..\Images\AddFriendWords.png"/> 46 </Canvas>
● 第03～08行代码，在用户控件的最外层使用了一个Border控件来定义圆角外观。
● 第10行代码定义了用于整体用户界面布局的DockPanel控件。
● 从第12行代码开始，将开始定义控件标题栏的外观，首先在第19～22行代码定义了画布的背景。
● 第24～34行定义了两个用于修饰矩形。
● 第34～45行代码添加了三幅图片，用于显示图标和控件标题信息。
创建了标题栏，接下来创建用户输入的窗体，从文档大纲视图中可以看到，用户输入栏包括了用于输入名字和Email的TextBox和Label控件，用于允许用户添加图片的Image控件，用于保存和选择新图像的Button控件，以及一个用于显示高级内容的Expander控件。
输入用户名及电子邮件的是两个TextBox控件，分别使用两个Label控件向用户标识其要输入的内容。位于其下面的是一个Expander控件，它提供了联系人多媒体信息的输入，部分XAML代码如下所示。
代码位置：见光盘中本章源代码的Controls\ AddNewFriendControl.xaml文件。
01 <!--定义用户高级选项折叠区域-->
02 <Expander Header="高级选项" x:Name="expAdvancedOptions"
03 Foreground="#FFFFFFFF"
04 Style="{DynamicResource ExpanderOrangeStyle}"
05 Canvas.Left="63" Canvas.Top="186" Width="522"
06 Height="197" FontWeight="Bold">
07 <!--使用StackPane进行布局-->
08 <StackPanel Orientation="Vertical" Margin="0,20,0,0">
09 <StackPanel Orientation="Horizontal" HorizontalAlignment="Left">
10 <!--添加一个圆角的Border控件-->
11 <Border Width="60" Height="60" Background="#FFFFFFFF"
12 BorderBrush="{x:Null}" CornerRadius="5,5,5,5"
13 HorizontalAlignment="Left">
14 <!--使用Grid控件来接受拖放操作-->
15 <Grid x:Name="videoGrid" Drop="videoGrid_Drop" >
16 <TextBlock HorizontalAlignment="Center"
17 VerticalAlignment="Center"
18 Text="向这里拖一个视频文件" Width="61"
19 TextAlignment="Center"
20 TextWrapping="WrapWithOverflow"
21 FontFamily="Arial" FontSize="11"
22 FontWeight="Normal" Foreground="#FF000000"/>
23 <!--使用MediaElement来播放多媒体文件-->
24 <MediaElement x:Name="videoSrc"
25 LoadedBehavior="Manual"
26 Stretch="Fill" Margin="5,5,5,5"/>
27 </Grid>
28 </Border>
29 <!--播放视频按钮-->
30 <Button x:Name="btnVideoPlay" ToolTip="播放视频"
31 Template="{DynamicResource GlassButton}"
32 Width="20" Height="20" Content="4"
33 Canvas.Left="683" Canvas.Top="166"
34 Foreground="#FF54FB0C" FontSize="15"
35 Margin="20,0,0,0" FontFamily="Webdings"
36 Click="btnVideoPlay_Click"/>
37 <!--停止播放视频按钮-->
38 <Button x:Name="btnVideoStop" ToolTip="停止播放"
39 Template="{DynamicResource GlassButton}"
40 Width="20" Height="20" Content="<"
41 Canvas.Left="683" Canvas.Top="166"
42 Foreground="#FFFFFFFF" FontSize="12"
43 Margin="20,0,0,0" FontFamily="Webdings"
44 Click="btnVideoStop_Click"/>
45 <!--放置文本-->
46 <TextBlock Margin="10,0,0,0" Text="你朋友喜欢的视频文件"
47 TextAlignment="Justify"
48 TextWrapping="WrapWithOverflow"
49 FontFamily="Arial" FontSize="11"
50 FontWeight="Normal"
51 Foreground="#FFFFFFFF"
52 VerticalAlignment="Center"/>
53 </StackPanel>
● 第02～06行代码定义了一个Expander控件，注意它指定了Style属性为定义在资源中的名为ExpanderOrangeStyle动态样式，该文件在Application中使用合并字典的功能，合并到了应用程序级的资源中，因此可以在应用程序的任何位置调用该资源。
● 从第07行代码开始，进行界面的布局，在第15行使用了一个Grid控件，该控件将接受用户的拖放，意味着用户可以从资源管理器中拖动一个视频文件到该Grid上面。
● 第24行代码定义了一个MediaElement对象用来播放多媒体文件。
● 第29～44行代码定义了两个按钮，分别用于播放视频和停止播放。这两个按钮的Template属性，指定了定义在Resource文件夹下的Template.xaml文件中的模板。
● 第46～52行代码定义了一行文本显示标题信息。
最后是选择联系人图片按钮的布局，与选择多媒体文件的代码比较相似，并且也允许用户从资源管理器中拖动图像，代码如下所示：
代码位置：见光盘中本章源代码的Controls\ AddNewFriendControl.xaml文件。
01 <!--选择图片区域-->
02 <Border Width="100" Height="100"
03 Background="#FFFFFFFF"
04 BorderBrush="{x:Null}"
05 CornerRadius="5,5,5,5"
06 Canvas.Left="603" Canvas.Top="60">
07 <!--定义一个允许接受拖入操作的Grid-->
08 <Grid x:Name="imgGrid" Drop="imgGrid_Drop" >
09 <!--用于显示文字信息的TextBlock控件-->
10 <TextBlock Margin="5,5,5,5"
11 HorizontalAlignment="Center"
12 VerticalAlignment="Center"
13 Text="拖一幅图像到这里" Width="80"
14 TextAlignment="Center"
15 TextWrapping="WrapWithOverflow"
16 FontFamily="Arial" FontSize="11"
17 FontWeight="Normal"/>
18 <!--用于显示图像的Image控件-->
19 <Image x:Name="photoSrc" Margin="5,5,5,5" Stretch="Fill" />
20 </Grid>
21 </Border>
22 <!--定义选择图像的按钮-->
23 <Button x:Name="btnChooseNewImage"
24 ToolTip="选择一幅图像"
25 Template="{DynamicResource GlassButton}"
26 Width="20" Height="20" Content="..."
27 Canvas.Left="683" Canvas.Top="166"
28 Foreground="#FFFFFBFB"
29 Click="btnChooseNewImage_Click"
30 FontSize="9"/>
31 <!--用于保存联系人信息的按钮-->
32 <Button x:Name="btnSave" ToolTip="保存新的联系人信息"
33 Template="{DynamicResource GlassButton}"
34 Width="101" Height="25" Content="保存联系人"
35 Foreground="#FFFFFBFB" FontSize="11"
36 Canvas.Left="601" Canvas.Top="243"
37 Click="btnSave_Click"/>
● 第02～06行代码定义了一个圆角的Border。
● 第08行的Grid使得可以接受拖放的图像。
● 第10～17行代码定义一个文本标签显示可拖动图像的信息。
● 第19行代码显示一个Image控件用来显示图像。
● 第23～30行代码定义了选择图像的按钮允许用户选择图像。
● 第32～37行代码定义了保存联系人的按钮。可以看到，基本上所有的按钮都使用了GlassButton模板。