第一个WPF应用程序

项目模板：
在搭建好开发环境之后，打开VS2008,选择创建项目(Create Project),出现如下图所示的选择项目模板的对话框：

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

其中自定义控件和用户控件的区别在以后的WPF架构中会加以说明，本文暂不追究。

创建第一个WPF应用程序

本文在一个解决方案中创建四个项目(Project),它们分别为：

着重讨论Jillzhang.Wpf.HelloWorld和Jillzhang.Wpf.HelloWorldInBroswer的创建和开发过程。

Jillzhang.Wpf.HelloWorld

在项目模板选择对话框中选择WPF Application,修改项目名称(Name)为：Jillzhang.Wpf.HelloWorld,和存储位置(Location),点击 确定 （OK）,便成功创建了一个WPF应用程序，模板中文件层次结构如下图所示：

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

在App.xaml中，指定项目运行时启动的是窗体：Window1,代码如下：

在Window1.xaml中设计窗体的外观，本例中该窗体将窗体分为两行两列，上边一行用于窗体的说明，类似于Banner，而下面一行是一个按钮控件，点击这个按钮，出现Hello World的模式对话框。

首先，我们将窗体的标题更改为：一起学WPF系列（2）：第一个WPF应用程序，方法是在xaml中设置Window的Title属性 。下一步来分割窗体来实现两行两列的布局，在WPF中我们可以很方便的布局，本文便利用Gird将整个窗体分为两行两列，代码为：

窗体布局
<Grid> 

<Grid.RowDefinitions> 

<RowDefinition Height="Auto"/> 

<RowDefinition Height="Auto"/> 

</Grid.RowDefinitions> 

<Grid.ColumnDefinitions> 

<ColumnDefinition Width="Auto"/> 

<ColumnDefinition Width="Auto"/> 

</Grid.ColumnDefinitions> 

</Grid> 

然后我们分别在第一行第一列中添加一个Logo,在第二行第二列中添加一个文本描述，在第二行中添加一个按钮，代码如下：

窗体元素
<Border BorderBrush="Aqua"> 

<StackPanel Orientation="Horizontal"> 

<Image Source="./Resources/wpf.jpg" Stretch="None" Grid.Column="0" Grid.Row="0"/> 

<TextBlock Text="一起学WPF系列（2）：第一个WPF应用程序" FontSize="18" Grid.Column="1" Margin="25,50,10,10"/> 

</StackPanel> 

</Border> 

<Button Content="点点我" Grid.Column="0" Grid.Row="1" Grid.ColumnSpan="2" Height="50" Margin="5,5,5,5"/> 

此时可视化窗体效果为：

到此窗体布局已经完成，下面来添加按钮的点击事件，如图所示，在Button标签中加入Click：

点击New Event Handler,切换到后台.cs文件，别可以看到事件代码： "Hello World!"),我们的第一个WPF应用程序便大功告成了。看看运行效果吧：

private void Button_Click(object sender, RoutedEventArgs e) 

{  

} 

在Button_Click中添加MessageBox.Show(

完整的代码为：App.xaml和App.xaml.cs保持创建的时候不变。

Window1.xaml：

Window1.xaml
<Window x:Class="Jillzhang.Wpf.HelloWorld.Window1" 

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

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

Title="一起学WPF系列（2）：第一个WPF应用程序" SizeToContent="WidthAndHeight" 

WindowStartupLocation="CenterScreen"> 

<Grid> 

<Grid.RowDefinitions> 

<RowDefinition Height="Auto"/> 

<RowDefinition Height="Auto"/> 

</Grid.RowDefinitions> 

<Grid.ColumnDefinitions> 

<ColumnDefinition Width="Auto"/> 

<ColumnDefinition Width="Auto"/> 

</Grid.ColumnDefinitions> 

<Border BorderBrush="Aqua"> 

<StackPanel Orientation="Horizontal"> 

<Image Source="./Resources/wpf.jpg" Stretch="None" Grid.Column="0" Grid.Row="0"/> 

<TextBlock Text="一起学WPF系列（2）：第一个WPF应用程序" FontSize="18" Grid.Column="1" Margin="25,50,10,10"/> 

</StackPanel> 

</Border> 

<Button Content="点点我" Grid.Column="0" Grid.Row="1" Grid.ColumnSpan="2" Height="50" Margin="5,5,5,5" Click="Button_Click"/> 

</Grid> 

</Window> 

Window1.xaml.cs

Window1.xaml.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 Jillzhang.Wpf.HelloWorld 

{ 

/**//// <summary> 

/// Interaction logic for Window1.xaml 

/// </summary> 

public partial class Window1 : Window 

{ 

public Window1() 

{ 

InitializeComponent(); 

} 

 

private void Button_Click(object sender, RoutedEventArgs e) 

{ 

MessageBox.Show("Hello World!"); 

} 

} 

} 

而WPF在浏览器中的应用程序Jillzhang.Wpf.HelloWorldInBroswer的创建方法和Windows中的基本类似，只是将Windows更改为Page,其他的在本范例中大同小异，实现后的效果图为：