如何在 Xamarin 中将视图模型绑定到 XAML 中的视图？答案

【问题标题】：How do you bind a View Model to the View in XAML in Xamarin?如何在 Xamarin 中将视图模型绑定到 XAML 中的视图？
【发布时间】：2020-01-29 18:53:18
【问题描述】：

我有一个非常基本的观点。

<ContentPage x:Class="ThetaRex.InvestmentManager.Merlin.Views.ScenarioSelectionPage"
             Title="{Binding Title}"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns="http://xamarin.com/schemas/2014/forms">
    <StackLayout>
        <ListView ItemsSource="{Binding Items}"/>
    </StackLayout>
<ContentPage/>

后面的代码也很简单：

namespace ThetaRex.InvestmentManager.Merlin.Views
{
    using System.ComponentModel;
    using ThetaRex.InvestmentManager.Merlin.ViewModels;
    using Xamarin.Forms;

    public partial class ScenarioSelectionPage : ContentPage
    {
        public ScenarioSelectionPage()
        {
            InitializeComponent();
            this.BindingContext = this.ViewModel = new ScenarioSelectionViewModel();
        }

        public ScenarioSelectionViewModel ViewModel { get; set; }

        protected override void OnAppearing()
        {
            base.OnAppearing();
            ViewModel.LoadItemsCommand.Execute(null);
        }
    }
}

来自 WPF 和 UWP 中的纯 MVVM 环境，我想将视图绑定到 XAML 中的视图模型，而不是在后面的代码中使用 this.Binding = ViewModel。我试过了：

<ContentPage x:Class="ThetaRex.InvestmentManager.Merlin.Views.ScenarioSelectionPage"
             xmlns:controls="clr-namespace:ThetaRex.InvestmentManager.Merlin.Controls"
             BindingContext="{Binding ViewModel}"
             Title="{Binding Title}"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns="http://xamarin.com/schemas/2014/forms">

但它没有用。如何从 XAML 绑定到 ViewModel？

注意：我知道我可以在 XAML 中从头开始创建视图模型，但它不使用视图后面的代码使用的相同实例，所以这不是一个选项。

【问题讨论】：

Set BindingContext to ViewModel in XAML on Xamarin.Forms的可能重复
@sermet - 这不是重复的。见注释。该解决方案创建了一个 View 无法访问的全新 ViewModel。视图要求它必须能够调用其视图模型上的方法。例如，在上面的示例中，在初始化时执行 LoadItemsCommand。
var vm = BindingContext as ScenarioSelectionViewModel; vm.LoadItemsCommand.Execute(null);

标签： xamarin mvvm binding

【解决方案1】：

如果我明白你想要什么，解决方案是像这样构建一个 ViewModelLocator：

ViewModelLocalizator 类

public static class ViewModelLocalizator
{
    public static readonly BindableProperty AutoWireViewModelProperty =
           BindableProperty.CreateAttached("AutoWireViewModel", typeof(bool), typeof(ViewModelLocalizator), default(bool), propertyChanged: OnAutoWireViewModelChanged);

    public static bool GetAutoWireViewModel(BindableObject bindable)
    {
        return (bool)bindable.GetValue(AutoWireViewModelProperty);
    }

    public static void SetAutoWireViewModel(BindableObject bindable, bool value)
    {
        bindable.SetValue(AutoWireViewModelProperty, value);
    }

    /// <summary>
    /// VERIFY THE VIEW NAME AND ASSOCIATE IT WITH THE VIEW MODEL OF THE SAME NAME. REPLACING THE 'View' suffix WITH THE 'ViewModel'
    /// </summary>
    private static void OnAutoWireViewModelChanged(BindableObject bindable, object oldValue, object newValue)
    {
        if (!(bindable is Element view))
        {
            return;
        }

        var viewType = view.GetType();

        var viewModelName = viewType.FullName.Replace(".Views.", ".ViewModels.").Replace("Page", "ViewModel");
        var viewModelType = Type.GetType(viewModelName);

        if (viewModelType == null) { return; }

        var vmInstance = Activator.CreateInstance(viewModelType);

        if (vmInstance != null)
        {
            view.BindingContext = vmInstance;
        }
    }
}

在您的视图中使用它

<ContentPage x:Class="YourProject.Views.YourTestPage"
             Title="{Binding Title}"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:viewModelBase="clr-namespace:YourProject.ViewModels;assembly=YouProject"
             viewModelBase:ViewModelLocalizator.AutoWireViewModel="true"
>
    <StackLayout>
        <ListView ItemsSource="{Binding Items}"/>
    </StackLayout>
<ContentPage/>

【讨论】：