MVVM – 第一个应用程序

在这篇文章中，我们将介绍如何使用MVVM模式创建第一个应用程序。该应用程序使用Xamarin.Forms构建，可以在Android，iOS和UWP（通用Windows平台）设备上运行。

什么是MVVM模式？

MVVM是一个设计模式，它将应用程序的用户界面分解成三个主要部分：模型，视图和视图模型。其中，

1. 模型：数据层，包括业务逻辑和数据访问。
2. 视图：用户界面，即应用程序的外观和感觉。
3. 视图模型：绑定模型和视图，并处理与用户交互相关的所有逻辑，使视图变得无状态。

MVVM的目的是为了促进代码分离，提高可重用性和可测试性。

应用程序功能

我们将创建一个简单的Todo List应用程序，用户可以添加和管理待办事项。主要功能包括：

1. 添加待办事项。
2. 查看待办事项列表。
3. 标记已完成的待办事项。
4. 删除已完成的待办事项。

建立应用程序瓶颈

我们将使用Xamarin.Forms建立应用程序，并使用基本的数据绑定技术实现MVVM模式。在这开始之前，确保已安装Visual Studio 2019并安装了Xamarin和相关组件。现在，让我们开始这个项目！

创建新项目

首先，我们需要创建一个空的Xamarin.Forms项目。在Visual Studio中，单击“文件”>“新建”>“项目”，然后在“新建项目”对话框中选择“移动应用程序”>“移动应用程序（Xamarin.Forms）”。在弹出窗口中，输入 “TodoList”作为应用程序名称，选择平台（Android，iOS，UWP）并点击“创建”按钮。

添加模型和视图模型

现在，我们将在TodoList项目中添加两个新的文件夹：“Models”和“ViewModels”，分别用于存放数据模型和视图模型。

创建模型

我们需要一个名为Task的模型类，它将要做的一切事情都包含在内。模型类应至少包括以下属性：

• ID : 用于唯一标识每个任务的GUID
• Title : 任务的标题，表示任务的名称
• Description : 任务的描述，表示详细信息

在“Models”文件夹中添加一个新的C＃文件Task.cs。将模型类Task声明如下：

public class Task {
    public Guid Id { get; set; }
    public string Title { get; set; }
    public string Description { get; set; }
}

创建视图模型

现在，我们将创建一个名为TaskViewModel的视图模型类，该类包含有关待办事项的所有信息。我们需要在视图模型中添加以下属性：

• Tasks : 具有任务列表的可观察集合
• NewTask : 包含新任务标题和说明的字符串数组
• AddTaskCommand : 添加新任务的命令
• DeleteTaskCommand : 删除完成的任务的命令
• TaskCompletedCommand : 在任务完成时执行的命令

在“ViewModels”文件夹中添加一个新的C＃文件TaskViewModel.cs。将视图模型类TaskViewModel声明如下：

public class TaskViewModel : INotifyPropertyChanged {
    public ObservableCollection<Task> Tasks { get; set; }
    public string[] NewTask { get; set; }
    public ICommand AddTaskCommand { get; set; }
    public ICommand DeleteTaskCommand { get; set; }
    public ICommand TaskCompletedCommand { get; set; }

    public event PropertyChangedEventHandler PropertyChanged;

    /* 构造函数中初始化属性的默认值 */
    public TaskViewModel() {
        Tasks = new ObservableCollection<Task>();
        AddTaskCommand = new Command(() => AddTask());
        DeleteTaskCommand = new Command((id) => DeleteTask(id));
        TaskCompletedCommand = new Command((id) => TaskCompleted(id));
    }

    /* 添加新任务的方法 */
    private void AddTask() {
        var task = new Task() {
            Id = Guid.NewGuid(),
            Title = NewTask[0],
            Description = NewTask[1]
        };

        Tasks.Add(task);
        NewTask = new string[2];  //清空表单
        OnPropertyChanged(nameof(NewTask));
    }

    /* 删除完成的任务的方法 */
    private void DeleteTask(object id) {
        var taskToRemove = Tasks.SingleOrDefault(task => task.Id == (Guid)id);
        if (taskToRemove != null) {
            Tasks.Remove(taskToRemove);
        }
    }

    /* 标记已完成的任务的方法 */
    private void TaskCompleted(object id) {
        var taskToUpdate = Tasks.SingleOrDefault(task => task.Id == (Guid)id);
        if (taskToUpdate != null) {
            taskToUpdate.Description = "COMPLETED";
        }
    }

    /* INotifyPropertyChanged实现 */
    protected virtual void OnPropertyChanged(string propertyName) {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

现在，我们拥有应用程序模型和视图模型的架构，该架构支持我们的应用程序所需的所有逻辑。接下来，我们将组建视图并绑定这些视图到视图模型。

构建视图

现在，我们将构建一个包含Todo List的简单页面。在“Views”文件夹中添加一个新的XAML页面TodoListPage.xaml，编写如下XAML代码：

<ContentPage x:Class="TodoList.Views.TodoListPage"
             xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Name="TodoListPage"
             Title="Todo List">
    <StackLayout Orientation="Vertical" Spacing="10">
        <StackLayout Orientation="Horizontal" Spacing="10">
            <Entry Text="{Binding NewTask[0]}" Placeholder="Title" HorizontalOptions="FillAndExpand" />
            <Entry Text="{Binding NewTask[1]}" Placeholder="Description" HorizontalOptions="FillAndExpand" />
            <Button Text="Add" Command="{Binding AddTaskCommand}" HorizontalOptions="Start" />
        </StackLayout>
        <ListView ItemsSource="{Binding Tasks}">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <Grid Padding="5">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*" />
                                <ColumnDefinition Width="80" />
                            </Grid.ColumnDefinitions>
                            <StackLayout>
                                <Label Text="{Binding Title}" Style="{DynamicResource ListItemTextStyle}" />
                                <Label Text="{Binding Description}" Style="{DynamicResource ListItemDetailTextStyle}" />
                            </StackLayout>
                            <StackLayout Grid.Column="1" VerticalOptions="Center">
                                <Button Text="Done" Command="{Binding Source={x:Reference TodoListPage}, Path=BindingContext.TaskCompletedCommand}" CommandParameter="{Binding Id}" />
                                <Button Text="Delete" Command="{Binding Source={x:Reference TodoListPage}, Path=BindingContext.DeleteTaskCommand}" CommandParameter="{Binding Id}" />
                            </StackLayout>
                        </Grid>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </StackLayout>
</ContentPage>

该页面包括：

1. 两个Entry控件，用于输入新任务的标题和说明。
2. 一个Button控件，用于添加新任务。
3. 一个ListView控件，将任务图表呈现为列表。对于每个任务，它都显示了标题和说明，以及两个呼叫任务完成和删除命令的按钮。

绑定视图到视图模型

我们已经定义了应用程序页面的UI，接下来，我们将在代码中绑定视图到视图模型。打开TodoListPage.xaml.cs，并在构造函数中添加以下代码：

BindingContext = new TaskViewModel();

现在，应用程序页面已完全连接到视图模型，这意味着页面中的控件现在已与视图模型属性绑定。我们已经创建了一个MVVM模式应用程序！最后，我们将在不同平台上测试应用程序。

测试您的应用程序

构建和运行应用程序后，您可以使用以下操作测试它：

1. 在待办事项列表的底部，输入标题和说明，并单击“Add”按钮添加新任务。
2. 单击列表视图中的“Done”按钮，任务将被标记为完成并显示“COMPLETED”。
3. 单击列表视图中的“Delete”按钮，任务将从列表中删除。

结论

恭喜！现在你已经了解了如何使用MVVM模式构建Xamarin.Forms应用程序的基础知识。结合上述步骤，您可以通过模型，视图和视图模型进行代码分离，提高应用程序的可重用性和可测试性，进一步优化您的开发体验！