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代码如下所示。
+展开
-XML
<Image Margin="0,0,2,23Width="490Height="450Source="bg.pngStretch="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/2008xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006mc:Ignorable="d">

…………………….
</Window>

  上述代码通过XAML实现了一个基本的Windows窗体,该窗体的头部信息为图书管理系统,并且定义了窗体的高度和宽度为500,窗体内的字体样式为微软雅黑。在WPF窗体中,还需要定义Label控件和TextBox等控件,用于实现基本的人机交互,其XAML代码如下所示。
+展开
-XML
<Grid x:Name="LayoutRoot">
<Image Margin="0,0,2,23Width="490Height="450Source="bg.pngStretch="Fill"/>
<Label FontSize="16FontWeight="BoldMargin="132,37,116.11,0
VerticalAlignment="TopHeight="30.117Content="读者您好,欢迎查阅我图书馆资料"/>

<Image HorizontalAlignment="LeftMargin="58,25,0,0VerticalAlignment="Top
Width="54Height="54Source="hello.pngStretch="Fill"/>

<TabControl IsSynchronizedWithCurrentItem="TrueMargin="12,95,21,23">
<TabItem Header="登录">
<Grid/>
</TabItem>
<TabItem Header="查询">
<Grid/>
</TabItem>
</TabControl>
<Label HorizontalAlignment="LeftMargin="110,227,0,0VerticalAlignment="TopContent="用户名:"/>
<Label HorizontalAlignment="LeftMargin="122,0,0,173VerticalAlignment="BottomContent="密码:"/>
<TextBox d:LayoutOverrides="HorizontalAlignmentHorizontalAlignment="LeftMargin="175,0,0,213.163"
 VerticalAlignment="BottomText="TextBoxTextWrapping="WrapWidth="192.89"/>

<PasswordBox Margin="175,0,116.11,179.037VerticalAlignment="Bottom"/>
<Button HorizontalAlignment="LeftMargin="198,0,0,100VerticalAlignment="BottomContent="登录"
Height="44.837Width="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="500Height="500FontFamily="Microsoft YaHei">

……………….
</Window>

  上述代码同样创建了一个宽度和高度都为500的窗体,在窗体中包括一个图片,一个搜索框和一个搜索结果框,这组控件XAML代码如下所示。
+展开
-XML
<Grid x:Name="LayoutRoot">
<Image Margin="0,0,2,23Source="bg.pngStretch="FillWidth="495Height="450"/>
<Image Margin="80,29,0,0Source="ok.pngStretch="FillWidth="91
Height="91VerticalAlignment="TopHorizontalAlignment="Left"/>

<Label HorizontalAlignment="LeftMargin="194,54,0,0VerticalAlignment="Top
Content="输出相应书籍名称FontWeight="Bold"/>

<TextBox HorizontalAlignment="LeftMargin="194,83.837,0,0VerticalAlignment="Top
Text="TextWrapping="WrapWidth="246.487"/>

<TextBox Margin="44,137,31.513,36Text="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="labelStoryboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)">

<SplineDoubleKeyFrame KeyTime="00:00:01Value="-85"/>
<SplineDoubleKeyFrame KeyTime="00:00:02Value="49"/>
<SplineDoubleKeyFrame KeyTime="00:00:03Value="-86"/>
</DoubleAnimationUsingKeyFrames>

上述代码定义了动画处理中变换的操作,在XAML文档中,动画处理都会被作为窗体资源而存在,而动画事件作为窗体触发器而存在,示例代码如下所示。
+展开
-XML
<Window.Triggers> <!--窗体触发器-->
<EventTrigger RoutedEvent="ButtonBase.ClickSourceName="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();
            }
        }

  上述代码定义了用户如果输入了用户名和密码分别为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";//填充结果控件
                    }
                }
            }
        }

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

加支付宝好友偷能量挖...


评论(0)网络
阅读(61)喜欢(0)Asp.Net/C#/WCF