一個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會員。作者保留所有權利，轉載請註明出處。