2.4.2 主窗体用户界面设计
用户主界面是本系统中稍稍复杂的一部分，在用户主界面中本示例实现了导航按钮、3D变换等用户界面功能。尽管WPF在用户界面制作方面提供了前所未有的改进，但是开发人员仍然要学习一些相关的知识，积累较多的经验。双击打开MainInterfaceWindow.xaml文件，首先为用户界面进行布局设计。主窗口的用户界面由如图2.10所示的几个部分组成。
图2.10 主窗口文档结构图
整个界面由一个Grid组成，在Grid内部，放了一个DockPanel和一个子Grid。DockPanel控件设置主窗体标题头，另外一个Grid用于放置添加联系人和查看联系人的两个用户控件。下面首先分析一下DockPanel布局控件中的控件的组成，XAML代码如下所示。
代码位置：见光盘中本章源代码的MainInterfaceWindow.xaml文件。
01 <!--外层的DockPanel，进行整个标题头的布局-->
02 <DockPanelMargin="0,0,0,0"LastChildFill="True"Background="#FF414141">
03 <!--内存DockPanel，用于标题头和导航按钮的布局-->
04 <DockPanel VerticalAlignment="Top" Width="Auto"
05 Height="135" DockPanel.Dock="Top" LastChildFill="False">
06 <!--标题头画布-->
07 <Canvas x:Name="canvasTop"
08 Width="{Binding Path=ActualWidth,
09 ElementName=GridOuter, Mode=Default}"
10 Height="90" DockPanel.Dock="Top">
11 <Canvas.Background>
12 <!--定义标题头的渐变背景-->
13 <LinearGradientBrush EndPoint="0.628,0.051"
14 StartPoint="0.628,0.788">
15 <GradientStop Color="#FFD0601D" Offset="0"/>
16 <GradientStop Color="#FFFFB917" Offset="1"/>
17 </LinearGradientBrush>
18 </Canvas.Background>
19 <!--显示标题头图片-->
20 <Image Width="90" Height="90"
21 Canvas.Left="5" Canvas.Top="0"
22 Source="../Images/myFriends.png"/>
23 <!--显示多媒体通讯录文字的图片-->
24 <Image Width="250" Height="50" Canvas.Left="106"
25 Canvas.Top="25"Source="../Images/MyFriendsWords.png"/>
26 </Canvas>
27 <!--进行导航的三个按钮所在的画布-->
28 <Canvas x:Name="canvasBottom" Width="{Binding Path=ActualWidth,
29 ElementName=GridOuter, Mode=Default}"
30 Height="45" Background="#FF000000">
31 <!--“添加联系人”按钮定义，其样式定义在模板中-->
32 <Button Width="35"x:Name="btnAddFriend"Click="btnAddFriend_
Click"
33 Height="35" Canvas.Left="14" Canvas.Top="5"
34 Template="{DynamicResource GlassButton}"
35 ToolTip="添加新联系人" Content=" " BorderThickness=
"1,1,1,1"
36 FontFamily="Webdings" FontSize="23"
37 FontWeight="Normal" Foreground="#FFFFFFFF"/>
38 <!--“查看所有联系人”按钮定义，其样式定义在模板中-->
39 <Button Width="35"x:Name="btnViewAllFriends" Click="btnView
AllFriends_Click"
40 Height="35"Content=" "Template="{DynamicResourceGlass
Button}"
41 ToolTip="查看所有联系人" FontFamily="Webdings" Font
Size="27"
42 FontWeight="Normal" Foreground="#FFFFFFFF"
43 Canvas.Left="68" Canvas.Top="5"/>
44 <!--“打开联系人选项”按钮定义，其样式定义在模板中-->
45 <Button Width="35" x:Name="btnOptions" Click="btnOptions_
Click" Height="35"
46 Content="@" Template="{DynamicResource GlassButton}"
47 ToolTip="打开联系人选项窗口" FontFamily="Webdings"
FontSize="27"
48 FontWeight="Normal" Foreground="#FFFFFFFF"
49 Canvas.Left="122" Canvas.Top="5"/>
50 </Canvas>
51 </DockPanel>
52 <!--用于放置其他控件的容器Grid-->
53 <Grid x:Name="mainGrid" Width="Auto" Height="Auto"/>
54 </DockPanel>
● 第03～51行代码在外层的DockPanel内部又嵌入了一个DockPanel，内存的DockPanel用于进行标题和按钮的设置。
● 第07～26行代码用于定义标题栏画布，并且指定了该画布的背景为线性渐变色。
● 第20～25行代码在标题栏上放置两幅图片，用于显示多媒体通讯录等文字信息。
● 第28～49行代码在标题下面定义了一个画布，用于显示3个导航按钮。
● 第53行的Grid将用于放置其他的用户控件等信息，本章后面将会详细介绍。
必须理解的是，mainGrid这个Grid控件将容纳增加联系人和查看联系人两个窗口。但是在主窗口的声明中，增加联系人和查看联系人这两个用户控件，是放在一个隐藏的名为gridHolder的控件中的，声明代码如下所示。
代码位置：见光盘中本章源代码的MainInterfaceWindow.xaml文件。
01 <!--容纳AddNewFriendControl和ViewAllUsersControl控件的Grid--> 02 <Grid x:Name="gridHolder" Visibility="Hidden" HorizontalAlignment= "Center" 03 VerticalAlignment="Center" Margin="0,0,0,0" Width="Auto" Height= "Auto"> 04 <!--引用定义在工程中的AddNewFriendControl控件--> 05 <local:AddNewFriendControl x:Name="addFriendsControl" 06 RenderTransformOrigin="0.5,0.5" 07 Margin="55,16,-55,-16"> 08 <!--为控件添加变换特性--> 09 <local:AddNewFriendControl.RenderTransform> 10 <TransformGroup> 11 <ScaleTransform ScaleX="1" ScaleY="1"/> 12 <SkewTransform AngleX="0" AngleY="0"/> 13 <RotateTransform Angle="0"/> 14 <TranslateTransform X="0" Y="0"/> 15 </TransformGroup> 16 </local:AddNewFriendControl.RenderTransform> 17 </local:AddNewFriendControl> 18 <!--引用定义在工程中的ViewAllUsersControl控件--> 19 <local:ViewAllUsersControl x:Name="viewAllUsersControl" 20 HorizontalAlignment="Center" 21 Width="750" Height="500" 22 RenderTransformOrigin="0.5,0.5"Opacity="0.0"> 23 <!--为控件添加变换特性--> 24 <local:ViewAllUsersControl.RenderTransform> 25 <TransformGroup> 26 <ScaleTransform ScaleX="0" ScaleY="0"/> 27 <SkewTransform AngleX="0" AngleY="0"/> 28 <RotateTransform Angle="0"/> 29 <TranslateTransform X="0" Y="0"/> 30 </TransformGroup> 31 </local:ViewAllUsersControl.RenderTransform> 32 </local:ViewAllUsersControl> 33 </Grid>
● 第02～03行代码声明了一个用于容纳两个用户控件的Grid，其Visibility属性为Hidden，表示在默认情况下该Grid处于隐藏状态。
● 第05～17行代码定义了AddNewFriendControl控件，这是一个添加新的联系人的用户控件，同时为这个控件添加了变换特性。
第09～32行代码定义了ViewAllUsersControl控件，这是一个查看所有联系人的用户控件，同时为这个控件添加了变换特性。
在对控件布局完成后，接下来要完成AddNewFriendControl和ViewAllUsersControl的转场动画设计，通讯录程序提供了两种类型的转场操作。
● 缩放的转场风格：控件将放大然后缩小从而实现了转场操作。
● 3D翻页转场风格：控件将进行一个三维翻动动画从而实现了转场操作。
缩放转场风格的实现比较简单，在Windows资源区，分别为AddNewFriendControl和ViewAllUsersControl定义了两种故事板。
● GrowAndHideAddUserControl：放大然后隐藏添加联系人的用户控件。
● ShrinkAndShowAddUserControl：缩小和显示添加联系人的用户控件。
● GrowAndShowViewUsersControl：放大和显示查看联系人的用户控件。
● ShrinkAndHideViewUsersControl：缩小和隐藏查看联系人的用户控件。
接下来就可以在代码中对这几个故事板进行调用，使其进行动画显示，默认情况下，通讯录使用缩放转场，在MainInterfaceWindow的构造函数中，定义了如下的代码。
代码位置：见光盘中本章源代码的MainInterfaceWindow.xaml.cs文件。
01 public MainInterfaceWindow()
02 {
03 InitializeComponent();
04 CreateAlphaGrowArea(true); //创建缩放显示区域
05 btnViewAllFriends.IsEnabled = true; //启用“查看联系人”按钮
06 btnAddFriend.IsEnabled = false; //关闭“添加联系人”按钮
07 }
● 第04行的CreateAlphaGrowArea方法将创建缩放区域，搜索XAML中指定名称的故事板，然后为故事板关联事件，代码如下所示：
代码位置：见光盘中本章源代码的MainInterfaceWindow.xaml.cs文件。
01 private void CreateAlphaGrowArea(bool initialCall)
02 {
03 //初始化“添加联系人”控件
04 addFriendsControl.ReInitialise();
05 //设置当前的显示风格
06 currentDisplayStyle = DisplayStyle.GrowShrink;
07 mainGrid.Children.Clear(); //首先清除Grid中的控件
08 //如果GridOuter中存在gridHolder,先从GridOuter移除
09 if (GridOuter.Children.Contains(gridHolder))
10 GridOuter.Children.Remove(gridHolder);
11 //在mainGrid控件集合中添加gridHolder控件
12 if (!mainGrid.Children.Contains(gridHolder))
13 mainGrid.Children.Add(gridHolder);
14 //让gridHolder控件得以显示
15 gridHolder.Visibility = Visibility.Visible;
16 //获取故事板并为故事板关联Completed事件
17 Grow_Hide_AddUserControlStoryBoard =
18 this.TryFindResource("GrowAndHideAddUserControl")as Storyboard;
19 Grow_Hide_AddUserControlStoryBoard.Completed +=
20 new EventHandler(Grow_Hide_AddUserControl_Completed);
21 Grow_Show_ViewUsersControlStoryBoard =
22 this.TryFindResource("GrowAndShowViewUsersControl")as Storyboard;
23 Shrink_Show_AddUserControlStoryBoard =
24 this.TryFindResource("ShrinkAndShowAddUserControl")as Storyboard;
25 Shrink_Show_AddUserControlStoryBoard.Completed +=
26 new EventHandler(Shrink_Show_AddUserControl_Completed);
27 Shrink_Hide_ViewUsersControlStoryBoard =
28 this.TryFindResource("ShrinkAndHideViewUsersControl") as Story
board;
29 if (initialCall) //如果已经初始化，则将当前显示选项设置为已显示
30 currentDisplayOption = CurrentDisplayOption.AddIsShown;
31 }
● 第04行代码调用AddNewFriendControl控件的ReInitialise方法初始化用户控件。
● 第06行代码将当前的显示风格设置为枚举类型DisplayStyle.GrowShrink。
● 第07～15行代码会加载gridHolder控件中定义的控件到mainGrid中。
第17～28行代码将查找在资源中定义的各种故事板，返回给定义在类级别的变量，并为故事板关联Completed事件。
● 第29～30行代码根据initialCall变量的状态来设置currentDisplayOption枚举类型的值。
Completed事件将设置控件的显示和隐藏来实现切换界面的效果，两个故事板关联的Completed事件如下所示。
代码位置：见光盘中本章源代码的MainInterfaceWindow.xaml.cs文件。
01 void Shrink_Show_AddUserControl_Completed(object sender, EventArgs e)
02 {
03 addFriendsControl.Visibility = Visibility.Visible; //显示“添加联系人”
04 viewAllUsersControl.Visibility = Visibility.Hidden;//隐藏“查看联系人”
05 currentDisplayOption = CurrentDisplayOption.AddIsShown; //设置显示状态
06 }
07 void Grow_Hide_AddUserControl_Completed(object sender, EventArgs e)
08 {
09 addFriendsControl.Visibility = Visibility.Hidden; //隐藏“添加联系人”
10 viewAllUsersControl.Visibility=Visibility.Visible;//显示“查看联系人”
11 currentDisplayOption = CurrentDisplayOption.ViewIsShown;
//设置显示状态
12 }
● 第03～05行代码在Shrink_Show_AddUserControlStoryBoard故事板动画播放完时执行，将隐藏“查看联系人”控件，显示“添加联系人”控件，最后设置当前显示选项枚举值。
● 第09～11行代码在Shrink_Hide_ViewUsersControlStoryBoard故事板动画播放完时执行，将隐藏“添加联系人”控件，显示“查看联系人”控件，最后设置当前显示选项枚举值。
当单击页面顶部的导航按钮时，动画开始执行并完成切换的操作，“添加联系人”按钮与“查看联系人”按钮代码如下所示。
代码位置：见光盘中本章源代码的MainInterfaceWindow.xaml.cs文件。
01 //“查看联系人”按钮单击事件处理代码
02 void btnViewAllFriends_Click(object sender, RoutedEventArgs e)
03 {
04 viewAllUsersControl.Visibility = Visibility.Visible;
// 显示“查看联系人”控件
05 Grow_Hide_AddUserControlStoryBoard.Begin(this); //开始动画
06 Grow_Show_ViewUsersControlStoryBoard.Begin(this); //开始动画
07 btnAddFriend.IsEnabled = true; //启用“添加联系人”按钮
08 btnViewAllFriends.IsEnabled = false; //启用“查看联系人”按钮
09 viewAllUsersControl.DataBind(); //绑定联系人数据
10 }
11 //添加联系人按钮单击事件处理代码
12 void btnAddFriend_Click(object sender, RoutedEventArgs e)
13 {
14 addFriendsControl.Visibility = Visibility.Visible;
//显示“添加联系人”控件
15 viewAllUsersControl.Visibility = Visibility.Visible;
//显示“查看联系人”控件
16 Shrink_Show_AddUserControlStoryBoard.Begin(this); //开始动画
17 Shrink_Hide_ViewUsersControlStoryBoard.Begin(this); //开始动画
18 btnAddFriend.IsEnabled = false; //禁用“添加联系人”按钮
19 btnViewAllFriends.IsEnabled = true; //启用“查看联系人”按钮
20 }
● 第04～09行代码是在单击“查看所有联系人”时所执行的代码，首先显示“查看所有联系人”控件，然后调用隐藏“添加联系人”控件动画隐藏“添加联系人”控件，再调用显示“查看联系人”控件显示查看联系人控件，最后设置按钮的显示和隐藏。第09行代码绑定联系人数据。
● 第14～19行代码是在单击“添加联系人”按钮时所执行的代码，首先会将“添加联系人”与“查看联系人”用户控件都显示出来，然后调用显示“添加联系人”动画显示“添加联系人”，调用隐藏查看联系人动画隐藏查看联系人界面。最后设置按钮的状态。
注意：关于定义动画的XAML代码，可以在MainInterfaceWindow.xaml文件的窗体资源区找到。