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代码如下

 

<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代码如下：

<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"/>

                     </DoubleAnimationUsingKeyFrames>

              </Storyboard>

       </Window.Resources>

       <Window.Triggers>    <!—动画事件的触发器-->

              <EventTrigger RoutedEvent="FrameworkElement.Loaded">

                     <BeginStoryboard Storyboard="{StaticResource Storyboard1}"/>

              </EventTrigger>

       </Window.Triggers>

       <Window.Background>

              <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

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

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

                     <GradientStop Color="#FF936226" Offset="0.674"/>

                     <GradientStop Color="#FF512B2B" Offset="0.353"/>

              </LinearGradientBrush>

       </Window.Background>

    <Grid>  <!—Grid以及相关的属性 -->

    <Grid.RowDefinitions>

            <RowDefinition Height="0.845*"/>

            <RowDefinition Height="0.155*"/>

    </Grid.RowDefinitions>

        

    <HelloWorld:UserControl1 Margin="101,57.79,0,48.1" d:LayoutOverrides="VerticalAlignment" x:Name="userControl1" RenderTransformOrigin="0.5,0.5" HorizontalAlignment="Left" Width="30"> <!—左边卷轴边缘-->

    <HelloWorld:UserControl1.RenderTransform>

                   <TransformGroup>

                          <ScaleTransform ScaleX="1" ScaleY="1"/>

                          <SkewTransform AngleX="0" AngleY="0"/>

                          <RotateTransform Angle="0"/>

                          <TranslateTransform X="0" Y="0"/>

                   </TransformGroup>

            </HelloWorld:UserControl1.RenderTransform>

    </HelloWorld:UserControl1>

    <HelloWorld:UserControl1 Margin="132,58.29,0,49.29" HorizontalAlignment="Left" Width="30" x:Name="userControl2" RenderTransformOrigin="0.5,0.5"><!—右边卷轴边缘-->

            <HelloWorld:UserControl1.RenderTransform>

                   <TransformGroup>

                          <ScaleTransform ScaleX="1" ScaleY="1"/>

                          <SkewTransform AngleX="0" AngleY="0"/>

                          <RotateTransform Angle="0"/>

                          <TranslateTransform X="0" Y="0"/>

                   </TransformGroup>

            </HelloWorld:UserControl1.RenderTransform>

    </HelloWorld:UserControl1>

    <Button Style="{DynamicResource redbutton}" Content="Click here" Grid.Row="1" Click="Button_Click" />

    <Image Margin="131.798,69.595,0,59.985" Source="Garden.jpg" Stretch="Fill" Width="0.89" x:Name="image" RenderTransformOrigin="0.5,0.5" HorizontalAlignment="Left">  <!—图片-->

            <Image.RenderTransform>

                   <TransformGroup>

                          <ScaleTransform ScaleX="1" ScaleY="1"/>

                          <SkewTransform AngleX="0" AngleY="0"/>

                          <RotateTransform Angle="0"/>

                          <TranslateTransform X="0" Y="0"/>

                   </TransformGroup>

            </Image.RenderTransform>

    </Image>

    </Grid>

</Window>

 

我们可以看到，这个界面的结构很清晰，一共就只有两个控件，一个图片，以及一个按钮组成，他们放在了一个Grid里，并且我对Grid分了行，两个控件和一个图片放在了第一行，而按钮放在了第二行。这就是所有的界面代码，细心的朋友会发现主界面的按钮字体是红色的，为什么呢?呵呵，答案在于这里

Button Style="{DynamicResource redbutton}"

这句是说明了按钮的样式，我设定了按钮的样式是红色字体，字体大小是14，那么是在哪里规定的呢，还记得我们开始的时候有说过app.xaml这个文件么，我们来看一下里面的代码：

对了，我们的样式就是放在这里面的，还有一些笔刷的样式，也可作为资源放在这个文件里面以供我们利用，非常方便的哦~

<Application x:Class="HelloWorld.App"

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

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

    StartupUri="Window1.xaml">

    <Application.Resources>

        <Style x:Key="redbutton" TargetType="Button" >

            <Setter Property="Foreground" Value="Red"/>

            <Setter Property="FontSize" Value="14"/>

        </Style>

    </Application.Resources>

</Application>

 

当然，我们的提示框是后台代码来决定的，大家看window1.cs：

using System;

using System.Collections.Generic;

using System.Linq;

using System.Text;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Data;

using System.Windows.Documents;

using System.Windows.Input;

using System.Windows.Media;

using System.Windows.Media.Imaging;

using System.Windows.Navigation;

using System.Windows.Shapes;

 

namespace HelloWorld

{

    /// <summary>

    /// Window1.xaml 的交互逻辑

    /// </summary>

    public partial class Window1 : Window

    {

        public Window1()

        {

            InitializeComponent();

        }

 

        private void Button_Click(object sender, RoutedEventArgs e)

        {

            MessageBox.Show("大家好~欢迎观看本文~不足之处还请见谅");

        }

    }

}

 

怎么样，是不是非常的简单呢？补充一句，对于WPF，微软还出了一系列的软件叫Expression Studio，来配合我们编写界面。如果你是一个纯正的美工，你也可以直接利用这个系列的软件如Blend和Design来做出好看的界面来哦。而这两款软件前者操作起来非常像flash但要比flash更简单，后者更像PS，但是可能由于还不是很完善，所以我不是很推荐大家使用，那么美工我就强烈推荐这款叫Blend的软件哦，大家记住了么？

由于个人水平有限，难免会出现一些问题，本人这篇文章就算是抛砖引玉吧，希望让入门者对WPF有一些的简单的了解吧，对于高手请给与我一些批评和建议都可以。

 

完整程序以及源代码：

helloworld源程序

 

本文作者系CCMTC会员。作者保留所有权利，转载请注明出处。