Xamarin.Android和MVVM光线绑定

androidmvvmlight.

本周我们将看看我们如何使用Xamarin.android上的MVVM模式使用MVVM Light Framework Laurent Bugnion..

创建视图

对于此示例,允许使用一个基本的入口视图 Edittext. , 按钮**和** TextView 显示通过按钮提交的条目。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
    <EditText
        android:id="@+id/MessageText"
        android:hint="@string/MessageTextHint"
        android:layout_marginTop="10dp"
        android:layout_marginBottom="10dp"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content" />
    <Button
        android:id="@+id/SubmitMessage"
        android:layout_marginBottom="10dp"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="@string/SubmitMessage" />
    <TextView
        android:id="@+id/SubmittedMessage"
        android:layout_marginBottom="10dp"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="@string/SubmittedMessageText" />
</LinearLayout>

你可以观察到这是一个标准 linearlayout. 包含默认的Android控件。使用MVVM灯,我们没有选择MVVM交叉中的选项,以直接在AXML中设置绑定代码,但稍后将如何完成。所以让我们设置相应的ViewModel。

创建ViewModel.

在ViewModel中,我们需要一个物业来存储输入的消息,另一个属于公开一个icommand,我们可以绑定到按钮,最后是我们可以存储在按下按钮时输入的消息的第三个属性:

public class MainViewModel : ViewModelBase
{
    private string _message;
    private string _previousMessage;

    public MainViewModel()
    {
        MessageCommand = new RelayCommand<string>(SubmitMessage);
    }

    public RelayCommand<string> MessageCommand { get; private set; }

    private void SubmitMessage(string message)
    {
        PreviousMessage = message;
    }

    public string PreviousMessage
    {
        get { return _previousMessage; }
        set
        {
            _previousMessage = value;
            RaisePropertyChanged(propertyName: nameof(PreviousMessage));
        }
    }

    public string Message
    {
        get { return _message; }
        set
        {
            _message = value;
            RaisePropertyChanged(propertyName: nameof(Message));
        }
    }
}

如果您在使用此代码之前没有注意到任何普通普通的ViewModels,这意味着您可以重用此ViewModel以获取WPF,Windows 8,UWP应用程序甚至Xamarin.ios i.e.Xamarin.Forms应用程序。 (这很好 眨眼微笑)

设置定位器

我们要制作的另一步是确保将在控制容器的反转中创建和设置ViewModel和任何未来的服务。 MVVM Light为我们提供通常在其中设置的SimpleIoc容器 ViewModellocator.cs. 班级。目前,我们只使用一个视图模型,以便我们必须设置所有内容:

public class ViewModelLocator
{
    public ViewModelLocator()
    {
        ServiceLocator.SetLocatorProvider(() => SimpleIoc.Default);

        SimpleIoc.Default.Register<MainViewModel>();
    }

    public MainViewModel Main
    {
        get
        {
            return ServiceLocator.Current.GetInstance<MainViewModel>();
        }
    }

    public static void Cleanup()
    {
        // TODO Clear the ViewModels
    }
}

由于Android中没有固定的起点,我们没有 主要的 方法或以便在启动时配置我们的容器。我个人就像一个懒人容器这样的想法,这是一个唯一在它真正使用的时候创造的。所以让我们创造一个 app.cs. 在我们的Android项目的根中课程。在此类中,我们将实例化定位器并提供对此实例的访问:

public static class App
{
    private static ViewModelLocator _locator;

    public static ViewModelLocator Locator => _locator ?? (_locator = new ViewModelLocator());
}

现在我们拥有所有的基础知识,让我们继续前进到布线的多汁部分。

设置绑定

我们必须在活动中手动设置相应视图的活动中的绑定。在此示例应用程序中,我们将在此处进行 主要的 Activity.cs.。首先,我们加入了 Edittext. :

_messageBinding = this.SetBinding(() => EditMessage.Text, BindingMode.TwoWay);

按钮的命令:

MessageButton.SetCommand("Click", Vm.MessageCommand, _messageBinding);

textview **到**以前的段落 property:

_textViewBinding = this.SetBinding(() => Vm.PreviousMessage, () => PreviousMessage.Text);

现在,每当我们编辑文本并选择该按钮,文本将显示在 textview. bellow.

结论

在这篇文章中,我们看到了我们如何创建一个简单的表单应用程序和写作&从ViewModel读取。我们进一步了解我们如何为Xamarin.Android应用程序设置依赖项注入模块,并确保即使应用程序应使用其他活动启动,该容器正确设置。

您可以找到整个小样本项目 GitHub. .

参考

mvvmlight. 鲜花样本 by Laurent Bugnion.

Updated: