WPF应用程序开发

WPF应用程序开发

WPF不仅提供了强大的布局功能和窗体渲染功能，在WPF应用程序开发中，还能够实现如Flash一样的动画效果，这就使得在Windows窗体中能够实现Flash动画效果，Microsoft Expression Blend 2提供了动画轴，动画事件处理面板，方便了开发人员在WPF中实现动画效果。

19.3.1  WPF动画事件

WPF可以像Flash一样支持动画开发，与普通的事件不同的是，WPF包括一个动画事件，这个动画事件描述的是当用户执行某个操作时所触发的动画事件。首先需要创建一个动画对象，这个对象可以是一个图片，也可以是一个控件，其XAML文档如下所示。

<Button HorizontalAlignment="Left"Margin="267,103,0,0" VerticalAlignment="Top"

         Content="会变的按钮" Height="52.687" Width="86" Opacity="0.4"/>

上述代码创建了一个按钮控件，并为按钮控件配置了相应的属性，这些属性包括对齐方式，大小，文本，以及不透明度。如果开发人员希望当用户的鼠标单击该控件时，该控件的宽度和高度都会变化，并且不透明度也会变化，在Microsoft Expression Blend 2中的交互控制面板可以完成该事件的配置，如图19-13所示。

单击【+事件】按钮可以为WPF应用程序添加动画事件，Microsoft ExpressionBlend 2能够智能的识别WPF应用中的控件并为相应的控件选择方法，为了实现开发人员所希望实现的效果。在下拉菜单中，这里可以选择【Click】事件如图19-14所示。

 

图19-13  交互面板                   图19-14  选择事件

选择事件后单击【时】按钮旁边的加号能够为动画事件添加新操作，如果WPF应用程序没有创建时间轴时，系统会提示是否添加一个时间轴，单击【确定】按钮即可创建一个默认的时间轴以供开发人员进行动画开发，如图19-15所示。

图19-15  添加时间轴

注意：Story board可以翻译成节目播出表，其概念同时间轴基本相同，都会规定对象的播放顺序和方法。

19.3.2  WPF时间轴

在Flash动画的制作中，有一个时间轴的概念。时间轴是用来控制在动画运行中相应的时间时，某个或某些对象所需要执行的操作。例如一个Flash动画，在动画运行后，第5秒的时候有一个小人出现在动画中，并且拿出了一朵花。在这个过程中，就需要在第5秒的时候对相应的对象（这里包括人，花）进行相应的操作。

在WPF应用程序中同样包括一个时间轴，这个时间轴用于定制WPF动画事件中某一个时刻所需要实现的动画效果，开发人员能够通过使用WPF时间轴快速的实现动画效果。例如上一节中讲到的开发人员希望实现一个按钮的动画效果，则可以通过时间轴编写相应的事件，时间轴如图19-16所示。

在对象和时间轴面板中，可以选择相应的对象进行动画事件的操作。在时间轴面板中，可以看到在时间轴上方包括从0开始的数字，这些数字就是时间控制。当触发某个动画事件时，时间轴就开始运算，从0开始向右移动，分别执行相应的路径以实现动画效果。如果开发人员希望用户单击按钮时能够实现按钮形状和透明度的变化，可以通过时间轴方便的生成动画。在进行时间轴操作前，可以通过样式控制控件的相应位置，样式和内容等，如图19-17所示。

  

图19-16  对象和时间轴                 图19-17  控件初始状态

初始状态确定后XAML文档代码如下所示。

<Button HorizontalAlignment="Left"Margin="267,103,0,0" VerticalAlignment="Top" Content="会变的按钮" Height="52.687" Width="86" Opacity="0.4"x:Name="button" RenderTransformOrigin="0.5,0.5">

         <Button.RenderTransform>

                  <TransformGroup>

                            <ScaleTransformScaleX="1" ScaleY="1"/>

                            <SkewTransformAngleX="0" AngleY="0"/>

                            <RotateTransformAngle="0"/>

                            <TranslateTransformX="0" Y="0"/>

                   </TransformGroup>

         </Button.RenderTransform>

</Button>

上述代码初始化了一个按钮控件并声明。在确定了初始状态后就需要拖动时间轴来确定动画播放的顺序，如图19-18所示。

图19-18  拖动时间轴

如图19-18所示，可以将时间轴拖放在2秒的位置。拖放后，可以直接在当前位置修改控件的属性。修改后当触发动画事件后，时间轴开始移动并且会随着时间轴进行控件属性的更改。当时间轴的时间指针移动到2秒位置时，属性就会更改成2秒时设置的样式，如图19-19和图19-20所示。

 

图19-19  初始状态                          图19-20  实现动画

通过使用时间轴能够快速定义WPF动画效果，开发人员能够使用时间轴进行相应的动画操作而无需通过编程实现，这样就简化了开发人员对底层动画实现的复杂的操作，节约了开发周期。另外，设计人员也能够设计动画事件并专注与WPF动画的实现，而开发人员能够专注逻辑处理，可以将动画事件的实现交付给设计人员，形成明确的分工。

19.3.3  WPF事件处理

在MicrosoftExpression Blend 2中只能控制WPF应用程序的样式，却无法进行事件处理开发，若需要进行WPF应用程序开发，就必须使用VisualStudio 2008。使用VisualStudio 2008打开MicrosoftExpression Blend 2创建的解决方案，能够进行WPF应用程序事件开发，如图19-21所示。

图19-21  使用Visual Studio 2008打开解决方案

在Visual Studio2008中进行WPF应用程序开发会呈现两个窗口，一个窗口用于直接进行Windows窗体布局，另一个窗口用于呈现相应的XAML文档。在Visual Studio 2008中，可以直接修改XAML文档进行WPF样式控制，示例代码如下所示。

<Grid x:Name="LayoutRoot">

         <ButtonMargin="155,86,169,107" Content="更改后的按钮" Opacity="0.6"

                   x:Name="button"RenderTransformOrigin="0.5,0.5">

                   <Button.RenderTransform>

                            <TransformGroup>

                                     <ScaleTransformScaleX="1" ScaleY="1"/>

                                     <SkewTransformAngleX="0" AngleY="0"/>

                                     <RotateTransformAngle="0"/>

                                     <TranslateTransformX="0" Y="0"/>

                            </TransformGroup>

                  </Button.RenderTransform>

         </Button>

</Grid>

上述代码直接修改XAML代码就可以实现Windows窗体样式的控制。与Microsoft Expression Blend2不同的是，在VisualStudio 2008中双击按钮控件，在就会在cs文件中自动创建相应的事件代码，开发人员可以在相应的区域中编写代码，示例代码如下所示。

       private void button_Click(object sender, RoutedEventArgs e)

        {

           button.Content = "按钮控件被按";                                                                                     //触发事件

        }

上述代码运行后如图19-22和图19-23所示。

 

图19-22  按钮初始化                      图9-23  动画事件和按钮事件

注意：WPF应用程序中的一些属性可能和Win From和ASP.NET中的一些属性不同，例如在Win From和ASP.NET中按钮控件上的文本是通过Text属性控制的，而在WPF中使用的是Content属性。

WPF应用的开发和Win Form应用程序的开发没有特殊的区别，但是WPF应用提供了更好的用户体验。WPF不仅能够提供动画事件同样也能够执行Win From应用程序开发中所需要的事件。

19.4  WPF系统开发

WPF能够开发用户体验更好的Windows应用程序，通过使用WPF技术，能够实现可扩展的容易维护并且用户体验友好的Windows应用程序。在微软本身的产品中，很多应用也使用了WPF技术，包括Vista以及Expression。

19.4.1  WPF系统需求

在Windows应用程序开发中，常常需要进行数据查询，例如一个图书管理系统，借读的读者往往很难在诸多图书当中寻找一个适合自己的书，例如如果读者希望借一本关于ASP.NET的书，但是图书馆中包含了很多关于ASP.NET的书，读者曾经看过了一本关于ASP.NET 3.5的书，希望能够找到该书，但是在图书馆中找了半天都找不到这本书，读者就会想“如果能够查询该书就好了”。

开发人员可以很快的进行图书管理系统的编码并进行查询分析，现在读者可以在图书馆电脑中查询ASP.NET 3.5开发大全了，但是查询出来的结果显示的并不那么友好，而且界面颜色单调，这就需要Windows应用程序具有较好的用户体验。WPF应用程序就能够实现较好的用户体验，同样也可以实现普通Windows应用程序所能够完成的需求。

19.4.2  WPF界面开发

为了实现较好的用户体验，首先需要进行良好的WPF界面开发和布局。WPF支持PNG，JPG等图片资源作为WPF应用程序的背景，所以WPF应用程序能够实现半透明等多种渲染效果，WPF系统登录界面和查询界面如图9-24和图9-25所示。

 

图9-24  图书系统初步布局                        图9-25  用户查询界面布局

WPF能够支持PNG，JPG等格式的图片文件，所以在WPF窗体开发中能够使用渐变效果填充窗体并可以直接使用PNG图片进行窗体渲染。登录窗体包含了一个图片文件，图片文件的XAML代码如下所示。

         <ImageMargin="0,0,2,23" Width="490" Height="450"Source="bg.png" Stretch="Fill"/>

注意：PNG图片支持透明效果，而其他的图片格式的文件可能不支持半透明效果，WPF支持半透明图片作为资源文件。

通过XAML文档能够定义图片文件并定义一些常用控件，为了实现以上的WPF界面布局，WPF应用程序窗体的XAML代码如下所示。

<Window

         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

         x:Class="_19_4.Window1"

         x:Name="Window"

         Title="图书管理系统"

         Width="500"

         Height="500"

         FontFamily="MicrosoftYaHei"

         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"mc:Ignorable="d">

…………………….

</Window>

上述代码通过XAML实现了一个基本的Windows窗体，该窗体的头部信息为图书管理系统，并且定义了窗体的高度和宽度为500，窗体内的字体样式为微软雅黑。在WPF窗体中，还需要定义Label控件和TextBox等控件，用于实现基本的人机交互，其XAML代码如下所示。

<Grid x:Name="LayoutRoot">

         <ImageMargin="0,0,2,23" Width="490" Height="450"Source="bg.png" Stretch="Fill"/>

         <LabelFontSize="16" FontWeight="Bold"Margin="132,37,116.11,0"

                   VerticalAlignment="Top"Height="30.117" Content="读者您好,欢迎查阅我图书馆资料"/>

         <ImageHorizontalAlignment="Left" Margin="58,25,0,0"VerticalAlignment="Top"

         Width="54"Height="54" Source="hello.png"Stretch="Fill"/>

         <TabControlIsSynchronizedWithCurrentItem="True"Margin="12,95,21,23">

                   <TabItemHeader="登录">

                            <Grid/>

                   </TabItem>

                   <TabItemHeader="查询">

                            <Grid/>

                   </TabItem>

         </TabControl>

         <LabelHorizontalAlignment="Left" Margin="110,227,0,0"VerticalAlignment="Top" Content="用户名:"/>

         <LabelHorizontalAlignment="Left" Margin="122,0,0,173"VerticalAlignment="Bottom" Content="密码:"/>

         <TextBoxd:LayoutOverrides="HorizontalAlignment"HorizontalAlignment="Left" Margin="175,0,0,213.163"

          VerticalAlignment="Bottom"Text="TextBox" TextWrapping="Wrap"Width="192.89"/>

         <PasswordBoxMargin="175,0,116.11,179.037"VerticalAlignment="Bottom"/>

         <ButtonHorizontalAlignment="Left" Margin="198,0,0,100"VerticalAlignment="Bottom" Content="登录"

         Height="44.837"Width="75.887"/>

</Grid>

上述代码实现了WPF窗体的基本布局，在WPF窗体中包含三个Label标签控件，用于显示相应的提示信息，如“用户名”，“密码”等。该窗体还包含了两个TextBox控件，其中一个TextBox控件用于用户用户名的输入，而另一个TextBox控件用于密码的输入。编辑完成登录窗体后，就需要进一步对搜索窗体进行样式控制，搜索窗体XAML文档代码如下所示。

<Window

         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

         x:Class="_19_4.Window2"

         x:Name="Window"

         Title="Window2"

         Width="500"Height="500" FontFamily="Microsoft YaHei">

         ……………….

</Window>

上述代码同样创建了一个宽度和高度都为500的窗体，在窗体中包括一个图片，一个搜索框和一个搜索结果框，这组控件XAML代码如下所示。

         <Gridx:Name="LayoutRoot">

                   <ImageMargin="0,0,2,23" Source="bg.png" Stretch="Fill"Width="495" Height="450"/>

                   <ImageMargin="80,29,0,0" Source="ok.png" Stretch="Fill"Width="91"

                            Height="91"VerticalAlignment="Top" HorizontalAlignment="Left"/>

                   <LabelHorizontalAlignment="Left" Margin="194,54,0,0"VerticalAlignment="Top"

                            Content="输出相应书籍名称" FontWeight="Bold"/>

                   <TextBoxHorizontalAlignment="Left" Margin="194,83.837,0,0"VerticalAlignment="Top"

                            Text=""TextWrapping="Wrap" Width="246.487"/>

                   <TextBoxMargin="44,137,31.513,36" Text=""TextWrapping="Wrap"/>

         </Grid>

窗体基本布局完成后，就可以为窗体中的控件进行动画事件的编写，创建动画事件能够提高用户的体验并且使应用程序更加绚丽。

19.4.3  WPF动画制作

在图书管理系统中，希望读者首先登录，如果登录成功了，就能够进行查询；如果登录没有成功，则不允许用户开始查询，只有用户登录成功后才有查询权限。在读者单击登录按钮时，应用程序可以播放一段动画以提示用户正在登录，如图9-26和图9-27所示。

 

图9-26  登录框位置下移                      图9-27  登录框位置上移

当用户单击登录按钮进行登录时，登录框会上下移动以提示用户该应用程序正在处理。在动画处理代码中，必须为其中的每一个控件进行动画处理描述，而写控件的动画处理的XAML文档基本相同，示例代码如下所示。

<Window.Resources>                                                                                                              //窗体资源文件

                   <Storyboardx:Key="OnClick1">                                                                                   //定义了动画事件

                  <DoubleAnimationUsingKeyFrames

                           BeginTime="00:00:00"

                           Storyboard.TargetName="label"Storyboard.TargetProperty=

                           "(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)">

                            <SplineDoubleKeyFrameKeyTime="00:00:01" Value="-85"/>

                            <SplineDoubleKeyFrameKeyTime="00:00:02" Value="49"/>

                            <SplineDoubleKeyFrameKeyTime="00:00:03" Value="-86"/>

                  </DoubleAnimationUsingKeyFrames>

上述代码定义了动画处理中变换的操作，在XAML文档中，动画处理都会被作为窗体资源而存在，而动画事件作为窗体触发器而存在，示例代码如下所示。

<Window.Triggers>                                                                                                                  //窗体触发器

         <EventTriggerRoutedEvent="ButtonBase.Click" SourceName="button">

                   <BeginStoryboardStoryboard="{StaticResource OnClick1}"/>

         </EventTrigger>

</Window.Triggers>

上述代码定义了窗体触发器，当用户操作OnClick1事件后则会触发动画处理事件。开发人员能够在<Storyboard x:Key="OnClick1">标记中定义控件动画事件的其他内容以扩展WPF动画事件。

19.4.4  WPF事件编写

在WPF应用程序控件动画制作中，不能为了实现绚丽的动画而放弃了实用的功能。该应用程序希望用户能够进行登录并对用户的身份进行验证操作，如果验证成功则能够执行操作，而如果身份验证不成功，则无法执行搜索操作。在Visual Studio 2008中，双击按钮控件以进行登录验证操作，示例代码如下所示。

       private void button_Click_1(object sender, RoutedEventArgs e)

        {

           if ((textBox.Text == "admin") && (passwordBox.Password== "admin"))                           //如果是管理员

           {

               Window2 w2 = new Window2();                                                                               //打开新窗口

               w2.ShowDialog();

           }

        }

上述代码定义了用户如果输入了用户名和密码分别为admin/admin时，则验证成功，就会呈现搜索框，如果用户名和密码不正确，则无法验证进行搜索。进入搜索窗口时，用户可以在书籍搜索框中输入相应信息，当用户输入信息后，结果框就能够及时反映相应的搜索结果，示例代码如下所示。

       public string[] books = { "ASP.NET开发大全", "ASP开发指南",".NET应用程序", "组件开发指南",

                             "PHP新手入门", "C++学习" };

       private void TextBox_TextChanged(object sender, TextChangedEventArgs e)            //用户查询

        {

           if (!String.IsNullOrEmpty(search.Text))                                                                           //如果输入不为空

           {

               result.Clear();                                                                                                               //清空结果

               for (int i = 0; i < books.Length; i++)                                                                                    //遍历书籍

               {

                   if (books[i].Contains(search.Text))                                                                   //如果匹配则输出

                   {

                        result.Text +=books[i].ToString() + "\n";                                                  //填充结果控件

                   }

               }

           }

        }

上述代码定义了一个数组以存储书籍的相应信息，当用户在搜索框中输入相应的信息时，系统就会遍历数据库进行书籍查询，运行结果如图9-28和图9-29所示。

 

图9-28  搜索C++相关书籍                         图9-29  清空结果后再搜索