如何使用 MVVM 为 Windows Phone 8 创建本地数据库应用

在此过程中，您将修改或创建以下代码文件：

MainPage.xaml：修改应用的主页以添加透视控件，该控件显示按以下类别分组的待办事项任务：all、home、work 和 hobbies。

NewTaskPage.xaml：添加此页面以提供向数据库添加新任务的 UI。此页使用 Windows Phone 工具包 ListPicker 控件指定与任务关联的类别。

Model\ToDoDataContext.cs：创建此类文件以指定表示本地数据库的 LINQ to SQL 数据上下文和对象模型。对于 MVVM，此类是数据模型。

ViewModel\ToDoViewModel.cs：创建此类文件以表示该应用的 ViewModel。此类包含几个可观察集合，用于按类别分组待办事项任务。ViewModel 还提供了对数据库执行添加和删除 *** 作的方法。

App.xaml.cs：修改此文件以创建在整个应用中访问的本地数据库和静态 ViewModel。

MainPage.xaml.cs：修改此页面以将页面的 DataContext 属性设置为应用 ViewModel 并处理 add 和 delete 按键的点按事件。

NewTaskPage.xaml.cs：修改此页以将页面的 DataContext 属性设置为应用 ViewModel 并处理 ok 和 cancel 按键的点按事件。

准备应用程序

在本节中，将创建应用、安装 Windows Phone 工具包、设置程序集引用和添加应用使用的图标。

创建应用的步骤

若使用 Windows Phone SDK，则使用 Windows Phone 应用 模板创建新项目。

安装 Windows Phone 工具包的步骤

Windows Phone 工具包未包括在 Windows Phone SDK 中。您应单独访问 Codeplex 和下载 Windows Phone 工具包。导航至该网站并按照说明安装它。

说明注意：

您可以用不同的方式安装该工具包。本主题假设您的应用者神具有对 Windows Phone 工具包 Microsoft.Phone.Controls.Toolkit.dll 的引用。

设置程序集引用

该应用需要引用适用于 Windows Phone 的 LINQ to SQL 程序集。从“项目”菜单中，单击“添加引用”，从“程序集/框架”列表中选择“System.Data.Linq”，然后单击“确定”。

说明注意：

当面向 Windows Phone 8 时，使用 Windows Phone 应用 模板的新应用自袜嫌档动引用该程序集。

若要使用 Pivot 控件，该应用需要引用 Windows Phone 控件程序集。从“项目”菜单中，单击“添加引用”，从“.NET”选项卡中选择“Microsoft.Phone.Controls”，然后单击“确定”。

添加应用所使用的图标

在“解决方案资源管理器”中，右键单击项目，选择“添加”，然后选择“新建文件夹”。

将新文件夹命名为 Images。

在“解决方案资源管理器”中，右键单击 Images 文件夹，并选择“添加”告乱，然后选择“现有项”。这将打开“添加现有项”菜单，从中您可以选择应用使用的图标。

在“添加现有项”窗口中，导航到以下路径以选择这些图标。此步骤假定采用的是以默认方式安装的 Visual Studio。如果您将其安装在其他位置，则在相应的位置查找图标。

C:\Program Files (x86)\Microsoft SDKs\Windows Phone\v8.0\Icons\dark

从该文件夹中，选择以下图标：

appbar.add.rest.png

appbar.cancel.rest.png

appbar.check.rest.png

appbar.delete.rest.png

这些图标是专门用深色背景设计的并且颜色为白色；在白色的“添加现有项”窗口背景上图标可能显示为空白。

在“解决方案资源管理器”中，右键单击每个图标并设置文件属性，以便将图标生成为“内容”，并始终复制到输出目录（“始终复制”）。

创建应用 UI

在本节中，将为该应用的主页和新任务页创建 UI。对于 MVVM，该应用页面为视图。主页演示如何使用

Pivot

