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代码如下所示。
注意：PNG图片支持透明效果，而其他的图片格式的文件可能不支持半透明效果，WPF支持半透明图片作为资源文件。
通过XAML文档能够定义图片文件并定义一些常用控件，为了实现以上的WPF界面布局，WPF应用程序窗体的XAML代码如下所示。
上述代码通过XAML实现了一个基本的Windows窗体，该窗体的头部信息为图书管理系统，并且定义了窗体的高度和宽度为500，窗体内的字体样式为微软雅黑。在WPF窗体中，还需要定义Label控件和TextBox等控件，用于实现基本的人机交互，其XAML代码如下所示。
上述代码实现了WPF窗体的基本布局，在WPF窗体中包含三个Label标签控件，用于显示相应的提示信息，如“用户名”，“密码”等。该窗体还包含了两个TextBox控件，其中一个TextBox控件用于用户用户名的输入，而另一个TextBox控件用于密码的输入。编辑完成登录窗体后，就需要进一步对搜索窗体进行样式控制，搜索窗体XAML文档代码如下所示。
上述代码同样创建了一个宽度和高度都为500的窗体，在窗体中包括一个图片，一个搜索框和一个搜索结果框，这组控件XAML代码如下所示。
窗体基本布局完成后，就可以为窗体中的控件进行动画事件的编写，创建动画事件能够提高用户的体验并且使应用程序更加绚丽。
19.4.3 WPF动画制作
在图书管理系统中，希望读者首先登录，如果登录成功了，就能够进行查询；如果登录没有成功，则不允许用户开始查询，只有用户登录成功后才有查询权限。在读者单击登录按钮时，应用程序可以播放一段动画以提示用户正在登录，如图9-26和图9-27所示。
图9-26 登录框位置下移
图9-27 登录框位置上移
当用户单击登录按钮进行登录时，登录框会上下移动以提示用户该应用程序正在处理。在动画处理代码中，必须为其中的每一个控件进行动画处理描述，而写控件的动画处理的XAML文档基本相同，示例代码如下所示。
上述代码定义了动画处理中变换的操作，在XAML文档中，动画处理都会被作为窗体资源而存在，而动画事件作为窗体触发器而存在，示例代码如下所示。
上述代码定义了窗体触发器，当用户操作OnClick1事件后则会触发动画处理事件。开发人员能够在<Storyboard x:Key="OnClick1">标记中定义控件动画事件的其他内容以扩展WPF动画事件。
19.4.4 WPF事件编写
在WPF应用程序控件动画制作中，不能为了实现绚丽的动画而放弃了实用的功能。该应用程序希望用户能够进行登录并对用户的身份进行验证操作，如果验证成功则能够执行操作，而如果身份验证不成功，则无法执行搜索操作。在Visual Studio 2008中，双击按钮控件以进行登录验证操作，示例代码如下所示。
上述代码定义了用户如果输入了用户名和密码分别为admin/admin时，则验证成功，就会呈现搜索框，如果用户名和密码不正确，则无法验证进行搜索。进入搜索窗口时，用户可以在书籍搜索框中输入相应信息，当用户输入信息后，结果框就能够及时反映相应的搜索结果，示例代码如下所示。
上述代码定义了一个数组以存储书籍的相应信息，当用户在搜索框中输入相应的信息时，系统就会遍历数据库进行书籍查询，运行结果如图9-28和图9-29所示。
图9-28 搜索C++相关书籍
图9-29 清空结果后再搜索
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代码如下所示。
+展开
-XML
<Image Margin="0,0,2,23" Width="490" Height="450" Source="bg.png" Stretch="Fill"/>
注意：PNG图片支持透明效果，而其他的图片格式的文件可能不支持半透明效果，WPF支持半透明图片作为资源文件。
通过XAML文档能够定义图片文件并定义一些常用控件，为了实现以上的WPF界面布局，WPF应用程序窗体的XAML代码如下所示。
+展开
-XML
<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="Microsoft YaHei"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d">
…………………….
</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="Microsoft YaHei"
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代码如下所示。
+展开
-XML
<Grid x:Name="LayoutRoot">
<Image Margin="0,0,2,23" Width="490" Height="450" Source="bg.png" Stretch="Fill"/>
<Label FontSize="16" FontWeight="Bold" Margin="132,37,116.11,0"
VerticalAlignment="Top" Height="30.117" Content="读者您好,欢迎查阅我图书馆资料"/>
<Image HorizontalAlignment="Left" Margin="58,25,0,0" VerticalAlignment="Top"
Width="54" Height="54" Source="hello.png" Stretch="Fill"/>
<TabControl IsSynchronizedWithCurrentItem="True" Margin="12,95,21,23">
<TabItem Header="登录">
<Grid/>
</TabItem>
<TabItem Header="查询">
<Grid/>
</TabItem>
</TabControl>
<Label HorizontalAlignment="Left" Margin="110,227,0,0" VerticalAlignment="Top" Content="用户名:"/>
<Label HorizontalAlignment="Left" Margin="122,0,0,173" VerticalAlignment="Bottom" Content="密码:"/>
<TextBox d:LayoutOverrides="HorizontalAlignment" HorizontalAlignment="Left" Margin="175,0,0,213.163"
VerticalAlignment="Bottom" Text="TextBox" TextWrapping="Wrap" Width="192.89"/>
<PasswordBox Margin="175,0,116.11,179.037" VerticalAlignment="Bottom"/>
<Button HorizontalAlignment="Left" Margin="198,0,0,100" VerticalAlignment="Bottom" Content="登录"
Height="44.837" Width="75.887"/>
</Grid>
<Image Margin="0,0,2,23" Width="490" Height="450" Source="bg.png" Stretch="Fill"/>
<Label FontSize="16" FontWeight="Bold" Margin="132,37,116.11,0"
VerticalAlignment="Top" Height="30.117" Content="读者您好,欢迎查阅我图书馆资料"/>
<Image HorizontalAlignment="Left" Margin="58,25,0,0" VerticalAlignment="Top"
Width="54" Height="54" Source="hello.png" Stretch="Fill"/>
<TabControl IsSynchronizedWithCurrentItem="True" Margin="12,95,21,23">
<TabItem Header="登录">
<Grid/>
</TabItem>
<TabItem Header="查询">
<Grid/>
</TabItem>
</TabControl>
<Label HorizontalAlignment="Left" Margin="110,227,0,0" VerticalAlignment="Top" Content="用户名:"/>
<Label HorizontalAlignment="Left" Margin="122,0,0,173" VerticalAlignment="Bottom" Content="密码:"/>
<TextBox d:LayoutOverrides="HorizontalAlignment" HorizontalAlignment="Left" Margin="175,0,0,213.163"
VerticalAlignment="Bottom" Text="TextBox" TextWrapping="Wrap" Width="192.89"/>
<PasswordBox Margin="175,0,116.11,179.037" VerticalAlignment="Bottom"/>
<Button HorizontalAlignment="Left" Margin="198,0,0,100" VerticalAlignment="Bottom" Content="登录"
Height="44.837" Width="75.887"/>
</Grid>
上述代码实现了WPF窗体的基本布局，在WPF窗体中包含三个Label标签控件，用于显示相应的提示信息，如“用户名”，“密码”等。该窗体还包含了两个TextBox控件，其中一个TextBox控件用于用户用户名的输入，而另一个TextBox控件用于密码的输入。编辑完成登录窗体后，就需要进一步对搜索窗体进行样式控制，搜索窗体XAML文档代码如下所示。
+展开
-XML
<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>
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代码如下所示。
+展开
-XML
<Grid x:Name="LayoutRoot">
<Image Margin="0,0,2,23" Source="bg.png" Stretch="Fill" Width="495" Height="450"/>
<Image Margin="80,29,0,0" Source="ok.png" Stretch="Fill" Width="91"
Height="91" VerticalAlignment="Top" HorizontalAlignment="Left"/>
<Label HorizontalAlignment="Left" Margin="194,54,0,0" VerticalAlignment="Top"
Content="输出相应书籍名称" FontWeight="Bold"/>
<TextBox HorizontalAlignment="Left" Margin="194,83.837,0,0" VerticalAlignment="Top"
Text="" TextWrapping="Wrap" Width="246.487"/>
<TextBox Margin="44,137,31.513,36" Text="" TextWrapping="Wrap"/>
</Grid>
<Image Margin="0,0,2,23" Source="bg.png" Stretch="Fill" Width="495" Height="450"/>
<Image Margin="80,29,0,0" Source="ok.png" Stretch="Fill" Width="91"
Height="91" VerticalAlignment="Top" HorizontalAlignment="Left"/>
<Label HorizontalAlignment="Left" Margin="194,54,0,0" VerticalAlignment="Top"
Content="输出相应书籍名称" FontWeight="Bold"/>
<TextBox HorizontalAlignment="Left" Margin="194,83.837,0,0" VerticalAlignment="Top"
Text="" TextWrapping="Wrap" Width="246.487"/>
<TextBox Margin="44,137,31.513,36" Text="" TextWrapping="Wrap"/>
</Grid>
窗体基本布局完成后，就可以为窗体中的控件进行动画事件的编写，创建动画事件能够提高用户的体验并且使应用程序更加绚丽。
19.4.3 WPF动画制作
在图书管理系统中，希望读者首先登录，如果登录成功了，就能够进行查询；如果登录没有成功，则不允许用户开始查询，只有用户登录成功后才有查询权限。在读者单击登录按钮时，应用程序可以播放一段动画以提示用户正在登录，如图9-26和图9-27所示。
图9-26 登录框位置下移
图9-27 登录框位置上移
当用户单击登录按钮进行登录时，登录框会上下移动以提示用户该应用程序正在处理。在动画处理代码中，必须为其中的每一个控件进行动画处理描述，而写控件的动画处理的XAML文档基本相同，示例代码如下所示。
+展开
-XML
<Window.Resources> <!--窗体资源文件-->
<Storyboard x:Key="OnClick1"> //定义了动画事件
<DoubleAnimationUsingKeyFrames
BeginTime="00:00:00"
Storyboard.TargetName="label" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)">
<SplineDoubleKeyFrame KeyTime="00:00:01" Value="-85"/>
<SplineDoubleKeyFrame KeyTime="00:00:02" Value="49"/>
<SplineDoubleKeyFrame KeyTime="00:00:03" Value="-86"/>
</DoubleAnimationUsingKeyFrames>
<Storyboard x:Key="OnClick1"> //定义了动画事件
<DoubleAnimationUsingKeyFrames
BeginTime="00:00:00"
Storyboard.TargetName="label" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)">
<SplineDoubleKeyFrame KeyTime="00:00:01" Value="-85"/>
<SplineDoubleKeyFrame KeyTime="00:00:02" Value="49"/>
<SplineDoubleKeyFrame KeyTime="00:00:03" Value="-86"/>
</DoubleAnimationUsingKeyFrames>
上述代码定义了动画处理中变换的操作，在XAML文档中，动画处理都会被作为窗体资源而存在，而动画事件作为窗体触发器而存在，示例代码如下所示。
+展开
-XML
<Window.Triggers> <!--窗体触发器-->
<EventTrigger RoutedEvent="ButtonBase.Click" SourceName="button">
<BeginStoryboard Storyboard="{StaticResource OnClick1}"/>
</EventTrigger>
</Window.Triggers>
<EventTrigger RoutedEvent="ButtonBase.Click" SourceName="button">
<BeginStoryboard Storyboard="{StaticResource OnClick1}"/>
</EventTrigger>
</Window.Triggers>
上述代码定义了窗体触发器，当用户操作OnClick1事件后则会触发动画处理事件。开发人员能够在<Storyboard x:Key="OnClick1">标记中定义控件动画事件的其他内容以扩展WPF动画事件。
19.4.4 WPF事件编写
在WPF应用程序控件动画制作中，不能为了实现绚丽的动画而放弃了实用的功能。该应用程序希望用户能够进行登录并对用户的身份进行验证操作，如果验证成功则能够执行操作，而如果身份验证不成功，则无法执行搜索操作。在Visual Studio 2008中，双击按钮控件以进行登录验证操作，示例代码如下所示。
+展开
-C#
private void button_Click_1(object sender, RoutedEventArgs e)
{
if ((textBox.Text == "admin") && (passwordBox.Password == "admin"))//如果是管理员
{
Window2 w2 = new Window2();//打开新窗口
w2.ShowDialog();
}
}
{
if ((textBox.Text == "admin") && (passwordBox.Password == "admin"))//如果是管理员
{
Window2 w2 = new Window2();//打开新窗口
w2.ShowDialog();
}
}
上述代码定义了用户如果输入了用户名和密码分别为admin/admin时，则验证成功，就会呈现搜索框，如果用户名和密码不正确，则无法验证进行搜索。进入搜索窗口时，用户可以在书籍搜索框中输入相应信息，当用户输入信息后，结果框就能够及时反映相应的搜索结果，示例代码如下所示。
+展开
-C#
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";//填充结果控件
}
}
}
}
"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 清空结果后再搜索
加支付宝好友偷能量挖...
