Question

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

Answer 1

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

　　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.Controls;assembly=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.Controls;assembly=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
　　。此类将存储类别列表。