控件显示数据。新任务页演示如何使用 Windows Phone 工具包中的

ListPicker

控件选择数据。

创建主页 UI

在应用的主页 MainPage.xaml 中，向位于页面顶部的

phone:PhoneApplicationPage

元素添加以下属性。

XAML

xmlns:controls="clr-namespace:Microsoft.Phone.Controlsassembly=Microsoft.Phone.Controls"

在使用

Pivot

控件时需要该命名空间。

在 MainPage.xaml 中名为

LayoutRoot

的网格上方，添加以下资源元素。

XAML

<phone:PhoneApplicationPage.Resources>

<DataTemplate x:Key="ToDoListBoxItemTemplate">

<Grid HorizontalAlignment="Stretch" Width="420">

<Grid.ColumnDefinitions>

<ColumnDefinition Width="100" />

<ColumnDefinition Width="*" />

<ColumnDefinition Width="Auto" />

<ColumnDefinition Width="100" />

</Grid.ColumnDefinitions>

<CheckBox

IsChecked="{Binding IsComplete, Mode=TwoWay}"

Grid.Column="0" VerticalAlignment="Top"/>

<TextBlock

Text="{Binding ItemName}"

FontSize="{StaticResource PhoneFontSizeLarge}"

Grid.Column="1" Grid.ColumnSpan="2"

VerticalAlignment="Top" Margin="-36, 12, 0, 0"/>

<Button

Grid.Column="3"

x:Name="deleteTaskButton"

BorderThickness="0"

Margin="0, -18, 0, 0"

Click="deleteTaskButton_Click">

<Image

Source="/Images/appbar.delete.rest.png"

Height="75"

Width="75"/>

</Button>

</Grid>

</DataTemplate>

</phone:PhoneApplicationPage.Resources>

每个透视页面都可重复使用此项目模板来显示本地数据库中的一行数据，即一个待办事项任务。每行都包括一个将任务标记为已完成的

CheckBox

、一个显示待办事项任务文本的

TextBlock

和一个允许删除任务的

Button

。使用对任务的

IsCompleted

属性的双向绑定配置

CheckBox

。当您在 UI 中关闭任务时，ViewModel 中任务绑定到的相应可观察集合将自动捕获新值。

Textblock

被绑定到任务的

ItemName

属性。

在“MainPage.xaml”中，使用以下代码替换名为

LayoutRoot

的网格。该代码应该添加在上一步骤中添加的资源元素的下面。

XAML

<!--LayoutRoot is the root grid where all page content is placed.-->

<Grid x:Name="LayoutRoot" Background="Transparent">

<Grid.RowDefinitions>

<RowDefinition Height="Auto"/>

<RowDefinition Height="*"/>

</Grid.RowDefinitions>

<!--TitlePanel contains the name of the application and page title.-->

<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">

<TextBlock

x:Name="ApplicationTitle"

Text="LOCAL DATABASE EXAMPLE: TO-DO LIST"

Style="{StaticResource PhoneTextNormalStyle}"/>

</StackPanel>

<!--ContentPanel - place additional content here.-->

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">

<controls:Pivot Margin="0, -36, 0, 0">

<controls:PivotItem Header="all">

<ListBox

x:Name="allToDoItemsListBox"

ItemsSource="{Binding AllToDoItems}"

Margin="12, 0, 12, 0" Width="440"

ItemTemplate="{StaticResource ToDoListBoxItemTemplate}" />

</controls:PivotItem>

<controls:PivotItem Header="home">

<ListBox

x:Name="homeToDoItemsListBox"

ItemsSource="{Binding HomeToDoItems}"

Margin="12, 0, 12, 0" Width="440"

ItemTemplate="{StaticResource ToDoListBoxItemTemplate}" />

</controls:PivotItem>

<controls:PivotItem Header="work">

<ListBox

x:Name="workToDoItemsListBox"

ItemsSource="{Binding WorkToDoItems}"

