Xamarin.Forms和MVVM

mvvmlightxamarin.

Xamarin.Forms允许在XAML中编写UIS,并介绍使用绑定填充UI的选项。再次允许以MVVM式的方式编写应用程序。我是一个巨大的粉丝 劳伦加奖 MVVM 光 框架自几个月以来不仅支持Xamarin.forms,还支持IOS,Android和Windows(WPF,Store Apps,Silverlight等)。它附带了许多助手来实现MVVM模式,并为您提供一个漂亮的性能提升..没有时间与样板代码丢失。

在这篇文章中,我会告诉你如何:

  1. 将MVVM灯安装到您的项目中
  2. 设置控制的反转(IOC)容器
  3. 将ViewModel绑定到视图中
  4. 实施一个命令
  5. 从ViewModel致电后面的代码

安装MVVM灯

mvvm灯是一个 尼古特 您可以通过使用Nuget Package Manager下载的包。只需右键单击您的解决方案, 管理解决方案的Nuget软件包......, 在下面 在线的 搜索MVVM灯。最后安装了 MVVM 光 Libraries仅包装 到解决方案中的所有项目。

设置控制容器的反转

首先,我们必须做一点设置和配置。这似乎似乎是一个开销,但随着时间的推移,这将真正退还,因为我们能够使用IOC容器轻松地通过改变一行代码来在存根和实际实现之间切换。

允许允许创建一个基本的视图,该模型将提供从服务提供的人员列表中提供的全名列表。

public class MainViewModel : ViewModelBase{    private readonly IPeopleService _peopleService;    ObservableCollection<Person> People { get; set; }    public MainViewModel(IPeopleService peopleService)    {        if (peopleService == null) throw new ArgumentNullException("peopleService");        _peopleService = peopleService;    }    public async Task Init()    {        if (People != null) return;        People = new ObservableCollection<Person>(await _peopleService.GetPeople());    }}

现在让我们创建一个人的服务,这将是以下界面的实现。

public interface IPeopleService{    Task<IEnumerable<Person>> GetPeople();}

这导致以下课程。

public class PeopleServiceStub:IPeopleService{    public Task<IEnumerable<Person>> GetPeople()    {        const int numberOfPeopleToGenerate = 100;        return Task.Run(() => GeneratePeople(numberOfPeopleToGenerate));    }    private IEnumerable<Person> GeneratePeople(int personCount)    {        var people = new List<Person>(personCount);        for (int i = 0; i < personCount; ++i)        {            people.Add(new Person(NameGenerator.GenRandomFirstName(), NameGenerator.GenRandomLastName()));        }        return people;    }}

现在我们必须设置IOC容器,它将自动注入我们刚刚定义的人员服务。

public class Locator{    /// <summary>    /// Register all the used ViewModels, Services et. al. witht the IoC Container    /// </summary>    public Locator()    {        ServiceLocator.SetLocatorProvider(() => SimpleIoc.Default);        // ViewModels        SimpleIoc.Default.Register<MainViewModel>();        // Services        SimpleIoc.Default.Register<IPeopleService, PeopleServiceStub>();    }    /// <summary>    /// Gets the Main property.    /// </summary>    [System.Diagnostics.CodeAnalysis.SuppressMessage("Microsoft.Performance",        "CA1822:MarkMembersAsStatic",        Justification = "This non-static member is needed for data binding purposes.")]    public MainViewModel Main    {        get { return ServiceLocator.Current.GetInstance<MainViewModel>(); }    }}

如果我们想在Web服务上消耗人员列表,我们现在可以简单地根据接口实现新类。在定位符类中,我们必须简单地更改使用新实现的线路和所有需要构造函数中的接口的所有类都将接收新实现。这成为一个非常强大的方法,用于开发移动应用程序而不完成后端或呈现,因为它也可能仍然存在,或者您想要执行演示而不依赖于网络连接。

在最后一步中,我们必须将定位器注册到应用程序上下文。这是在的 app.cs. 通过添加以下行:

private readonly Locator _locator;public Locator Locator{    get { return _locator; }}public App(){    _locator = new Locator();    ...}

将ViewModel绑定到视图中

现在我们拥有所有的“业务逻辑”设置,让我们将其显示为Xamarin.forms XAML页面。 fore fore添加一个新的xamarin.forms XAML页面到PCL项目。在设置绑定上下文后面的代码中。

public partial class MainPage : ContentPage{    public MainPage()    {        InitializeComponent();        BindingContext = App.Locator.Main;    }    // ...}

并调整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"             x:Class="XamarinFormsMVVMLight.MainPage">    <ListView x:Name="PeopleListView" ItemsSource="{Binding People}"     ItemSelected="ListView_OnItemSelected"              >        <ListView.ItemTemplate>            <DataTemplate>                <TextCell Text="{Binding FullName}" />            </DataTemplate>        </ListView.ItemTemplate>    </ListView></ContentPage>

如果我们运行应用程序,它将显示我们生成的所有名称。在下一步中,允许导航到提供所选人员的详细视图。

public partial class MainPage : ContentPage{    // ...    private void ListView_OnItemSelected(object sender, SelectedItemChangedEventArgs e)    {        Navigation.PushAsync(new DetailPage((Person) PeopleListView.SelectedItem));    }}

在详细信息页面上,让我们添加一个允许我们连接到的按钮 relaycommand. 在ViewModel中。这 relaycommand. 是由MVVM灯提供的整洁助手帮助您创建一个 Icommand. 使用最少代码实现。

public class DetailViewModel : ViewModelBase{    public DetailViewModel()    {        // ...        ClickMeCommand = new RelayCommand(ClickMeCallBackAction);    }    public ICommand ClickMeCommand { get; set; }    // ...}

#

从ViewModel中调用UI代码

选择时,我们将在弹出窗口中显示所选的用户名。现在,我们不想在我们的视图中拥有任何UI依赖代码,因为这意味着我们无法将我们的视图插入到其他平台上。 Xamarin.android,Xamarin.ios或Windows。此外,我们无法编写任何单元测试,因为它将始终需要待存在的UI线程。因此,我们必须在后面的代码中显示邮件框。为此,我们可以在ViewModel中实现一个小的回调函数:

public class DetailViewModel : ViewModelBase{    public DetailViewModel()    {        // ...    }    // ...    public Action ClickMeCallBackAction { get; set; }}

在我们的代码中设置了适当的操作:

public partial class DetailPage : ContentPage{    public DetailPage(Person person)    {        // ...        viewModel.ClickMeCallBackAction = () => DisplayAlert("Hello", viewModel.Person.FullName, "Ok");    }}

这允许我们的ViewModel致电UI代码,而无需了解实现。我建议将回调动作设置为构造函数中的空函数以防止任何空例外。

public class DetailViewModel : ViewModelBase{    public DetailViewModel()    {        ClickMeCallBackAction = () => { };        // ...    }    // ...}

结论

MVVM 是一个很好的模式,用于将UI与业务逻辑分开。 MVVM灯是一款伟大的助手,无需将大量时间投入到锅炉板代码中,即将您的时间集中在项目期间不断为客户带来的时间。

你可以找到 整个代码 on GitHub.

Technorati标签: Xamarn.forms.,MVVM ,XAML.,MVVM 光

Updated: