xaml - 如何将页面中的条目与 ViewModel 绑定(bind)

Question

我正在尝试像这样实现登录系统:

public Command LoginCommand => new Command(async () =>
        {
            LoginModel model = new LoginModel("dnetTest", "dnetTest"); // (get value from entry instead of "dnetTest")

        if (model.CheckInformation())
        {
            bool isSuccess = await LoginService.Login(model);
            if (isSuccess)
            {
                await Application.Current.MainPage.DisplayAlert("Пријављивање", "Успешно сте се пријавили", "OK.");
                Application.Current.MainPage = new MainPage();
            }
        }

我的 LogingPage 也有:

 <Label Text="Korisničko ime"/>
 <Entry x:Name="Entry_Username" Placeholder="Korisničko ime"/>
 <Label Text="Lozinka"/>
 <Entry x:Name="Entry_Password" Placeholder="Lozinka"/>
 <Button Text="Prijavi se" Command="{Binding LoginCommand}"/>

那么，我的问题是如何在 LoginViewModel 中将 Entry_Username 和 Entry_Password 与 LoginModel 绑定(bind)？
有没有什么方法可以在不使用 x:Names 的情况下绑定(bind)它？

Answer 1

公平起见;这是一个很容易找到的非常基本的 MVVM 问题，其解决方案在多个博客和页面中。但是，让我帮你开始吧。

And is there any way to bind it without using x:Names?

数据绑定(bind)的全部意义在于您不必对这些控件进行任何硬引用。我们希望将逻辑与 UI 分离，以便我们可以轻松地替换一个或两个，而无需触及另一个。例如，假设您想实现一个新设计，如果您使用数据绑定(bind)，则可以在 View 模型(或在 Xamarin 空间中引用的页面模型)中显示当前属性，如果您引用那些在您的新 UI 中。

如果你有各种 x:Name引用，您不仅要触摸您的 UI，还要触摸 View 模型，并浏览对这些字段的所有引用并替换它们。

使用数据绑定(bind)主要促进了可重用性和可测试性。

至于你的具体情况。我看不到你的完整代码，所以这里会有一些假设。首先，我假设您的 LoginCommand现在生活在自己的 View 模型中。您已经在那里使用数据绑定(bind)，这很好。我不直接明白为什么您需要一个单独的模型来用于 View 模型和登录，可能是您的 LoginModel更像是一种服务。另外，我假设您在没有 MVVM 框架的帮助下手动执行此操作。很高兴知道引擎盖下发生了什么，但我建议使用 MVVM 框架，例如 FreshMvvm 或 Prism。

保存您的 XAML 的登录页面，我将调用 LoginPage.xaml应该有 LoginPage.xaml.cs代码隐藏文件。在那里，进入构造函数并指定这一行:

public LoginPage()
{
    InitializeComponents();

    // This line is relevant here
    BindingContext = new LoginViewModel();
}

看到你的 LoginCommand已经在使用数据绑定(bind)，这可能已经在这里了。

现在，在您的 LoginPage.xaml ，将您的 XAML 更改为:

 <Label Text="Korisničko ime"/>
 <Entry Text="{Binding Username}" Placeholder="Korisničko ime"/>
 <Label Text="Lozinka"/>
 <Entry Text="{Binding Password}" Placeholder="Lozinka"/>
 <Button Text="Prijavi se" Command="{Binding LoginCommand}"/>

请注意我如何删除 x:Name属性并添加了 Text两个 Entry 上的属性控制。

接下来，进入您的 LoginViewModel.cs并添加两个属性，如下所示:

public string Username { get; set; }
public string Password { get; set; }

每当您的 Entry 中的文本发生变化时控件，这些属性应包含相应的值。现在，您可以将发布的代码更改为以下内容:

public Command LoginCommand => new Command(async () =>
{
    // Notice how I changed this line
    LoginModel model = new LoginModel(Username, Password);

    if (model.CheckInformation())
    {
        bool isSuccess = await LoginService.Login(model);
        if (isSuccess)
        {
            await Application.Current.MainPage.DisplayAlert("Пријављивање", "Успешно сте се пријавили", "OK.");
            Application.Current.MainPage = new MainPage();
        }
    }

这应该适合你!

如前所述，我建议进一步研究整个 MVVM 以及 MVVM 框架。这里是 official Docs page , a good writeup通过亚当佩德利和一些东西 I wrote myself一会儿回来。