WPF入门篇--一个WPF的应用小程序

WPF的全称是Windows Presentation Foundation，是微软新发布的Vista操作系统的三大核心开发库之一，其主要负责的是图形显示，所以叫Presentation（呈现）。Windows Presentation Foundation (WPF) 是下一代显示系统，用于生成能带给用户震撼视觉体验的 Windows 客户端应用程序。使用 WPF，您可以创建广泛的独立应用程序以及浏览器承载的应用程序。

WPF其实包含两个相互关联的编程接口，你可以利用C#或其他的.NET语言进行编程，当然也可以通过XAML（Extentsible Application Markup Language）来进行编程，后者是专门用于定义用户界面的视觉部分的语言。

 

我认为WPF最大的优点无疑是提出了一个很好的公式：

 

Application=Code+Markup

 

即应用程序是由后台代码和前台的标记构成的，这样就把前台界面和后台代码最大程度上分离开了，使得美工和程序员各司其职。尤其突出的是，WPF由于是主要负责的是图形显示，因此界面效果非常炫酷，并且由于XAML语言的出现，使得界面的编写变得非常灵活和简单，我们再也不用为了做不出好看的界面或做出炫酷的界面而要花太长的时间而烦恼了。还有一个好处就是，XAML语言非常简单，这样即使不是程序员出身的美工也可以很快学会相关的代码，前台和后台更加融洽。

 

说了这么多，还是先做个例子给大家看吧~

首先先创建一个WPF应用程序

 

 

从上面的图中可以看出vs2008有关WPF的项目模板(Project Template)包括：

模板名称	说明
WPF应用程序	使用WPF控件(WPF Control)和事件处理设计用户接口(User Interface)
WPF 浏览器应用程序	创建一个能在浏览器中运行的WPF应用程序
WPF自定义控件库	用于创建自定义控件，自定义控件继承Control类，此模板中不能可视化设计
WPF 用户控件库	用于创建用户控件，用户控件继承UserControl类，能可视化设计控件

 

 

其中包括四个重要的文件，有关它们的说明分别为：

文件名称	说明
App.xaml	Application的设置，通过此文件可以设置应用程序的起始文件和资源
App.xaml.cs	这个是App.xaml的后台文件，继承System.Windows.Application,用于描述WPF应用程序
Window1.xaml	一个WPF窗体的XMAL设计文件。
Window1.xaml.cs	Window1.xaml的后台文件，继承自System.Windows.Window，是WPF窗口的实现类

 

好了，现在我开始编写属于我的WPF程序了，我做得这个程序是一个简单的卷轴展开的动画程序，然后点击下面的按钮则会出现弹出框的这么一个简单的小程序，大概花了我十分钟左右的时间吧，一个简单又漂亮的程序就出现了

 

 

那么我们来看看相应部分的代码吧

 

 

首先我在解决方案里添加了一个image，叫做Garden.jpg是一个花园的图。

然后我就创建了一个Usercontrol，即用户控件，这个用户控件是我们自己定义的，可以随意的做出任意的图形或者是带有多种功能的控件，这里我做了一个卷轴的边缘：xaml代码如下

 

Code
<UserControl

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

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

       xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

       xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

       x:Class="HelloWorld.UserControl1"

       x:Name="UserControl"

Width="30" Height="200">

 

       <Grid x:Name="LayoutRoot">

              <Rectangle Margin="0,9,0,8.5">

                     <Rectangle.Fill>

                            <LinearGradientBrush EndPoint="-1.741,0.747" StartPoint="3,0.16">

                                   <GradientStop Color="#FFDDDB15" Offset="0"/>

                                   <GradientStop Color="#FFFF0000" Offset="1"/>

                            LinearGradientBrush>

                     Rectangle.Fill>

              Rectangle>

              <Ellipse VerticalAlignment="Top" Height="15">

                     <Ellipse.Fill>

                            <LinearGradientBrush EndPoint="-1.741,0.747" StartPoint="3,0.16">

                                   <GradientStop Color="#FFDDDB15" Offset="0"/>

                                   <GradientStop Color="#FFFF0000" Offset="1"/>

                            LinearGradientBrush>

                     Ellipse.Fill>

              Ellipse>

              <Ellipse VerticalAlignment="Bottom" Height="15">

                     <Ellipse.Fill>

                            <LinearGradientBrush EndPoint="-1.741,0.747" StartPoint="3,0.16">

                                   <GradientStop Color="#FFDDDB15" Offset="0"/>

                                   <GradientStop Color="#FFFF0000" Offset="1"/>

                            LinearGradientBrush>

                     Ellipse.Fill>

              Ellipse>

       Grid>

UserControl>

 

然后就是主界面了，调用了我自己的用户控件，顺便说一下，我自己非常喜欢自己做用户控件，这样可以做出很多包含各种功能于一身的新控件，比如你可以让一个按钮具有别的奇形怪状的外形，并且可以在按钮里输入文字，不过这个是WPF进阶学习中要学习到的，这里我们暂时不管，只调用我做的相应控件即可。

Xaml代码如下：

 

Code
<Window x:Class="HelloWorld.Window1"

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

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

    Title="Window1" Height="400" Width="400" xmlns:HelloWorld="clr-namespace:HelloWorld" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" WindowState="Normal" ResizeMode="NoResize">

       <Window.Resources>   

              <Storyboard x:Key="Storyboard1">  

                     <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="userControl1" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)">

                            <SplineDoubleKeyFrame KeyTime="00:00:04" Value="-58" KeySpline="0,0,0,1"/>

                     DoubleAnimationUsingKeyFrames>

                     <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="userControl2" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)">

                            <SplineDoubleKeyFrame KeyTime="00:00:04" Value="180.5" KeySpline="0,1,1,1"/>

                     DoubleAnimationUsingKeyFrames>

                     <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="image" Storyboard.TargetProperty="(FrameworkElement.Width)">

                            <SplineDoubleKeyFrame KeyTime="00:00:04" Value="240" KeySpline="0,1,1,1"/>

                     DoubleAnimationUsingKeyFrames>

                     <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="image" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)">

                            <SplineDoubleKeyFrame KeyTime="00:00:04" Value="-58.5" KeySpline="0,1,1,1"/>

                     DoubleAnimationUsingKeyFrames>

                     <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="image" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)">

                            <SplineDoubleKeyFrame KeyTime="00:00:04" Value="0.5" KeySpline="0,1,1,1"/>