WPF界面开发

为了实现较好的用户体验，首先需要进行良好的WPF界面开发和布局。WPF支持PNG，JPG等图片资源作为WPF应用程序的背景，所以WPF应用程序能够实现半透明等多种渲染效果，WPF系统登录界面和查询界面如图9-24和图9-25所示。
 
图9-24  图书系统初步布局                        图9-25  用户查询界面布局
WPF能够支持PNG，JPG等格式的图片文件，所以在WPF窗体开发中能够使用渐变效果填充窗体并可以直接使用PNG图片进行窗体渲染。登录窗体包含了一个图片文件，图片文件的XAML代码如下所示。
         <Image Margin="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="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代码如下所示。
<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>
上述代码实现了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代码如下所示。
         <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>
窗体基本布局完成后，就可以为窗体中的控件进行动画事件的编写，创建动画事件能够提高用户的体验并且使应用程序更加绚丽。