导出 (0) 打印
全部展开
信息
您所需的主题如下所示。但此主题未包含在此库中。

实现面向 Windows Phone 8 的模型视图查看模型模式

2014/6/18

适用于:Windows Phone 8 和 Windows Phone Silverlight 8.1 | Windows Phone OS 7.1

 

在本演练中,您将建立一个实施模型视图查看模型 (MVVM) 设计模式的简单应用。 MVVM 是一种将数据从用户界面分离的方式。 MVVM 支持开发人员对数据模型进行编码,并支持设计人员创建用户界面。 在应用中,模型(数据)将是 C# 类,视图(用户界面)将是 XAML 用户控件。 模型和视图之间的链接 ViewModel,也将是 C# 类。 有关模型视图查看模型设计模式的更多信息,请参阅本主题结尾处的链接。

您在本演练中创建的应用是一个游戏跟踪器,用户可以在其中跟踪他们在视频游戏中的成就。 用户可以存储他们已收集项目的数目和他们已经完成的级别。 要下载完整版本的应用,请参见 Model-View-ViewModel 示例

在本演练中,您将执行以下任务:

  • 创建一个模型、一个 ViewModel 和两个视图。

  • 使用 XAML 绑定将视图连接到数据。

  • 创建自定义数据转换器。

  • 导航到您的应用程序或从您的应用导航时,维护页面状态。

  • 将应用数据保存到独立存储。

  • 使用应用栏公开保存功能。

完整的解决方案包含以下组件。

完整的应用如下所示。

The project files in Solution Explorer.The app running in the emulator.

若要完成此次演练,您必须安装 Windows Phone SDK。

首先,新建一个名为MVVMTestApp 的 Windows Phone 应用项目。 在接下来的步骤中,您要将代码添加到假定应用名称为 MVVMTestApp 的应用中。 如果要为应用选择不同的名称,则必须更改代码中的命名空间引用。

创建应用项目的步骤

  1. 在 Visual Studio 中的“文件”菜单中,指向“新建”,然后单击“项目”

    将显示“新建项目”对话框。

  2. 在左窗格中,单击“已安装模板”,展开“Visual C#”“Visual Basic”,然后单击“Windows Phone”

  3. 在应用类型列表中,单击 Windows Phone 应用 

  4. “名称”框中键入 MVVMTestApp

  5. 单击“确定”。

    将创建新的应用项目并在 Visual Studio 中打开。

  6. “文件”菜单上,单击“全部保存”。 (Ctrl+Shift+S)

  7. “生成”菜单上,单击“生成解决方案”。 (Ctrl+Shift+B)

为了实施模型视图查看模型模式,您需要将项目文件组织到文件夹中。 在此过程中,您将创建三个新的文件夹,分别命名为 ModelViewViewModel

组织模型视图查看模型文件的步骤

  1. “解决方案资源管理器”中,右键单击项目“MVVMTestApp”,指向“添加”,然后单击“新建文件夹”。 一个名称处于编辑模式的新建文件夹将添加到项目中。 键入 Model 作为此文件夹的名称,然后按 Enter 键。

  2. “解决方案资源管理器”中,右键单击项目“MVVMTestApp”,指向“添加”,然后单击“新建文件夹”。 一个名称处于编辑模式的新建文件夹将添加到项目中。 键入 View 作为此文件夹的名称,然后按 Enter 键。

  3. “解决方案资源管理器”中,右键单击项目“MVVMTestApp”,指向“添加”,然后单击“新建文件夹”。 一个名称处于编辑模式的新建文件夹将添加到项目中。 键入 ViewModel 作为此文件夹的名称,然后按 Enter 键。

在这个过程中,您将创建数据模型。 此模型是一个名为 Accomplishment 的单个类。Accomplishment 类实现 INotifyPropertyChanged 接口和 PropertyChanged 事件。 这使此类可以在属性值变更时通知视图,然后视图根据该变更更新用户界面。 在此应用中,用户只能更改 CountCompleted 属性,因此您只需引发这些属性中的 PropertyChanged 事件。 在最后的步骤中测试数据绑定。

Accomplishment 类包含以下属性。

属性

描述

名称

成绩名称。

类型

成绩类型:“项目”或“级别”。

计数

对于项目:您收集了多少个项目。

已完成

对于级别:您是否已完成级别。

创建数据模型

  1. “解决方案资源管理器”中,右键单击文件夹“模型”,指向“添加”,然后单击“类”

    将出现“添加新项”对话框,同时选中类模板。

    Visual Basic 说明Visual Basic 说明:

    对于 Visual Basic,您必须手动选择“代码文件”模板。

  2. “名称”框中,键入 Accomplishment.csAccomplishment.vb,然后单击“添加”

    将新建类添加到模型文件夹的项目中,并在代码编辑器中打开。

  3. 将此代码替换为以下代码:

    using System;
    using System.ComponentModel;
    
    
    namespace MVVMTestApp.Model
    {
        public class Accomplishment : INotifyPropertyChanged
        {
            // The name of the accomplishment.
            public string Name { get; set; }
    
            // The type of the accomplishment, Item or Level.
            public string Type { get; set; }
    
            // The number of each item that has been collected.
            private int _count;
            public int Count
            {
                get
                {
                    return _count;
                }
                set
                {
                    _count = value;
                    RaisePropertyChanged("Count");
                }
            }
    
            // Whether a level has been completed or not
            private bool _completed;
            public bool Completed
            {
                get
                {
                    return _completed;
                }
                set
                {
                    _completed = value;
                    RaisePropertyChanged("Completed");
                }
            }
    
    
            public event PropertyChangedEventHandler PropertyChanged;
    
            private void RaisePropertyChanged(string propertyName)
            {
                if (this.PropertyChanged != null)
                {
                    this.PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
                }
            }
    
    
            // Create a copy of an accomplishment to save.
            // If your object is databound, this copy is not databound.
            public Accomplishment GetCopy()
            {
                Accomplishment copy = (Accomplishment)this.MemberwiseClone();
                return copy;
            }
        }
    }
    
  4. “文件”菜单上,单击“全部保存”。 (Ctrl+Shift+S)

  5. “生成”菜单上,单击“生成解决方案”。 (Ctrl+Shift+B)

在此过程中,创建模型与视图之间的链接 ViewModel。 ViewModel 是包含模型中对象的集合,在此案例中包含的是 Accomplishment 对象。 ViewModel 将使用 ObservableCollection<T>。 这使它能在集合中的项目发生变更时通知视图,视图将根据该变更更新用户界面。

ViewModel 包含用于获取成绩集合的代码。 首先,您需要检查独立存储,看成绩是否已保存。 如果已保存,请用独立存储填充该集合。 如果还未保存,请用默认成绩填充集合。 在接下来的步骤中,您需要添加代码以将成绩保存到独立存储中。

创建 ViewModel

  1. “解决方案资源管理器”中,右键单击文件夹“ViewModel”,指向“添加”,然后单击“类”

    将出现“添加新项”对话框,同时选中类模板。

    Visual Basic 说明Visual Basic 说明:

    对于 Visual Basic,您必须手动选择“代码文件”模板。

  2. “名称”框中,键入 ViewModel.csViewModel.vb,然后单击“添加”

    将新建类添加到“ViewModel”文件夹的项目中,并在代码编辑器中打开。

  3. 将此代码替换为以下代码:

    using System;
    using System.Windows;
    using System.Collections.ObjectModel;
    using System.IO.IsolatedStorage;
    using MVVMTestApp.Model;
    
    namespace MVVMTestApp.ViewModelNamespace
    {
        public class ViewModel
        {
            public ObservableCollection<Accomplishment> Accomplishments { get; set; }
    
    
            public void GetAccomplishments()
            {
                if (IsolatedStorageSettings.ApplicationSettings.Count > 0)
                {
                    GetSavedAccomplishments();
                }
                else
                {
                    GetDefaultAccomplishments();
                }
            }
    
    
            public void GetDefaultAccomplishments()
            {
                ObservableCollection<Accomplishment> a = new ObservableCollection<Accomplishment>();
    
                // Items to collect
                a.Add(new Accomplishment() { Name = "Potions", Type = "Item" });
                a.Add(new Accomplishment() { Name = "Coins", Type = "Item" });
                a.Add(new Accomplishment() { Name = "Hearts", Type = "Item" });
                a.Add(new Accomplishment() { Name = "Swords", Type = "Item" });
                a.Add(new Accomplishment() { Name = "Shields", Type = "Item" });
    
                // Levels to complete
                a.Add(new Accomplishment() { Name = "Level 1", Type = "Level" });
                a.Add(new Accomplishment() { Name = "Level 2", Type = "Level" });
                a.Add(new Accomplishment() { Name = "Level 3", Type = "Level" });
    
                Accomplishments = a;
                //MessageBox.Show("Got accomplishments from default");
            }
    
    
            public void GetSavedAccomplishments()
            {
                ObservableCollection<Accomplishment> a = new ObservableCollection<Accomplishment>();
    
                foreach (Object o in IsolatedStorageSettings.ApplicationSettings.Values)
                {
                    a.Add((Accomplishment)o);
                }
    
                Accomplishments = a;
                //MessageBox.Show("Got accomplishments from storage");
            }
        }
    }
    
  4. “文件”菜单上,单击“全部保存”。 (Ctrl+Shift+S)

  5. “生成”菜单上,单击“生成解决方案”。 (Ctrl+Shift+B)

在此过程中,您将通过创建视图来显示项目成绩。 在接下来的步骤中,您将需要在一个页面上显示此视图,并通过设置数据上下文将它连接到 ViewModel。 请注意此视图后面没有代码。

此视图是一个用户控件,它包含一个绑定到数据的 ListBoxListBox 中的每一个项目都有以下三列。

名称

绑定模型

描述

名称

单向

项目名称。

计数

双向

(文本框)您收集了多少个项目。 用户输入这个,模型将通过数据绑定更新。

检查

单向

此检查是为保证数据正确更新。 当用户更新上一列中的“计数”时,结果将立即出现在这一列中。

创建第一个视图的步骤

  1. “解决方案资源管理器”中,右键单击文件夹“视图”,指向“添加”,然后单击“新建项”

    将显示“添加新项”对话框。

  2. 在文件类型列表中,单击“Windows Phone 用户控件”

  3. “名称”框中键入 ItemView.xaml,再单击“添加”

    将新的 XAML 文件添加到“视图”文件夹中的项目中,并在设计器中打开。 默认情况下,XAML 文件中有一个空白的 GRID 元素。

  4. GRID 元素中,添加以下代码:

    <ListBox ItemsSource="{Binding}">
        <ListBox.ItemTemplate>
            <DataTemplate>
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="200"/>
                        <ColumnDefinition Width="80"/>
                        <ColumnDefinition Width="100"/>
                    </Grid.ColumnDefinitions>
                    <TextBlock x:Name="Item" Text="{Binding Path=Name, Mode=OneWay}" Grid.Column="0" HorizontalAlignment="Left" VerticalAlignment="Center" />
                    <TextBox x:Name="Count" Text="{Binding Path=Count, Mode=TwoWay}" Grid.Column="1" TextAlignment="Center" InputScope="Number"/>
                    <TextBlock x:Name="Check" Text="{Binding Path=Count, Mode=OneWay}" Grid.Column="2" HorizontalAlignment="Center" VerticalAlignment="Center" />
                </Grid>
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>
    
  5. “文件”菜单上,单击“全部保存”。 (Ctrl+Shift+S)

  6. “生成”菜单上,单击“生成解决方案”。 (Ctrl+Shift+B)

在此过程中,您将通过创建视图来显示级别成绩。 在接下来的步骤中,您将需要在一个页面上显示此视图,并通过设置数据上下文将它连接到 ViewModel。

此视图是一个用户控件,它包含一个绑定到数据的 ListBoxListBox 中的每一个项目都有以下三列。

名称

绑定模型

描述

级别

单向

级别名称。

已完成

双向

(复选框)您是否已完成级别。 用户选中这个,模型将通过数据绑定更新。

检查

单向

此检查是为保证数据正确更新。 当用户更新上一列中的“已完成”数据时,结果将立即出现在这一列中。

在这个视图中,您还要做另外一件事情。 如果用户还没有完成级别,您需要启用复选框。 当用户选中复选框以指示他们已完成级别时,您需要禁用该复选框。 换句话说,复选框的启用状态与复选框的值是相反的。 您可以通过数据绑定自动设置复选框的启用状态,但首先您必须创建一个返回与布尔值相反的的自定义数据转换器。 自定义数据转换器是一个类,它能实现 IValueConverter 界面,还能实现 ConvertConvertBack 方法。 在最后的步骤中测试数据转换器。

创建第二个视图的步骤

  1. “解决方案资源管理器”中,右键单击文件夹“视图”,指向“添加”,然后单击“新建项”

    将显示“添加新项”对话框。

  2. 在文件类型列表中,单击“Windows Phone 用户控件”

  3. “名称”框中键入 LevelView.xaml,再单击“添加”

    将新的 XAML 文件添加到“视图”文件夹中的项目中,并在设计器中打开。

创建自定义数据绑定转换器的步骤

  1. “解决方案资源管理器”中,右键单击“LevelView.xaml”,然后单击“查看代码”

    代码隐藏文件将在代码编辑器中打开。

  2. 将此代码替换为以下代码:

    using System;
    using System.Windows.Controls;
    using System.Globalization;
    
    namespace MVVMTestApp.View
    {
        public partial class LevelView : UserControl
        {
            public LevelView()
            {
                InitializeComponent();
            }
        }
    
    
        public class BoolOpposite : System.Windows.Data.IValueConverter
        {
            public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
            {
                bool b = (bool)value;
                return !b;
            }
    
            public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
            {
                string s = value as string;
                bool b;
    
                if (bool.TryParse(s, out b))
                {
                    return !b;
                }
                return false;
            }
        }
    }
    
  3. “文件”菜单上,单击“全部保存”。 (Ctrl+Shift+S)

  4. “生成”菜单上,单击“生成解决方案”。 (Ctrl+Shift+B)

创建第二个视图的用户界面的步骤

  1. “解决方案资源管理器”中,双击“LevelView.xaml”以将它在设计器中打开。

  2. 在 XAML 编辑器中,在 <UserControl> 标记中,同时添加以下代码及其他命名空间声明:

    C# 版本:

    xmlns:src="clr-namespace:MVVMTestApp.View"
    

    Visual Basic 版本:

    xmlns:src="clr-namespace:MVVMTestApp"
    
  3. USERCONTROL 元素之后、GRID 元素之前,添加以下代码:

    <UserControl.Resources>
        <src:BoolOpposite x:Key="BoolOpposite"/>
    </UserControl.Resources>
    
  4. GRID 元素中,添加以下代码:

    <ListBox ItemsSource="{Binding}">
        <ListBox.ItemTemplate>
            <DataTemplate>
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="200"/>
                        <ColumnDefinition Width="80"/>
                        <ColumnDefinition Width="100"/>
                    </Grid.ColumnDefinitions>
                    <TextBlock x:Name="Level" Text="{Binding Path=Name, Mode=OneWay}" Grid.Column="0" HorizontalAlignment="Left" VerticalAlignment="Center"/>
                    <CheckBox x:Name="Completed" IsChecked="{Binding Path=Completed, Mode=TwoWay}" Grid.Column="1" HorizontalAlignment="Center" IsEnabled="{Binding Path=Completed, Converter={StaticResource BoolOpposite}}"/>
                    <TextBlock x:Name="Check" Text="{Binding Path=Completed, Mode=OneWay}" Grid.Column="2" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                </Grid>
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>
    
  5. “文件”菜单上,单击“全部保存”。 (Ctrl+Shift+S)

  6. “生成”菜单上,单击“生成解决方案”。 (Ctrl+Shift+B)

在此过程中,您将创建应用主页。 主页包含您之前创建的两个视图: 第一个视图包含项目,第二个视图包含级别。 首先,您要在代码中新建一个 ViewModel 实例,并利用它获取数据。 然后,您需要将每个视图连接到该 ViewModel,并从该 ViewModel 选择您希望在视图中看到的数据。 在接下来的步骤中,当用户导航出应用又返回的时候,您需要添加用来维护页面状态的代码。

创建应用主页的用户界面的步骤

  1. “解决方案资源管理器”中,双击 MainPage.xaml 以在设计器中打开它。

  2. 在设计视图中,单击文本块“我的应用程序”

  3. “属性”窗口中,将“文本”属性更改为 MVVM Test App

  4. 在设计视图中,单击文本块“页面名称”

  5. “属性”窗口中,将“文本”属性更改为 game tracker

  6. 在 XAML 编辑器中,在 <phone> 标记中,同时添加以下代码及其他命名空间声明:

    C# 版本:

    xmlns:views="clr-namespace:MVVMTestApp.View"
    

    Visual Basic 版本:

    xmlns:src="clr-namespace:MVVMTestApp"
    
  7. 找到 ContentPanel GRID 元素,默认情况下,它已经添加到您的项目中。 该元素如下所示:

    <!--ContentPanel - place additional content here-->
    <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"></Grid>
    
  8. 使用以下代码替换默认的 ContentPanel GRID 元素:

    警告说明警告:

    注意不要删除LayoutRoot GRID 元素的结束标记,它紧跟在 ContentPanel GRID 元素之后。

    <!--ContentPanel - place additional content here-->
    <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
        <StackPanel>
            <TextBlock Text="Items Collected" Foreground="{StaticResource PhoneAccentBrush}" Style="{StaticResource PhoneTextLargeStyle}" />
            <views:ItemView x:Name="ItemViewOnPage" Height="200"/>
    
            <TextBlock Text="Levels Completed" Foreground="{StaticResource PhoneAccentBrush}" Style="{StaticResource PhoneTextLargeStyle}" />
            <views:LevelView x:Name="LevelViewOnPage" Height="200"/>
        </StackPanel>
    </Grid>
    
  9. “文件”菜单上,单击“全部保存”。 (Ctrl+Shift+S)

  10. “生成”菜单上,单击“生成解决方案”。 (Ctrl+Shift+B)

为应用主页添加代码的步骤

  1. “解决方案资源管理器”中,右键单击 MainPage.xaml,然后单击“查看代码”

    代码隐藏文件将在代码编辑器中打开。

  2. 将此代码替换为以下代码:

    using System;
    using System.Linq;
    using System.Windows;
    using Microsoft.Phone.Controls;
    using MVVMTestApp.ViewModelNamespace;
    
    namespace MVVMTestApp
    {
        public partial class MainPage : PhoneApplicationPage
        {
            private ViewModel vm;
    
            // Constructor
            public MainPage()
            {
                InitializeComponent();
                vm = new ViewModel();
            }
    
    
            protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e)
            {
                base.OnNavigatedTo(e);
    
                // Later, you will replace this next line with something better.
                vm.GetAccomplishments();
    
    
                // There are two different views, but only one view model.
                // So, use LINQ queries to populate the views.
    
                // Set the data context for the Item view.
                ItemViewOnPage.DataContext = from Accomplishment in vm.Accomplishments where Accomplishment.Type == "Item" select Accomplishment;
    
                // Set the data context for the Level view.
                LevelViewOnPage.DataContext = from Accomplishment in vm.Accomplishments where Accomplishment.Type == "Level" select Accomplishment;
    
                // If there is only one view, you could use the following code
                // to populate the view.
                //AccomplishmentViewOnPage.DataContext = vm.Accomplishments;
            }
        }
    }
    
  3. “文件”菜单上,单击“全部保存”。 (Ctrl+Shift+S)

  4. “生成”菜单上,单击“生成解决方案”。 (Ctrl+Shift+B)

在此过程中,您需要添加用来维护页面状态的代码。 如果用户离开您的应用又返回,您需要维护页面状态。 如果用户从应用列表启动新的应用实例,您不需要维护页面状态。

首先,您需要创建一个实用工具类,让它包含一个名为 IsLaunching 的属性。 如果用户已启动新的应用实例,您可以使用该属性进行跟踪。 ViewModel 是您在此应用程序中唯一需要维护的状态。Windows Phone 提供页面状态对象,您可以将整个 ViewModel 作为一个对象储存到状态中。 您不需要单个储存 ViewModel 集合中的项目。 当用户返回到应用时,您可以从状态中检索到 ViewModel,并将视图绑定在它上面。 在最后的步骤中测试页面状态。

维护页面状态的步骤

  1. “解决方案资源管理器”中,右键单击项目 MVVMTestApp,指向“添加”,然后单击“类”

    将出现“添加新项”对话框,同时选中类模板。

    Visual Basic 说明Visual Basic 说明:

    对于 Visual Basic,您必须手动选择“代码文件”模板。

  2. “名称”框中,键入 StateUtilities.csStateUtilities.vb,然后单击“添加”

    将新类添加到项目中,并在代码编辑器中打开。

  3. 将此代码替换为以下代码:

    using System;
    
    namespace MVVMTestApp
    {
        public static class StateUtilities
        {
            private static Boolean isLaunching;
    
            public static Boolean IsLaunching
            {
                get { return isLaunching; }
                set { isLaunching = value; }
            }
        }
    }
    
  4. “解决方案资源管理器”中,右键单击“App.xaml”,然后单击“查看代码”

    代码隐藏文件将在代码编辑器中打开。

  5. 查找 Application_Launching 方法,并将其替换为以下代码:

    private void Application_Launching(object sender, LaunchingEventArgs e)
    {
        StateUtilities.IsLaunching = true;
    }
    
  6. 查找 Application_Activated 方法,并将其替换为以下代码:

    private void Application_Activated(object sender, ActivatedEventArgs e)
    {
        StateUtilities.IsLaunching = false;
    }
    
  7. “解决方案资源管理器”中,右键单击 MainPage.xaml,然后单击“查看代码”

    代码隐藏文件将在代码编辑器中打开。

  8. MainPage 类的 OnNavigatedTo 方法中,找到对 GetAccomplishments 的调用。 该元素如下所示:

    // Later, you will replace this next line with something better.
    vm.GetAccomplishments();
    

    将其替换为以下代码:

    if (!StateUtilities.IsLaunching && this.State.ContainsKey("Accomplishments"))
    {
        // Old instance of the application
        // The user started the application from the Back button.
        
        vm = (ViewModel)this.State["Accomplishments"];
        //MessageBox.Show("Got data from state");
    }
    else
    {
        // New instance of the application
        // The user started the application from the application list,
        // or there is no saved state available.
        
        vm.GetAccomplishments();
        //MessageBox.Show("Did not get data from state");
    }
    
  9. MainPage 类中的 OnNavigatedTo 方法后面,添加以下代码:

    protected override void OnNavigatedFrom(System.Windows.Navigation.NavigationEventArgs e)
    {
        base.OnNavigatedFrom(e);
    
        if (this.State.ContainsKey("Accomplishments"))
        {
            this.State["Accomplishments"] = vm;
        }
        else
        {
            this.State.Add("Accomplishments", vm);
        }
    
        StateUtilities.IsLaunching = false;
    }
    
  10. “文件”菜单上,单击“全部保存”。 (Ctrl+Shift+S)

  11. “生成”菜单上,单击“生成解决方案”。 (Ctrl+Shift+B)

在此过程中,您需要添加代码以将应用数据保存到独立存储中。 在此应用中,您需要将数据保存到独立存储设置字典中,而不是文本文件或本地数据库中。 有关独立存储类型的更多信息,请参阅 Windows Phone 的数据。 有关本地设置目录的更多信息,请参见 IsolatedStorageSettings 类。 在最后的步骤中测试独立存储。

您保存到独立存储中的数据都是 Accomplishment 对象,它们都是数据绑定的。 当用户退出应用时,Windows Phone 将自动调用 Save 以保存独立存储。 由于您仅希望当用户显式单击“保存”按钮时保存数据,而用户退出应用时不保存,您必须断开独立存储与数据绑定对象之间的连接。 为此,您需要保存 Accomplishment 对象的副本,而不是实际对象本身。

将数据保存到独立存储的步骤

  1. “解决方案资源管理器”中,双击“ViewModel.cs”或“ViewModel.vb”将它在代码编辑器中打开。

  2. ViewModel 类中三个 GetAccomplishments 方法后面,添加以下代码:

    public void SaveAccomplishments()
    {
        IsolatedStorageSettings settings = IsolatedStorageSettings.ApplicationSettings;
    
        foreach (Accomplishment a in Accomplishments)
        {
            if (settings.Contains(a.Name))
            {
                settings[a.Name] = a;
            }
            else
            {
                settings.Add(a.Name, a.GetCopy());
            }
        }
    
        settings.Save();
        MessageBox.Show("Finished saving accomplishments");
    }
    
  3. “文件”菜单上,单击“全部保存”。 (Ctrl+Shift+S)

  4. “生成”菜单上,单击“生成解决方案”。 (Ctrl+Shift+B)

在此应用中,当用户需要保存其数据时,他们通过单击“保存”按钮进行选择。 在此过程中,您需要将一个“保存”按钮添加到应用栏。 对于按钮图标,可以使用标准的 Windows Phone 图标之一。 有关更多信息,请参见 Windows Phone 的应用栏

添加图标文件的步骤

  1. “解决方案资源管理器”中,右击项目 MVVMTestApp,指向“添加”,然后单击“现有项”

    将显示“添加现有项”对话框。

  2. 浏览下列位置之一并找到标准图标:

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

  3. 单击文件“appbar.save.rest.png”,然后单击“添加”

  4. “解决方案资源管理器”中,选择该新文件。

  5. “属性”窗口中,为新文件设置以下属性:

    属性

    生成操作

    内容

    复制到输出目录

    如果较新则复制

    文件名

    AppBarSave.png

  6. “文件”菜单上,单击“全部保存”。 (Ctrl+Shift+S)

  7. “生成”菜单上,单击“生成解决方案”。 (Ctrl+Shift+B)

添加应用栏的步骤

  1. “解决方案资源管理器”中,右键单击 MainPage.xaml,然后单击“查看代码”

    代码隐藏文件将在代码编辑器中打开。

  2. MainPage 类中的 OnNavigatedFrom 方法后面,添加以下代码:

    private void AppBarSave_Click(object sender, EventArgs e)
    {
        vm.SaveAccomplishments();
    }
    
  3. “解决方案资源管理器”中,双击“MainPage.xaml”在设计器中打开 XAML。

  4. 查找默认情况下添加到项目中的示例应用栏元素。 该元素如下所示:

    <!--Sample code showing usage of ApplicationBar-->
    <!--<phone:PhoneApplicationPage.ApplicationBar>
    
    …
    
    </phone:PhoneApplicationPage.ApplicationBar>-->
    
  5. 使用以下代码替换示例应用栏元素:

    <phone:PhoneApplicationPage.ApplicationBar>
        <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True" >
            <shell:ApplicationBarIconButton IconUri="AppBarSave.png" Text="Save"  Click="AppBarSave_Click" />
        </shell:ApplicationBar>
    </phone:PhoneApplicationPage.ApplicationBar>
    
  6. “文件”菜单上,单击“全部保存”。 (Ctrl+Shift+S)

  7. “生成”菜单上,单击“生成解决方案”。 (Ctrl+Shift+B)

在以下过程中,您将测试应用。

在模拟器中运行应用的步骤

  1. 在标准工具栏中,将应用的部署目标设置为“Windows Phone 模拟器”(而不是“Windows Phone 设备”)。

    Target on Standard Toolbar selecting emulator

  2. “调试”菜单中,单击“开始执行(不调试)”

    模拟器将打开,随后应用将启动。

测试“视图”到“模型”的绑定的步骤

  1. 在项目收集文本框中输入数字。

    基础模型将更新。 由于该模型使用 INotifyPropertyChanged 界面,当您更改 Count 属性时将引发 PropertyChanged 事件。 通知视图,文本框右侧的校验列将更新并显示您输入的新值。

  2. “已完成级别”复选框中,选择第一级。

    基础模型将更新。 由于该模型使用 INotifyPropertyChanged 界面,当您更改 Completed 属性时将引发 PropertyChanged 事件。 通知视图,文本框右侧的校验列将更新并显示 True 值。

测试数据转换器的步骤

  • “已完成级别”复选框中,选择其中一个级别。

    选中复选框,文本框右侧的校验列将更新并显示 True 值。 注意此时复选框禁用。 通过使用您创建的自定义数据转换器,复选框禁用的属性被设置为 False,与复选框的值相反。

测试页面状态的步骤

  1. 在文本框中输入数据并选中复选框。

  2. 单击“启动”按钮,然后单击“返回”按钮。

    应用将恢复,页面状态将保持不变。

在独立存储中测试数据的步骤

  1. 在文本框中输入数据并选中复选框。

  2. 单击“保存”按钮。

    显示“已完成保存成绩”消息。

  3. 在文本框中输入新数据并选中复选框。

  4. 单击“启动”按钮,然后单击向右键。

    将出现应用列表。

  5. 单击 MVVMTestApp 启动新的应用实例。

    应用将加载您保存到独立存储的数据,而不是您后来输入的数据。

您可以通过以下几种方式扩展应用的功能:

  • 允许用户将项目的名称输入到集合中。

  • 将“保存”功能更改为 MVVM 命令。

显示:
© 2014 Microsoft