Margin="12, 0, 12, 0" Width="440"

ItemTemplate="{StaticResource ToDoListBoxItemTemplate}" />

</controls:PivotItem>

<controls:PivotItem Header="hobbies">

<ListBox

x:Name="hobbiesToDoItemsListBox"

ItemsSource="{Binding HobbiesToDoItems}"

Margin="12, 0, 12, 0" Width="440"

ItemTemplate="{StaticResource ToDoListBoxItemTemplate}" />

</controls:PivotItem>

</controls:Pivot>

</Grid>

</Grid>

此网格指定应用标题和

Pivot

控件。透视控件包含以下四个不同的页面：

all

、

home

、

work

和

hobbies

，分别与可分配给待办事项任务的四个可能类别相对应。每个页面都分别被绑定到 ViewModel 中的

AllToDoItems

、

HomeToDoItems

、

WorkToDoItems

和

HobbiesToDoItems

可观察集合。

在 MainPage.xaml 中，将以下代码添加到名为

LayoutRoot

的网格下面。

XAML

<phone:PhoneApplicationPage.ApplicationBar>

<shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">

<shell:ApplicationBarIconButton

IconUri="/Images/appbar.add.rest.png"

Text="add"

x:Name="newTaskAppBarButton"

Click="newTaskAppBarButton_Click"/>

</shell:ApplicationBar>

</phone:PhoneApplicationPage.ApplicationBar>

本页使用应用栏显示

add

按键，用于将待办事项任务添加到该数据库。在本主题的后文将创建与此按键相对应的方法。

创建新任务页 UI

在“解决方案资源管理器”中，右键单击您的项目，选择“添加”，然后选择“新项”。

在“添加新项”窗口中，选择“Windows Phone 纵向页面”并将文件命名为 NewTaskPage.xaml。然后单击“添加”。

在 NewTaskPage.xaml 中，向位于页面顶部的

phone:PhoneApplicationPage

元素添加以下属性。

XAML

xmlns:toolkit="clr-namespace:Microsoft.Phone.Controlsassembly=Microsoft.Phone.Controls.Toolkit"

在使用 Windows Phone 工具包

ListPicker

控件时需要该命名空间。

在 NewTaskPage.xaml 中，使用以下代码替换名为

LayoutRoot

的网格。

XAML

<!--LayoutRoot is the root grid where all page content is placed.-->

<Grid x:Name="LayoutRoot" Background="Transparent">

<Grid.RowDefinitions>

<RowDefinition Height="Auto"/>

<RowDefinition Height="*"/>

</Grid.RowDefinitions>

<!--TitlePanel contains the name of the app and page title.-->

<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">

<TextBlock

x:Name="ApplicationTitle"

Text="LOCAL DATABASE EXAMPLE: TO-DO LIST"

Style="{StaticResource PhoneTextNormalStyle}"/>

<TextBlock

x:Name="PageTitle"

Text="new task"

Margin="9,-7,0,0"

Style="{StaticResource PhoneTextTitle1Style}"/>

</StackPanel>

<!--ContentPanel - place additional content here.-->

<StackPanel x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">

<TextBlock Text="Name"/>

<TextBox x:Name="newTaskNameTextBox"/>

<TextBlock Text="Category"/>

<toolkit:ListPicker

x:Name="categoriesListPicker"

ItemsSource="{Binding CategoriesList}"

DisplayMemberPath="Name">

</toolkit:ListPicker>

</StackPanel>

</Grid>

此网格包含两个 StackPanel 控件。第一个控件指定应用和页面标题。第二个控件 StackPanel 包含以下数据输入控件：TextBox 用于输入新待办事项任务文本，

ListPicker

控件用于指定该任务类别的 控件。

ListPicker

被绑定到

CategoriesList

，后者是

List

的一个 ViewModel 属性。

在 NewTaskPage.xaml 中，向名为

LayoutRoot

的网格下添加以下代码。

XAML

<phone:PhoneApplicationPage.ApplicationBar>

<shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">

<shell:ApplicationBarIconButton

x:Name="appBarOkButton"

IconUri="/Images/appbar.check.rest.png"

Text="ok"

Click="appBarOkButton_Click"/>

<shell:ApplicationBarIconButton

x:Name="appBarCancelButton"

IconUri="/Images/appbar.cancel.rest.png"

Text="cancel"

Click="appBarCancelButton_Click"/>

</shell:ApplicationBar>

</phone:PhoneApplicationPage.ApplicationBar>

此页面使用应用栏显示

ok

和

cancel

按扭。在本主题的后文将创建与这些按键相对应的方法。

创建数据模型

在本节中，将创建 LINQ to SQL 数据上下文和表示数据库表和关联的对象。首先，将创建文件并为每个表添加模板。然后，将扩建每个表并创建数据上下文。

准备数据模型文件

在“解决方案资源管理器”中，右键单击项目，选择“添加”，然后选择“新建文件夹”。

将新文件夹命名为 Model。

在“解决方案资源管理器”中，右键单击 Model 文件夹，选择“添加”，然后选择“新项”。

在“添加新项”窗口中，选择“代码文件”并将文件命名为 ToDoDataContext.cs。然后单击“添加”。

在 ToDoDataContext.cs 中，添加以下将包含数据模型类的指令和命名空间。

C#

using System

using System.ComponentModel

using System.Data.Linq

using System.Data.Linq.Mapping

namespace LocalDatabaseSample.Model

{

}

在 ToDoDataContext.cs 中，将以下代码向

LocalDatabaseSample.Model

命名空间添加两次。在以下步骤中，将针对每个表对这些类进行重命名。

说明注意：

在以下步骤中重命名这些类之前，Visual Studio 将显示多义性错误。

C#

[Table]

public class AddTableNameHere : INotifyPropertyChanged, INotifyPropertyChanging

{

//

// TODO: Add columns and associations, as applicable, here.

//

// Version column aids update performance.

[Column(IsVersion = true)]

private Binary _version

#region INotifyPropertyChanged Members

public event PropertyChangedEventHandler PropertyChanged

// Used to notify that a property changed

private void NotifyPropertyChanged(string propertyName)

{

if (PropertyChanged != null)

{

PropertyChanged(this, new PropertyChangedEventArgs(propertyName))

}

}

#endregion

#region INotifyPropertyChanging Members

public event PropertyChangingEventHandler PropertyChanging

// Used to notify that a property is about to change

private void NotifyPropertyChanging(string propertyName)

{

if (PropertyChanging != null)

{

PropertyChanging(this, new PropertyChangingEventArgs(propertyName))

}

}

#endregion

}

这是实体的基本模板，即表示本地数据库表的类。为了演示以下我们建议大部分实体共同具有的代码功能，此时还缺少列和关联：

[table]

属性指定该类将表示一个数据库表。

INotifyPropertyChanged

接口用于更改跟踪。

INotifyPropertyChanging

接口帮助限制与更改跟踪相关的内存占用。

Binary

版本列（具有

[Column(IsVersion = true)]

属性）显著改进表的更新性能。

说明注意：

实体可以从其他实体中继承 CLR 对象成员，如事件、方法和属性。无法继承其他实体中的 LINQ to SQL 属性。例如，您可以创建名为

L2SEntity

的基类，该类实现

INotifyPropertyChanged

和

INotifyPropertyChanging

。其他实体可以继承

L2SEntity

中的事件和方法，但是 LINQ to SQL 将只识别使用

[Table]

属性显式标记的那些实体。其他实体不会继承任何使用

L2SEntity

类编写的 LINQ to SQL 特性。

将其中一个

AddTableNameHere

类重命名为

ToDoItem

。此类将存储待办事项任务信息。

将其他

AddTableNameHere

类重命名为

ToDoCategory

。此类将存储类别列表。

打开View >Other Windows >Xamarin.Forms Previewer

当你打开一个XAML文件时，点击 Preview 按钮去启用或禁用

当你打开Xamarin Forms Previewer时，会显示这么几个可视化工具：

在此之后，您可以编辑XAML并更新漏昌庆，并不需要每次保存或重建项目，都会在更新XAML时进行更新。

当你有一个ListView或其他绑定的数据时，很难看到它在设计器中的实际外观。为了弥补这一迅蚂点，您可以添加临时数据以绑定到您的视图。

首先我创建一个静态类，我可以绑定一个静态模型。在这里我只是把我返握的数据列表。

在你的XAML页面中，确保你有一个对这个类所在的命名空间和程序集的引用。将你的BindingContext设置为DataViewModel，并设置你的ListView与NameList绑定。

到这里Xamarin Forms Previewer 的介绍就完成了，希望能对您有所帮助。

首先说一下学习WPF的基础知识：

1) 要会一门.NET所支持的编程语言。例如C#。

2) 会一点“标准通用标记语言”：WPF窗体程序使用的XAML语言，也属于“标准通用标记语言”的一个分支。如果以前接触过XML、HTML、XHTML、ASP.NET之类的“标准通用标记语言”，对于学习是有所帮助的。

3) 有一定的WinForm或ASP.NET经验，主要是对控件事件的处理要有所了解。

4) 拥有良好的面向对象的思想：在WPF中，经常要灵活运用各种继承关系、多态、重载等。

5) DataBinding要有所了解：Binding是WPF的一大亮点。

6) 对设计模式要有一定的了解：当然是越深入越好了，在实际项目中，各种设计模式经常交融使用。

二、 本系列使用到的工具：

1) 开发环境：Windows 7中文版

2) 开发工具：Visual Studio 2013中文版

3) 数据库：本机SQL Server 2012 Express

4) ORM工具：Entity Framework（实体框架）。

Entity Framework与NHibernate比较：

1）Entity Framework封装性更好，增、删、改、查询更方便

2) Entity Framework使用更方便的Linq to Entity查询，延迟加载（只有在需要时才加载，只仿此庆加载需要的数据）。

三、WPF开发基础

第一、在装好以上所说的工具之后，打开Visual Studio 2013,选择“菜单—》文件—》新建—》项目”。如下图。

第二、在“新建项目”对话框中选择“WPF应用程序”,修改名称扒首为WpfApp1，然后点击“确定”按钮,便成功创建了一个“WPF应用程序”。新创建的项目所引用的公共类库如下。如下图。（“WPF应用程序”会在“引用”里面自动添加下图中所示的 PresentationCore、PresentationFramework、WindowsBase三大核心程序集）。

第三、WpfApp1项目的生成的文件结构。如下图。

第四、在App.xaml中的“StartupUri”属性可以指定项目运行时的启动窗体。如下图中备握“StartupUri=”MainWindow.xaml””,还可以定义我们需要的系统资源以及引入程序集等。如下图。

第五、在MainWindow.xaml的设计窗体中我们可以修改Title。还可以设置MainWindow的属性和添加事件。完成了这些设置以后，我们就可以对窗体添加内容了，如下图。我在这个窗体中添加了一个ListView、两个WrapPanel、两个Button等。

第六、在WPF的xmal文件中还可以添加如下资源。如下图。

四、小结

WPF应用程序的创建除了使用Visual Studio之外，还可以使用Expression Blend。

谈到学习WPF的开发，就必须要学习MVVM，学习MVVM，就要首先了解MVC、MVP等概念。

我自己做过WinForm、ASP.NET等使用各类.NET技术的项目，虽然微软的技术一直在进步、变化，但是最基本的东西都没有变，例如数据库的访问，文件的读写、日志处理，程序中异常的处理、报表、打印、性能的优化、友好的界面。

---