项目模板:
在搭建好开发环境之后,打开VS2008,选择创建项目(Create Project),出现如下图所示的选择项目模板的对话框:
从上面的图中可以看出vs2008有关WPF的项目模板(Project Template)包括:
模板名称 | 说明 |
WPF Application | 使用WPF控件(WPF Control)和事件处理设计用户接口(User Interface) |
WPF Browser Application | 创建一个能在浏览器中运行的WPF应用程序 |
WPF Custom Control Library | 用于创建自定义控件,自定义控件继承Control类,此模板中不能可视化设计 |
WPF User Control Library | 用于创建用户控件,用户控件继承UserControl类,能可视化设计控件 |
其中自定义控件和用户控件的区别在以后的WPF架构中会加以说明,本文暂不追究。
创建第一个WPF应用程序
本文在一个解决方案中创建四个项目(Project),它们分别为:
项目名称 | 项目类型 | 说明 |
Jillzhang.Wpf.HelloWorld | WPF Application | 实现最简单的Hello World的WPF应用程序 |
Jillzhang.Wpf.HelloWorldInBroswer | WPF Browser Application | 实现最简单的Hello World的WPF应用程序,且该程序能在浏览器中 运行 |
Jillzhang.Wpf.CustomControl | WPF Custom Control Library | 只创建自定义控件项目,不做更改 |
Jillzhang.Wpf.UserControlPrj | WPF User Control Library | 只创建用户控件项目,不做更改 |
着重讨论Jillzhang.Wpf.HelloWorld和Jillzhang.Wpf.HelloWorldInBroswer的创建和开发过程。
Jillzhang.Wpf.HelloWorld
在项目模板选择对话框中选择WPF Application,修改项目名称(Name)为:Jillzhang.Wpf.HelloWorld,和存储位置(Location),点击 确定 (OK),便成功创建了一个WPF应用程序,模板中文件层次结构如下图所示:
其中包括四个重要的文件,有关它们的说明分别为:
文件名称 | 说明 |
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窗口的实现类 |
在App.xaml中,指定项目运行时启动的是窗体:Window1,代码如下:
在Window1.xaml中设计窗体的外观,本例中该窗体将窗体分为两行两列,上边一行用于窗体的说明,类似于Banner,而下面一行是一个按钮控件,点击这个按钮,出现Hello World的模式对话框。
首先,我们将窗体的标题更改为:一起学WPF系列(2):第一个WPF应用程序,方法是在xaml中设置Window的Title属性 。下一步来分割窗体来实现两行两列的布局,在WPF中我们可以很方便的布局,本文便利用Gird将整个窗体分为两行两列,代码为:
窗体布局
<Grid>
![](https://i-blog.csdnimg.cn/blog_migrate/5ac224acc83fc5d7fe386a6bc8e9c20e.png)
<Grid.RowDefinitions>
![](https://i-blog.csdnimg.cn/blog_migrate/5ac224acc83fc5d7fe386a6bc8e9c20e.png)
<RowDefinition Height="Auto"/>
![](https://i-blog.csdnimg.cn/blog_migrate/5ac224acc83fc5d7fe386a6bc8e9c20e.png)
<RowDefinition Height="Auto"/>
![](https://i-blog.csdnimg.cn/blog_migrate/5ac224acc83fc5d7fe386a6bc8e9c20e.png)
</Grid.RowDefinitions>
![](https://i-blog.csdnimg.cn/blog_migrate/5ac224acc83fc5d7fe386a6bc8e9c20e.png)
<Grid.ColumnDefinitions>
![](https://i-blog.csdnimg.cn/blog_migrate/5ac224acc83fc5d7fe386a6bc8e9c20e.png)
<ColumnDefinition Width="Auto"/>
![](https://i-blog.csdnimg.cn/blog_migrate/5ac224acc83fc5d7fe386a6bc8e9c20e.png)
<ColumnDefinition Width="Auto"/>
![](https://i-blog.csdnimg.cn/blog_migrate/5ac224acc83fc5d7fe386a6bc8e9c20e.png)
</Grid.ColumnDefinitions>
![](https://i-blog.csdnimg.cn/blog_migrate/5ac224acc83fc5d7fe386a6bc8e9c20e.png)
</Grid>
![](https://i-blog.csdnimg.cn/blog_migrate/5ac224acc83fc5d7fe386a6bc8e9c20e.png)
然后我们分别在第一行第一列中添加一个Logo,在第二行第二列中添加一个文本描述,在第二行中添加一个按钮,代码如下:
窗体元素
<Border BorderBrush="Aqua">
![](https://i-blog.csdnimg.cn/blog_migrate/5ac224acc83fc5d7fe386a6bc8e9c20e.png)
<StackPanel Orientation="Horizontal">
![](https://i-blog.csdnimg.cn/blog_migrate/5ac224acc83fc5d7fe386a6bc8e9c20e.png)
<Image Source="./Resources/wpf.jpg" Stretch="None" Grid.Column="0" Grid.Row="0"/>
![](https://i-blog.csdnimg.cn/blog_migrate/5ac224acc83fc5d7fe386a6bc8e9c20e.png)
<TextBlock Text="一起学WPF系列(2):第一个WPF应用程序" FontSize="18" Grid.Column="1" Margin="25,50,10,10"/>
![](https://i-blog.csdnimg.cn/blog_migrate/5ac224acc83fc5d7fe386a6bc8e9c20e.png)
</StackPanel>
![](https://i-blog.csdnimg.cn/blog_migrate/5ac224acc83fc5d7fe386a6bc8e9c20e.png)
</Border>
![](https://i-blog.csdnimg.cn/blog_migrate/5ac224acc83fc5d7fe386a6bc8e9c20e.png)
<Button Content="点点我" Grid.Column="0" Grid.Row="1" Grid.ColumnSpan="2" Height="50" Margin="5,5,5,5"/>
![](https://i-blog.csdnimg.cn/blog_migrate/5ac224acc83fc5d7fe386a6bc8e9c20e.png)
此时可视化窗体效果为:
到此窗体布局已经完成,下面来添加按钮的点击事件,如图所示,在Button标签中加入Click:
点击New Event Handler,切换到后台.cs文件,别可以看到事件代码: "Hello World!"),我们的第一个WPF应用程序便大功告成了。看看运行效果吧:
private
void
Button_Click(
object
sender, RoutedEventArgs e)
![](https://i-blog.csdnimg.cn/blog_migrate/5ac224acc83fc5d7fe386a6bc8e9c20e.png)
![](https://i-blog.csdnimg.cn/blog_migrate/3d581bf6bb06322e5331c521a6ffcb65.png)
{
![](https://i-blog.csdnimg.cn/blog_migrate/e8aba98c5559ed0ae9826cfc177226fe.png)
}
在Button_Click中添加MessageBox.Show(
完整的代码为:App.xaml和App.xaml.cs保持创建的时候不变。
Window1.xaml:
Window1.xaml
<Window x:Class="Jillzhang.Wpf.HelloWorld.Window1"
![](https://i-blog.csdnimg.cn/blog_migrate/5ac224acc83fc5d7fe386a6bc8e9c20e.png)
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
![](https://i-blog.csdnimg.cn/blog_migrate/5ac224acc83fc5d7fe386a6bc8e9c20e.png)
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
![](https://i-blog.csdnimg.cn/blog_migrate/5ac224acc83fc5d7fe386a6bc8e9c20e.png)
Title="一起学WPF系列(2):第一个WPF应用程序" SizeToContent="WidthAndHeight"
![](https://i-blog.csdnimg.cn/blog_migrate/5ac224acc83fc5d7fe386a6bc8e9c20e.png)
WindowStartupLocation="CenterScreen">
![](https://i-blog.csdnimg.cn/blog_migrate/5ac224acc83fc5d7fe386a6bc8e9c20e.png)
<Grid>
![](https://i-blog.csdnimg.cn/blog_migrate/5ac224acc83fc5d7fe386a6bc8e9c20e.png)
<Grid.RowDefinitions>
![](https://i-blog.csdnimg.cn/blog_migrate/5ac224acc83fc5d7fe386a6bc8e9c20e.png)
<RowDefinition Height="Auto"/>
![](https://i-blog.csdnimg.cn/blog_migrate/5ac224acc83fc5d7fe386a6bc8e9c20e.png)
<RowDefinition Height="Auto"/>
![](https://i-blog.csdnimg.cn/blog_migrate/5ac224acc83fc5d7fe386a6bc8e9c20e.png)
</Grid.RowDefinitions>
![](https://i-blog.csdnimg.cn/blog_migrate/5ac224acc83fc5d7fe386a6bc8e9c20e.png)
<Grid.ColumnDefinitions>
![](https://i-blog.csdnimg.cn/blog_migrate/5ac224acc83fc5d7fe386a6bc8e9c20e.png)
<ColumnDefinition Width="Auto"/>
![](https://i-blog.csdnimg.cn/blog_migrate/5ac224acc83fc5d7fe386a6bc8e9c20e.png)
<ColumnDefinition Width="Auto"/>
![](https://i-blog.csdnimg.cn/blog_migrate/5ac224acc83fc5d7fe386a6bc8e9c20e.png)
</Grid.ColumnDefinitions>
![](https://i-blog.csdnimg.cn/blog_migrate/5ac224acc83fc5d7fe386a6bc8e9c20e.png)
<Border BorderBrush="Aqua">
![](https://i-blog.csdnimg.cn/blog_migrate/5ac224acc83fc5d7fe386a6bc8e9c20e.png)
<StackPanel Orientation="Horizontal">
![](https://i-blog.csdnimg.cn/blog_migrate/5ac224acc83fc5d7fe386a6bc8e9c20e.png)
<Image Source="./Resources/wpf.jpg" Stretch="None" Grid.Column="0" Grid.Row="0"/>
![](https://i-blog.csdnimg.cn/blog_migrate/5ac224acc83fc5d7fe386a6bc8e9c20e.png)
<TextBlock Text="一起学WPF系列(2):第一个WPF应用程序" FontSize="18" Grid.Column="1" Margin="25,50,10,10"/>
![](https://i-blog.csdnimg.cn/blog_migrate/5ac224acc83fc5d7fe386a6bc8e9c20e.png)
</StackPanel>
![](https://i-blog.csdnimg.cn/blog_migrate/5ac224acc83fc5d7fe386a6bc8e9c20e.png)
</Border>
![](https://i-blog.csdnimg.cn/blog_migrate/5ac224acc83fc5d7fe386a6bc8e9c20e.png)
<Button Content="点点我" Grid.Column="0" Grid.Row="1" Grid.ColumnSpan="2" Height="50" Margin="5,5,5,5" Click="Button_Click"/>
![](https://i-blog.csdnimg.cn/blog_migrate/5ac224acc83fc5d7fe386a6bc8e9c20e.png)
</Grid>
![](https://i-blog.csdnimg.cn/blog_migrate/5ac224acc83fc5d7fe386a6bc8e9c20e.png)
</Window>
![](https://i-blog.csdnimg.cn/blog_migrate/5ac224acc83fc5d7fe386a6bc8e9c20e.png)
Window1.xaml.cs
Window1.xaml.cs
using System;
![](https://i-blog.csdnimg.cn/blog_migrate/5ac224acc83fc5d7fe386a6bc8e9c20e.png)
using System.Collections.Generic;
![](https://i-blog.csdnimg.cn/blog_migrate/5ac224acc83fc5d7fe386a6bc8e9c20e.png)
using System.Linq;
![](https://i-blog.csdnimg.cn/blog_migrate/5ac224acc83fc5d7fe386a6bc8e9c20e.png)
using System.Text;
![](https://i-blog.csdnimg.cn/blog_migrate/5ac224acc83fc5d7fe386a6bc8e9c20e.png)
using System.Windows;
![](https://i-blog.csdnimg.cn/blog_migrate/5ac224acc83fc5d7fe386a6bc8e9c20e.png)
using System.Windows.Controls;
![](https://i-blog.csdnimg.cn/blog_migrate/5ac224acc83fc5d7fe386a6bc8e9c20e.png)
using System.Windows.Data;
![](https://i-blog.csdnimg.cn/blog_migrate/5ac224acc83fc5d7fe386a6bc8e9c20e.png)
using System.Windows.Documents;
![](https://i-blog.csdnimg.cn/blog_migrate/5ac224acc83fc5d7fe386a6bc8e9c20e.png)
using System.Windows.Input;
![](https://i-blog.csdnimg.cn/blog_migrate/5ac224acc83fc5d7fe386a6bc8e9c20e.png)
using System.Windows.Media;
![](https://i-blog.csdnimg.cn/blog_migrate/5ac224acc83fc5d7fe386a6bc8e9c20e.png)
using System.Windows.Media.Imaging;
![](https://i-blog.csdnimg.cn/blog_migrate/5ac224acc83fc5d7fe386a6bc8e9c20e.png)
using System.Windows.Navigation;
![](https://i-blog.csdnimg.cn/blog_migrate/5ac224acc83fc5d7fe386a6bc8e9c20e.png)
using System.Windows.Shapes;
![](https://i-blog.csdnimg.cn/blog_migrate/5ac224acc83fc5d7fe386a6bc8e9c20e.png)
![](https://i-blog.csdnimg.cn/blog_migrate/5ac224acc83fc5d7fe386a6bc8e9c20e.png)
namespace Jillzhang.Wpf.HelloWorld
![](https://i-blog.csdnimg.cn/blog_migrate/5ac224acc83fc5d7fe386a6bc8e9c20e.png)
![](https://i-blog.csdnimg.cn/blog_migrate/3d581bf6bb06322e5331c521a6ffcb65.png)
![](https://i-blog.csdnimg.cn/blog_migrate/40a645e6233441fb2930b38ca77854d1.png)
{
![](https://i-blog.csdnimg.cn/blog_migrate/e8aba98c5559ed0ae9826cfc177226fe.png)
![](https://i-blog.csdnimg.cn/blog_migrate/655c78ee74d6345fd7308897ee213402.png)
/**//// <summary>
![](https://i-blog.csdnimg.cn/blog_migrate/e8aba98c5559ed0ae9826cfc177226fe.png)
/// Interaction logic for Window1.xaml
![](https://i-blog.csdnimg.cn/blog_migrate/e8aba98c5559ed0ae9826cfc177226fe.png)
/// </summary> ![](https://i-blog.csdnimg.cn/blog_migrate/e8aba98c5559ed0ae9826cfc177226fe.png)
public partial class Window1 : Window
![](https://i-blog.csdnimg.cn/blog_migrate/e8aba98c5559ed0ae9826cfc177226fe.png)
![](https://i-blog.csdnimg.cn/blog_migrate/655c78ee74d6345fd7308897ee213402.png)
![](https://i-blog.csdnimg.cn/blog_migrate/191ea32915d37c6642fa163e7b7eda3e.png)
{
![](https://i-blog.csdnimg.cn/blog_migrate/e8aba98c5559ed0ae9826cfc177226fe.png)
public Window1()
![](https://i-blog.csdnimg.cn/blog_migrate/e8aba98c5559ed0ae9826cfc177226fe.png)
![](https://i-blog.csdnimg.cn/blog_migrate/655c78ee74d6345fd7308897ee213402.png)
![](https://i-blog.csdnimg.cn/blog_migrate/191ea32915d37c6642fa163e7b7eda3e.png)
{
![](https://i-blog.csdnimg.cn/blog_migrate/e8aba98c5559ed0ae9826cfc177226fe.png)
InitializeComponent();
![](https://i-blog.csdnimg.cn/blog_migrate/e8aba98c5559ed0ae9826cfc177226fe.png)
}
![](https://i-blog.csdnimg.cn/blog_migrate/e8aba98c5559ed0ae9826cfc177226fe.png)
![](https://i-blog.csdnimg.cn/blog_migrate/e8aba98c5559ed0ae9826cfc177226fe.png)
private void Button_Click(object sender, RoutedEventArgs e)
![](https://i-blog.csdnimg.cn/blog_migrate/e8aba98c5559ed0ae9826cfc177226fe.png)
![](https://i-blog.csdnimg.cn/blog_migrate/655c78ee74d6345fd7308897ee213402.png)
![](https://i-blog.csdnimg.cn/blog_migrate/191ea32915d37c6642fa163e7b7eda3e.png)
{
![](https://i-blog.csdnimg.cn/blog_migrate/e8aba98c5559ed0ae9826cfc177226fe.png)
MessageBox.Show("Hello World!");
![](https://i-blog.csdnimg.cn/blog_migrate/e8aba98c5559ed0ae9826cfc177226fe.png)
}
![](https://i-blog.csdnimg.cn/blog_migrate/e8aba98c5559ed0ae9826cfc177226fe.png)
}
![](https://i-blog.csdnimg.cn/blog_migrate/e8aba98c5559ed0ae9826cfc177226fe.png)
}
![](https://i-blog.csdnimg.cn/blog_migrate/5ac224acc83fc5d7fe386a6bc8e9c20e.png)
而WPF在浏览器中的应用程序Jillzhang.Wpf.HelloWorldInBroswer的创建方法和Windows中的基本类似,只是将Windows更改为Page,其他的在本范例中大同小异,实现后的效果图为: