创建一个WPF应用程序
使用WPF(Windows Presentation Foundation),您可以创建两种主要类型的应用程序:安装应用程序和 Web 浏览器的应用程序。两者之间的主要区别在于它们的托管方式,以及是否支持页面到页面之间的导航。Microsoft Visual Studio 2008为这两种应用都提供了模板。
在本实验室,我们将一起创建一个安装应用程序,最后将其通过ClickOnce或MSI部署安装到用户的操作系统,并托管在一个独立的窗口之中。这种类型的应用程序对最终用户的系统资源有完全访问权限,在部署之前也必须获得用户的许可。
1.创建基本应用
(1)启动Microsoft Visual Studio 2008
(2)使用C# “WPF Application”模板创建一个新项目。将其命名为’AddressBook’。这一步将搭建应用程序的基本骨架。
(3)地址簿应用程序会帮助您管理您的联系人。在项目中添加一个新的C#类。您可以通过Solution Explorer,在’AddressBook’项目上点击右键,选择Add?New Item,然后在对话框中选择'Class‘。我们将它命名为Contact.cs,并在文件里建立我们的数据模型:
using
System;
using
System.Collections.ObjectModel;
namespace
AddressBook
{
///
<summary>
///
Contact value object
///
</summary>
public
class
Contact
{
///
<summary>
///
First name of contact
///
</summary>
public
String FirstName
{
get
;
set
;
}
///
<summary>
///
Last name of contact
///
</summary>
public
String LastName
{
get
;
set
;
}
///
<summary>
///
Email address of contact
///
</summary>
public
String EmailAddress
{
get
;
set
;
}
///
<summary>
///
Home page
///
</summary>
public
Uri HomePage
{
get
;
set
;
}
///
<summary>
///
Home address
///
</summary>
public
string
HomeAddress
{
get
;
set
;
}
///
<summary>
///
Business address
///
</summary>
public
string
BusinessAddress
{
get
;
set
;
}
}
///
<summary>
///
This collection will hold all of our contacts in the
///
address book
///
</summary>
public
class
ContactList : ObservableCollection
<
Contact
>
{
public
ContactList()
:
base
()
{
}
}
}
您会注意到ContactList这个类继承了ObservableCollection ,因此为数据上下文提供了可绑定的数据集合。DataContext属性用来指定绑定的数据源。使用WPF数据集合特性,您的应用程序可以自动对集合中单一数据项的更新做出反应,也可以自动对整个集合的更新做出反应。数据集合也可以支持在不修改集合中数据的情况下进行排序、过滤和浏览。ObservableCollection 是WPF对数据集合的内置实现。在任务2里我们会集中于数据绑定的实现。
(4)现在让我们定义联系人的集合。您需要在项目中添加一个新的文本文件contacts.txt。您可以通过Solution Explorer,右键点击项目,选择Add?New Item随后在对话框中选择’Text File‘。将以下内容复制到文件里:
Joe;Developer;[email protected];http:
//
spaces.msn.com;1 North First St, Redmond, WA 98052; 2 South First St, Redmond, WA 98052
Jane;Tester;[email protected];http:
//
spaces.msn.com;101 Baker St, Bellevue, WA 98055; 202 Smith St, Redmond, WA 98052
每行都是一个联系人的信息。一旦contacts.txt文件被创建,在Solution Explorer里选中它。文件的属性会出现在下方的Properties窗口。如果这个窗口没有出现,请右键点击这个文件,选择Properties。
·请注意Build Action这个属性的值是’Content’。这个值告诉WPF的MSBuild系统,把这个文件作为伴随应用程序的松散内容。
·Copy to Output Directory这个属性的值是’Do not copy‘,请把它改成’Copy if newer’。这一步确保一旦contacts.txt文件被修改了,新的版本会被复制到版本的输出目录里。
![详细解析WPF中的应用程序模型_第1张图片](http://img.e-com-net.com/image/product/07bb1e2d00b547c7b3c5581690b3e042.jpg)
(5)为了控制应用程序启动和退出时的操作,我们下面要处理Application Startup和Exit事件。请在App.xaml.cs中添加下面的代码:
public
App()
{
}
void
AppStartup(
object
sender, StartupEventArgs args)
{
MainWindow mainWindow
=
new
MainWindow();
mainWindow.WindowStartupLocation
=
WindowStartupLocation.CenterScreen;
mainWindow.Show();
}
private
void
AppExit(Object sender, ExitEventArgs e)
{
}
双击MyApp.xaml察看XAML,将以下标记语句添加到MyApp.xaml里,这样Startup事件就与代码绑定了。您需要删除StartupUri属性,以便由Startup事件的代码来处理MainWindow的加载工作。
<
Application
x:Class
="AddressBook.App"
xmlns:x
="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns
="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
StartupUri
="MainWindow.xaml"
Startup
="AppStartup"
Exit
="AppExit"
>
<
Application
.Resources
>
</
Application.Resources
>
</
Application
>
(6)下面我们创建基本的UI。UI由一个Window组成,Window里有一个Grid并进一步包含一个DockPanel。DockPanel用来显示菜单栏,工具栏,状态栏,和一个罗列所有联系人的左面板。右边的面板则用来显示当前选中的联系人的详细信息。
在MainWindow.xaml文件里,我们从外层的Grid开始。首先将它命名为DocumentRoot:当您双击MainWindow.xaml时,您会同时看到Design选项卡和XAML选项卡。请选择XAML选项卡来编辑xaml:
<
Window
x:Class
="AddressBook.MainWindow"
xmlns
="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x
="http://schemas.microsoft.com/winfx/2006/xaml"
Title
="AddressBook"
Loaded
="WindowLoaded"
SizeToContent
="WidthAndHeight"
MinWidth
="640"
MinHeight
="480"
>
<
Grid
Background
="White"
Name
="DocumentRoot"
>
<
Grid
.ColumnDefinitions
>
<
ColumnDefinition
Width
="200"
/>
<
ColumnDefinition
Width
="*"
/>
</
Grid.ColumnDefinitions
>
<
Grid
.RowDefinitions
>
<
RowDefinition
Height
="Auto"
/>
<!--
Menu
-->
<
RowDefinition
Height
="Auto"
/>
<!--
Tool Bar
-->
<
RowDefinition
Height
="*"
/>
<!--
Content Area
-->
<
RowDefinition
Height
="Auto"
/>
<!--
Status Bar
-->
</
Grid.RowDefinitions
>
</
Grid
>
</
Window
>
(7)我们所有的界面和UI元素都会放在DocumentRoot这个Grid里面。下面,我们创建一个DockPanel_Menu放菜单栏。顶层MenuItems有两个:File和Edit,每个菜单项都会包含若干子MenuItems:
<!
—Menu Bar--
>
<
DockPanel
Name
="DockPanel_Menu"
Grid.Column
="0"
Grid.ColumnSpan
="2"
Grid.Row
="0"
>
<
Menu
Background
="White"
>
<
MenuItem
Header
="File"
>
<
MenuItem
Header
="New Contact"
Click
="LaunchNewContactWizard"
/>
<
MenuItem
Header
="New Group"
Click
="NotImplementedMsg"
/>
<
Separator
/>
<
MenuItem
Header
="Properties"
Click
="NotImplementedMsg"
/>
<
MenuItem
Header
="Delete"
Click
="NotImplementedMsg"
/>
<
MenuItem
Header
="Import"
>
<
MenuItem
Header
="Address book (WAB)..."
Click
="NotImplementedMsg"
/>
<
MenuItem
Header
="Business card vCard)..."
Click
="NotImplementedMsg"
/>
</
MenuItem
>
<
Separator
/>
<
MenuItem
Header
="Exit"
InputGestureText
="Alt-F4"
Click
="ExitApplication"
>
<
MenuItem
.ToolTip
>
<
ToolTip
>
Click here to exit
</
ToolTip
>
</
MenuItem.ToolTip
>
</
MenuItem
>
</
MenuItem
>
</
Menu
>
<
Menu
Background
="White"
>
<
MenuItem
Header
="Edit"
>
<
MenuItem
Command
="ApplicationCommands.Copy"
/>
<
MenuItem
Command
="ApplicationCommands.Paste"
/>
</
MenuItem
>
</
Menu
>
</
DockPanel
>
(8)下一步是工具栏。ToolBar有两个Buttons,允许您添加和删除联系人。我们稍后会实现添加的功能。至于删除,暂时由我们在上一步定义的NotImplementedMsg事件处理方法来处理。
<!--
Tool Bar
-->
<
DockPanel
Name
="DockPanel_Toolbar"
Grid.Column
="0"
Grid.ColumnSpan
="2"
Grid.Row
="1"
>
<
ToolBar
>
<
Button
Click
="LaunchNewContactWizard"
ToolTip
="Add Contact"
>
+
</
Button
>
<
Button
Click
="NotImplementedMsg"
ToolTip
="Delete Contact"
>
-
</
Button
>
</
ToolBar
>
</
DockPanel
>
(9)左边的面板是这个地址簿应用程序的主要窗口,用来列出所有的联系人。我们使用ListBox,每个联系人的FirstName都是一个ListItem项。暂时让我们关注ListBox和DockPanel,稍后再回来看数据绑定。
既然看到这儿了,我们顺便为联系人列表定义一个上下文菜单。这样就可以添加一个联系人或者添加一个组了:
<!--
Left Pane for contact list view
-->
<
DockPanel
Name
="DockPanel_LeftPane"
Grid.Column
="0"
Grid.Row
="2"
>
<
ListBox
Name
="allContacts"
SelectionChanged
="ListItemSelected"
>
<
ListBox
.ContextMenu
>
<
ContextMenu
>
<
MenuItem
Header
="Add a Contact"
Click
="LaunchNewContactWizard"
/>
<
MenuItem
Header
="Add a Group"
Click
="NotImplementedMsg"
/>
</
ContextMenu
>
</
ListBox.ContextMenu
>
</
ListBox
>
</
DockPanel
>
(10)主窗口UI上另一个关键元素是状态栏。让我们在StatusBar元素里放置一个TextBlock:
<!--
Status Bar
-->
<
DockPanel
Name
="DockPanel_Statusbar"
Grid.Column
="0"
Grid.ColumnSpan
="2"
Grid.Row
="3"
>
<
StatusBar
BorderBrush
="Black"
BorderThickness
="1"
>
<
TextBlock
Name
="tb"
Foreground
="Black"
>
Status bar
</
TextBlock
>
</
StatusBar
>
</
DockPanel
>
(11)最后是右手边的窗口框。在左边ListItems显示之后,选择一条联系人,就会在右手边的这个Frame_RightPane里显示这个联系人的详细信息:
<!--
RightPanel
-->
<
Frame
Name
="Frame_RightPane"
Grid.Column
="1"
Grid.Row
="2"
/>
(12)到此为止,我们已经在XAML里完成了UI元素的添加,是时候看看后面的代码了。在MainWindow.xaml.cs文件里,为MainWindow这个类添加ExitApplication,NotImplementedMsg,WindowLoaded,ListItemSelected和LaunchNewContactWizard方法。您会注意到后三个方法的实现是空的。我们稍后再添加这部分逻辑。
//
//
Triggered on Window load. Sets the ContactList collection
//
as the Data Context.
//
private
void
WindowLoaded(
object
sender, RoutedEventArgs e)
{
}
//
//
Triggers application shutdown
//
void
ExitApplication(
object
sender, RoutedEventArgs e)
{
this
.Close();
}
//
//
Shows a message box informing user that a feature
//
hasn't been implemented.
//
void
NotImplementedMsg(
object
sender, RoutedEventArgs e)
{
MessageBox.Show(
"
This feature has not been implemented.
"
,
"
Not Implemented
"
);
}
//
//
Triggered when an item in the Contacts list is selected
//
void
ListItemSelected(
object
sender,
SelectionChangedEventArgs args)
{
}
//
//
Triggered when context menu or other toolbar option
//
is clicked to launch
//
'Create a new contact' dialog
//
private
void
LaunchNewContactWizard(
object
sender,
RoutedEventArgs e)
{
}
(13)生成并运行您的应用程序。地址簿应用程序的基本框架已经搭好了。因为我们尚未初始化或使用联系人的信息,您在程序的左右面板上不会看到任何数据。在这一步,您的应用程序看上去是这样的:
![详细解析WPF中的应用程序模型_第2张图片](http://img.e-com-net.com/image/product/06b786d0d49a4659a275139d9a3366a1.jpg)
2. 使用Property Bag来存储联系人的集合
(1)在程序启动的时候,应用程序必须从文件中读出联系人的信息,并初始化ContactList对象。打开App.xaml.cs文件并编辑。ReadContactsFromFile方法会从文件中读出数据。在类里添加这个方法,并添加一个辅助方法来把数据转化成联系人对象:
//
//
Reads contact information from file
//
private
ContactList ReadContactsFromFile()
{
ContactList contactList
=
new
ContactList();
//
Create an instance of StreamReader to read from a file.
//
The using statement also closes the StreamReader.
using
(StreamReader sr
=
new
StreamReader(
"
contacts.txt
"
))
{
String line;
//
Read and display lines from the file until the
//
end of the file is reached.
while
((line
=
sr.ReadLine())
!=
null
)
{
contactList.Add(CreateContactFromLine(line));
}
}
return
contactList;
}
//
//
De-tokenize one line of contact information and
//
hydrate a Contact object
//
private
Contact CreateContactFromLine(
string
line)
{
string
[] tokens
=
line.Split(
new
char
[] {
'
;
'
});
if
(tokens.Length
!=
6
)
{
throw
new
ApplicationException(
String.Format(
"
Input contact file format.
"
+
"
Expected tokens {0}; Actual tokens {1}
"
,
6
,
tokens.Length));
}
Contact contact
=
new
Contact();
contact.FirstName
=
tokens[
0
];
contact.LastName
=
tokens[
1
];
contact.EmailAddress
=
tokens[
2
];
contact.HomePage
=
(String.IsNullOrEmpty(tokens[
3
])
?
null
:
new
Uri(tokens[
3
], UriKind.Absolute));
contact.HomeAddress
=
tokens[
4
];
contact.BusinessAddress
=
tokens[
5
];
return
contact;
}
ReadContactFromFile方法使用System.IO.StreamReader。请确认您在命名空间声明处使用了System.IO:
using System.IO;
(2)下面我们把ReadContactsFromFile方法返回的ContactList数据,添加到应用程序Property Bag里面。如下修改AppStartup方法:
//
//
Triggered on application startup. Positions the window,
//
Initializes the contact list model and adds it to the
//
Property Bag.
//
void
AppStartup(
object
sender, StartupEventArgs args)
{
//
initialize the Contacts collection using data from file
ContactList contactList
=
ReadContactsFromFile();
//
add it to the Property Bag
this
.Properties[
"
ContactList
"
]
=
contactList;
MainWindow mainWindow
=
new
MainWindow();
//
make sure the window appears in the center of the screen
mainWindow.WindowStartupLocation
=
WindowStartupLocation.CenterScreen;
mainWindow.Show();
}
(3)让我们顺便在这里创建一个方法,来把联系人数据的更新存回到contacts.txt文件里。因为逻辑非常简单且与本实验关系不大,我们这里就不去实现它了:
//
//
Persists changes from ContactList object in Property Bag
//
to file.
//
private
void
SaveContactsToFile(
string
fileName)
{
}
(4) 生成并运行应用程序。此时的UI看上去应该和上一个任务结束时没什么不同,看上去我们好像没有什么进展。别着急!
转自:http://tech.sina.com.cn/s/2009-12-04/07281160468.shtml