C#开发Android移动应用系列之数据绑定

接上一篇，继续分享通过Xamarin开发移动端应用

• 数据绑定

1. 在Models中创建一个数据类

public class Person : INotifyPropertyChanged
{
    private string name;
    private string age;

    public string Name
    {
        get { return name; }
        set
        {
            if (name != value)
            {
                name = value;
                OnPropertyChanged(nameof(Name));
            }
        }
    }

    public string Age
    {
        get { return age; }
        set
        {
            if (age != value)
            {
                age = value;
                OnPropertyChanged(nameof(Age));
            }
        }
    }

    public event PropertyChangedEventHandler PropertyChanged;

    protected virtual void OnPropertyChanged(string propertyName)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

数据模型类必须实现INotifyPropertyChanged接口，并在属性更改时触发PropertyChanged事件。这样当属性更改时，UI将得到通知并自动更新。

2. 在ViewModel中创建两个类：一个是集合类，一个是展示用的Cell类

using System;
using System.Collections.Generic;
using System.Text;
using Xamarin.Forms;
using XamarinApp1.Models;

namespace XamarinApp1.ViewModels
{
    public class ViewModel
    {
        public List<Person> People { get; set; }
    }

    public class PersonCell : ViewCell
    {
        public PersonCell()
        {
            var grid = new Grid();
            grid.ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(1, GridUnitType.Star) });
            grid.ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(1, GridUnitType.Star) });

            var label1 = new Label() { HorizontalOptions = LayoutOptions.Center, VerticalOptions = LayoutOptions.Center };
            var label2 = new Label() { HorizontalOptions = LayoutOptions.Center, VerticalOptions = LayoutOptions.Center };

            label1.SetBinding(Label.TextProperty, "Name");  //绑定属性
            label2.SetBinding(Label.TextProperty, "Age");

            grid.Children.Add(label1);
            grid.Children.Add(label2, 1, 0); // 设置第二个Label的列索引为1，将其放置在第二列

            View = grid;
        }
    }
}

3. 在内容页Page1.xaml.cs的代码中，设置数据模型并将其作为BindingContext

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

using Xamarin.Forms;
using Xamarin.Forms.Xaml;
using XamarinApp1.Models;
using XamarinApp1.ViewModels;

namespace XamarinApp1.Views
{
    [XamlCompilation(XamlCompilationOptions.Compile)]
    public partial class Page1 : ContentPage
    {
        public List<Person> people = new List<Person>();

        public Page1()
        {
            InitializeComponent();

            Person person1 = new Person() { Name = "John Doe", Age = "18" };
            Person person2 = new Person() { Name = "Jack Ma", Age = "52" };
            Person person3 = new Person() { Name = "Elon Mask", Age = "58" };
            Person person4 = new Person() { Name = "Tom Cruse", Age = "23" };
            Person person5 = new Person() { Name = "Bluce Willis", Age = "68" };
            people.Add(person1);
            people.Add(person2);
            people.Add(person3);
            people.Add(person4);
            people.Add(person5);

            BindingContext = new ViewModel { People = people };
        }
    }
}

4. 在内容页Page1.xaml中定义UI元素，并将其绑定到数据模型的属性

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:XamarinApp1.ViewModels"
             x:Class="XamarinApp1.Views.Page1">
    <ContentPage.Content>
        <StackLayout>
            <Label Text="People List" FontSize="24"
                HorizontalOptions="CenterAndExpand" />
            <ListView ItemsSource="{Binding People}">
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <local:PersonCell />
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>
        </StackLayout>
    </ContentPage.Content>
</ContentPage>