Xamarin.Forms 之我的花园-1.增删查改

1 简介

1.1 背景

一直以来都在关注Xamarin的发展以及基于.Net的跨平台解决方案，尤其是微软收购Xamarin以及 .Net Core 出来之后，给我们C#开发者带来了很多的希望和想象。本文通过一个叫MyGarden的App Demo来实现对植物数据的增删查改功能，给大家分享一下基于C# Xamarin.Forms 3.1 和 .Net Standard 2.0来同时开发iOS和安卓app的一点经历。并且计划通过后面一系列的文章来补充和完善这个Demo，和大家共同学习和交流。为了减少篇幅本文不会涉及任何数据存储，而是通过模拟实现IPlantService接口的方式来模仿跟云端API进行数据交互。

1.2 先来看一下图

界面	iOS 模拟器预览	Android模拟器预览
初始界面
删除植物
植物详情
添加或修改植物

2 前提条件

本Demo基于VS Community 2017 for Mac开发，Mac下的开发环境搭建可以参考这里, Windows开发环境搭建方法在这里。

3 项目构建

1、新建Solution然后选择Blank Forms App	2、App Name是安装到手机时显示的名称
3、 Git版本控制和UI Test Project 可不选	4、项目构建完毕后会有以下3个Project（MyGarden.Tutorial1就是共享给iOS和安卓端的Xamarin.Forms代码，没有平台特殊要求的话，一般就在这个项目下编码）

试编译

选择MyGarden.Tutorial1.iOS->Debug->iPhone 6 iOS 11.4 运行iOS模拟器。
选择MyGarden.Tutorial1.Android->Debug->Android_Accelerated_x86(API 23) 运行Android模拟器。

编译成功后会在各自平台模拟器分别看到类似以下的画面：

iOS模拟器 iPhone 6 iOS 11.4 下编译预览	安卓模拟器 Android_Accelerated_x86(API23) 下编译预览

4 添加代码

试编译成功后我们可以开始给项目添加代码了，我们会用到MVVM的方式来进行构建，并会用到MvvmHelpers类库中的基类。因此首先我们在Nuget添加MvvmHelpers这个库，并在MyGarden.Tutorial1根目录添加以下文件夹：‘Resources‘、‘Services‘、‘Models‘、‘ViewModels‘、‘Views‘。如下图：

1.在Nuget添加Refactored.MvvmHelpers类库	2.新建文件夹

4.1 Models

在Models文件夹下面添加以下几个实体类

   //花期
   public class BloomTime
   {
   
       public long Id {
    get; set; }
       public int Month {
    get; set; }          //开花的月份
       public long PlantId {
    get; set; }
   }

    //花色
    public class FlowerColor
    {
   
        public long Id {
    get; set; }
        public string Color {
    get; set; }       //颜色代码(#faf3e6)
        public long PlantId {
    get; set; }
    }

	//植物图片
    public class PlantPhoto
    {
   
        public long Id {
    get; set; }
        public string Path {
    get; set; }        //图片路径名称
        public long PlantId {
    get; set; }
    }

    public class Plant:ObservableObject
    {
   
        public long Id {
    get; set; }

        private string _name; 
        public string Name
        {
   
            get {
    return _name; }
            set {
    SetProperty(ref _name, value); }
        }

        private string _type;   //类型：一年生、两年生、多年生
        public string Type
        {
   
            get {
    return _type; }
            set {
    SetProperty(ref _type, value); }
        }

        private int? _hZoneMin, _hZoneMax;  //最小、最大耐寒区
        public int? HardinessZoneMin
        {
   
            get {
    return _hZoneMin; }
            set
            {
   
                SetProperty(ref _hZoneMin, value);
                OnPropertyChanged("HardinessZone");
            }
        }

        public int? HardinessZoneMax
        {
   
            get {
    return _hZoneMax; }
            set
            {
   
                SetProperty(ref _hZoneMax, value);
                OnPropertyChanged("HardinessZone");
            }
        }

        private string _height="-";         //植物高度
        public string PlantHeight
        {
   
            get {
    return _height; }
            set {
    SetProperty(ref _height, value); }
        }

        private string _desc;
        public string Description
        {
   
            get {
    return _desc; }
            set {
    SetProperty(ref _desc, value); }
        }

        private ImageSource _displayPhoto;
        public ImageSource DisplayPhoto
        {
   
            get {
    return _displayPhoto; }
            set {
    SetProperty(ref _displayPhoto, value); }
        }
        public List<BloomTime> BloomTimes {
    get; set; }         //花期
        public List<FlowerColor> FlowerColors {
    get; set; }     //花色
        public List<PlantPhoto> PlantPhotos {
    get; set; }       //图片
 
		//最大耐寒区（只读）显示为：HardinessZoneMin-HardinessZoneMax, eg.‘4-9‘
		public string HardinessZone
        {
   
            get
            {
   
                if (HardinessZoneMin.HasValue && HardinessZoneMax.HasValue)
                {
   
                    return $"{HardinessZoneMin.Value}-{HardinessZoneMax.Value}";
                }
                return "-";
            }
        }

		//花期（只读）, 显示为：Month,Month,Month...
        public string FlowerDate
        {
   
            get
            {
   
                StringBuilder date = new StringBuilder(20);
                if (BloomTimes != null)
                {
   
                    foreach (var time in BloomTimes)
                    {
   
                        date.Append(time.Month + ",");
                    }
                    if (date.Length > 0)
                    {
   
                        date.Remove(date.Length - 1, 1);
                    }
                }
                else
                {
   
                    date.Append("-");
                }
                return date.ToString();

            }
        }
    }

4.2 数据源

IPlantService是数据源的接口，这里假设要调用WebAPI后端服务，通过MockPlantService实现该接口来模拟对服务的调用。后期开发好WebAPI可以简单切换。下面在Services文件夹下创建IPlantServies和MockPlantSerice。

IPlantService

using System.Collections.Generic;
using System.Threading.Tasks;
using MyGarden.Tutorial1.Models;
using Xamarin.Forms;

namespace MyGarden.Tutorial1.Services
{
   
    public interface IPlantService
    {
   
	    //下载所有植物
        Task<List<Plant>> GetAllPlantsAsync();
        //根据id查找植物
        Task<Plant> GetPlantByIdAsync(long id);
        //添加植物
        Task AddPlantAsync(Plant plant);
        //更新
        Task UpdatePlantAsync(long id, Plant plant);
        //删除
        Task RemovePlantAsync(long id);
        //上传图片
        Task UploadPlantPhotosAsync(List<PlantPhoto> photos);
        //获取图片
        Task<ImageSource> GetImageAsync(string path);
    }
}

MockPlantService

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using MyGarden.Tutorial1.Models;
using Xamarin.Forms;

namespace MyGarden.Tutorial1.Services
{
   
    public class MockPlantService : IPlantService
    {
   

        public List