如何在 Xamarin PCL 项目中进行数据绑定

Question

我想使用 Xamarin 在 xaml 中创建一个简单的登录 UI。我在主页中使用条目创建一个用户名和密码字段，然后尝试将它们绑定到我的登录视图模型，在那里我可以访问我的连接方法。

当我在主页代码中定义绑定上下文时，应用程序只是关闭，我不明白为什么，我做错了什么？

MainPage.xaml

<?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:suivAAndroid"
             x:Class="suivAAndroid.MainPage">
    <StackLayout
        VerticalOptions="CenterAndExpand">
        <Image></Image>
    <Label
        Text="Login"
        StyleId="lbl_login"></Label>
    <Entry
        StyleId="ent_login"
        Text="{Binding Username}"></Entry>
        <Label
            Text="Mot de passe"
            StyleId="ent_mdp"></Label>
        <Entry
            StyleId="ent_mdp"
            Text="{Binding Password}"></Entry>
        <Button 
            Clicked="connexion_click"
            Text="Connexion"></Button>
    </StackLayout>
</ContentPage>

MainPage.xaml.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;
using Xamarin.Forms.Xaml;
namespace suivAAndroid
{
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
            BindingContext = new LoginViewModel(); // Here is where it does not work. If the line is commented out, then the application launch without stopping but because there is no binding context I cant get the user inputs.
        }

        private void connexion_click(object sender, EventArgs e)
        {
            LoginViewModel connexionBtn = new LoginViewModel();
            Device.BeginInvokeOnMainThread(async () =>
                {
                    await connexionBtn.Connexion();
                });
        }
    }
}

登录视图模型.cs

using suivAAndroid.Models;
using suivAAndroid.Views;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
namespace suivAAndroid
{
    public class LoginViewModel
    {
        #region propriétés
        public string Username
        {
            get
            {
                return Username;
            }
            set
            {
                Username = value;
            }
        }
        public string Password
        {
            get
            {
                return Password;
            }
            set
            {
                Password = value;
            }
        }
        #endregion
        #region constructor
        public LoginViewModel()
        {
        }
        #endregion
        #region methodes
        public void CreerListeVisiteurDur(List<Visiteur> uneListe)
        {
            Visiteur unVisiteur = new Visiteur("Clooney", "George", "cgeorge", "azerty", "rue du port", "59", "lille", new DateTime(2015 / 07 / 13));
            uneListe.Add(unVisiteur);
        }
        public async Task Connexion()
        {
            List<Visiteur> uneListe = new List<Visiteur>();
            CreerListeVisiteurDur(uneListe);
            if (!string.IsNullOrEmpty(Username) && !string.IsNullOrEmpty(Password))
            {
                foreach (Visiteur unVisiteur in uneListe)
                {
                    string login = unVisiteur.login;
                    string pass = unVisiteur.mdp;
                    if (login == Username && pass == Password)
                    {
                        App.Current.MainPage = new CreerVisite();
                    }
                }
            }
        }
        #endregion
    }
}

Answer 1

您的 ViewModel 属性具有无限循环：

    public string Username
    {
        get
        {
            return Username;
        }
        set
        {
            Username = value;
        }
    }

呼叫Username = value将在Username上呼叫set，而又再次呼叫Username = value。

此外，为了使视图模型可绑定，必须实现INotifyPropertyChanged 。

如果你想要一个易于使用的框架来帮助你做到这一点，我建议使用Mvvm Light。

下面是您的 ViewModel 应该是什么样子的示例：

public class MyViewModel : INotifyPropertyChanged
{
     public event EventHandler<PropertyChangedEventArgs> OnPropertyChanged;
     private string _username;
     public string Username
     {
         get
         {
             return _username;
         }
         set
         {
             _username = value;
             PropertyChanged?.Invoke(new PropertyChangedEventArgs("Username");
         }
     }
....
}

Answer 2

1. connexion_click，您将创建 VM 的新副本，该副本与您为 BindingContext 创建的先前副本无关。

   公共分部类 主页 ： 内容页 { 私有登录视图模型虚拟机;

       public MainPage()
       {
           InitializeComponent();
           vm = new LoginViewModel();
           BindingContext = vm;
       }
   
       private void connexion_click(object sender, EventArgs e)
       {
           Device.BeginInvokeOnMainThread(async () =>
               {
                   await vm.Connexion();
               });
       }
   }
   

2. 您的 VM 应实现 INotifyPropertyChanged

3. 您的 VM 具有递归吸气器