MVVM光线与Xamarin的iOS UITableViews绑定

显示运行的示例应用程序

此帖子将专注于如何将数据集合绑定到视图。在我专注于如何使用数据条目的绑定的另一个帖子中,请务必阅读该一个,以便在使用MVVM灯下读取IOS下的数据绑定。在此帖子中,我们将显示使用标准的人员列表 UITATYVIEW. iOS UI控制。通过两个按钮,我们将能够添加或删除一个人。人民将由服务随机生成,但首先是第一件事。让我们开始创建视图。

模型

人民在掌柜的帮助下产生 namegenerator.cs.,这是一个为随机的第一和姓氏生成的类。

// As found on //digitaltoolfactory.net/blog/2012/04/how-to-make-a-random-name-generator-in-c/
public static class NameGenerator
{
    public static Random rnd = new Random();

    public static string GenRandomLastName()
    {
        List<string> lst = new List<string>();
        string str = string.Empty;
        lst.Add("Smith");
        // ...

        str = lst.OrderBy(xx => rnd.Next()).First();
        return str;
    }
    public static string GenRandomFirstName()
    {
        List<string> lst = new List<string>();
        string str = string.Empty;
        // male
        lst.Add("Aiden");
        // ...

        //female

        lst.Add("Sophia");
        // ...

        str = lst.OrderBy(xx => rnd.Next()).First();
        return str;
    }
}

将访问此类,从而表明视图模型,但我们首先设置该视图。

看法

视图由一个组成 UITATYVIEW. 和二 UIBUTONS. 我们在故事板中添加并命名它们 Peoplableview., addpersonbutton.removepersonbutton..

在创建iOS视图时显示设计器

在列表中设置下一件事之后,在列表中创建视图模型。

查看模型

在视图模型中,我们实现了一个 观察到 持有人员名单和两个 relaycommands. 调用时,从列表中添加并删除一个人:

public class MainViewModel : ViewModelBase
{
    public MainViewModel()
    {
        AddPersonCommand = new RelayCommand(AddPerson);
        RemovePersonCommand = new RelayCommand(RemovePerson);
    }

    public RelayCommand AddPersonCommand { get; set; }
    public RelayCommand RemovePersonCommand { get; set; }
    public ObservableCollection<Person> People { get; private set; }

    public async Task InitAsync()
    {
        if (People != null) return;

        People = new ObservableCollection<Person>();
        var people = await InitPeopleList();
        foreach (var person in people)
        {
            People.Add(person);
        }
    }
}

列表数据以初始化方法异步初始化。现在剩下的是通过绑定将视图模型连接。

配置绑定

绑定在设置中 rootviewController.cs.,它附加到我们即将填充和互动的视图。命令绑定在此中实现 看法 DidLoad. method:

public override async void ViewDidLoad()
{
    base.ViewDidLoad();

    await Vm.InitAsync();

    // Setup bindings
    AddPersonButton.SetCommand("TouchUpInside", Vm.AddPersonCommand);
    RemovePersonButton.SetCommand("TouchUpInside", Vm.RemovePersonCommand);
}

UITATYVIEW.源头设置在 查看Willappear. 方法 - 如果完成 看法 DidLoad. 在开始滚动空白列表之前,您将最初显示您的方法。

public override void ViewWillAppear(bool animated)
{
    base.ViewWillAppear(animated);

    _tableViewController = Vm.People.GetController(CreatePersonCell, BindCellDelegate);
    _tableViewController.TableView = PeopleTableView;
}

在里面 createpersoncell. 方法我们将显示的单元格创建:

private UITableViewCell CreatePersonCell(NSString cellIdentifier)
{
    return new UITableViewCell(UITableViewCellStyle.Default, "Gnabber");
}

如果你想知道:“但细胞回收呢?”好吧,有一些好消息,MVVM光照顾你。当前所说的(第5.1.1版)不支持一个集合的多个单元格模板。

bindcelldelegate 设置单元格的内容:

private void BindCellDelegate(UITableViewCell cell, Person person, NSIndexPath path)
{
    cell.TextLabel.Text = person.FullName;
}

当所有设置时,我们都可以启动应用程序,您将能够将人员添加和删除到列表,而无需进一步反应事件或进一步更新表源。

结论

在此帖子中,您可以看到如何将数据列表绑定到iOS UITATYVIEW.。进一步的示范表明,更改列表的内容并使用新数据更新UI的内容是多么容易。 MVVM光不仅允许将您的视图模型集成在iOS下,但只有在创建iOS时才提供一些不错的小帮助者 tablesource..

再次感谢 Laurent Bugnion. 为我们提供这个伟大的图书馆。

您可以找到整个样本 GitHub. .

Updated: