MvvmNano

Getting started

Preliminary remarks

• MvvmNano ships as three .netstandard 2.0 libraries (MvvmNano.Core, MvvmNano.TinyIoC, and MvvmNano.Forms) and also provides three Portable Class Libraries (PCL) with profile 259 (MvvmNano.Core, MvvmNano.Ninject, and MvvmNano.Forms). NuGet will detect which libraries are needed based on your project type.
• MvvmNano.Forms references Xamarin.Forms
• MvvmNano.Ninject references Portable.Ninject
• MvvmNano.Core does not have and external dependency

Add the NuGet package

You can add MvvmNano easily via NuGet:

Install-Package MvvmNano.Forms

Important: Add it to your Xamarin.Forms library as well as to your native app projects, so NuGet can resolve the right assemblies of the dependencies Xamarin.Forms and Portable.Ninject/.TinyIoC on each target (for example PCL, Xamarin.iOS, Xamarin.Android).

If you want to use our default IoC container, we provide one for .netstandard2.0 and PCL259. The default container for a PCL project is:

Install-Package MvvmNano.Ninject

For .netstandard2.0 projects:

Install-Package MvvmNano.TinyIoC

Add your first View Model and its Page

Your View Model needs to inherit from MvvmNanoViewModel<TNavigationParameter> or MvvmNanoViewModel. Let's start with the latter and thereby without a parameter.

public class LoginViewModel : MvvmNanoViewModel
{
    // ...
}

Now add the Page. Note that by convention it needs to be named after your View Model, except for the ViewModel suffix (so LoginViewModel becomes LoginPage). You also need to inherit from MvvmNanoContentPage<TViewModel>.

public class LoginPage : MvvmNanoContentPage<LoginViewModel>
{
    // ...
}

Set up your App class

Each Xamarin.Forms app has an entry point – a class called App which is derived from Application. Change that base class to MvvmNanoApplication.

Next you are asked to implement the method GetIoCAdapter() which is expected to return an implementation of IMvvmNanoIoCAdapter. Just go with our default choice (MvvmNano.Ninject in a PCL project, which uses Portable.Ninject, MvvmNano.TinyIoC in a .netstandard2.0 project), or go with your own.

You also want to tell your application the first Page and View Model which should be used when the app gets started for the first time. Put this setup inside of OnStart(), but don't forget to call base.OnStart(). This is important in order to set up the Presenter correctly (for more on that see below).

public class App : MvvmNanoApplication
{
    protected override void OnStart()
    {
        base.OnStart();

        SetUpMainPage<LoginViewModel>();
    }

    protected override IMvvmNanoIoCAdapter GetIoCAdapter()
    {
        return new MvvmNanoNinjectAdapter();
    }
}

That's it!

If you now build and run your app(s), you'll see your first Page which is running with it's View Model behind. Nothing spectacular so far, but the fun is just getting started.

private string _username;
public string Username
{
    get { return _username; }
    set
    {
        _username = value;
        NotifyPropertyChanged();
        NotifyPropertyChanged("IsFormValid");
    }
}

var nameEntry = new Entry
{
    Placeholder = "Your name"
};

BindToViewModel(nameEntry, Entry.TextProperty, x => x.Username);

public MvvmNanoCommand LogInCommand
{
    get { return new MvvmNanoCommand(LogIn); }
}

private void LogIn()
{
    // ...
}

BindToViewModel(loginButton, Button.CommandProperty, x => x.LogInCommand);

public MvvmNanoCommand<string> LogInCommand
{
    get { return new MvvmNanoCommand<string>(LogIn); }
}

private void LogIn(string userName)
{
    // ...
}

BindToViewModel(loginButton, Button.CommandProperty, x => x.LogInCommand);
BindToViewModel(loginButton, Button.CommandParameterProperty, x => x.Username);

NavigateTo<AboutViewModel>();

public class ClubViewModel : MvvmNanoViewModel<Club>
{
    public override void Initialize(Club parameter)
    {
        // ...
    }
}

NavigateTo<ClubViewModel, Club>(club);

public class DemoPresenter : MvvmNanoFormsPresenter
{
    public DemoPresenter(Application app) : base(app)
    {
    }

    protected override void OpenPage(Page page)
    {
        if (page is AboutPage)
        {
            Device.BeginInvokeOnMainThread(async () =>
                await CurrentPage.Navigation.PushModalAsync(new MvvmNanoNavigationPage(page)
            ));

            return;
        }

        base.OpenPage(page);
    }
}

protected override void SetUpPresenter()
{
    MvvmNanoIoC.RegisterAsSingleton<IPresenter>(
        new DemoPresenter(this)
    );
}

public class App : MvvmNanoApplication
{
    protected override void OnStart()
    {
        base.OnStart();

        SetUpDependencies();
    }

    private static void SetUpDependencies()
    {
        MvvmNanoIoC.Register<IClubRepository, MockClubRepository>();
    }
}

public class WelcomeViewModel : MvvmNanoViewModel
{
    public List<Club> Clubs { get; private set; }

    public WelcomeViewModel(IClubRepository clubs)
    {
        Clubs = clubs.All();
    }
}

public class MyViewModel : MvvmNanoViewModel
{
    private readonly IMessenger _messenger;

    public WelcomeViewModel(IMessenger messenger)
    {
        _messenger = messenger;
    }
}

public class AlbumCreatedMessage : IMessage
{
    public readonly Album Album;

    public AlbumCreatedMessage(Album album)
    {
        Album = album;
    }
}

var album = new Album
{
    Id = Guid.NewGuid(),
    Title = "Hello World"
};

_messenger.Send(new AlbumCreatedMessage(album));

_messenger.Subscribe<AlbumCreatedMessage>(this, AlbumAdded);

private void AlbumAdded(object sender, AlbumCreatedMessage message)
{
    // Do something
}

_messenger.Unsubscribe<AlbumCreatedMessage>(this);

public class ClubViewModel : MvvmNanoViewModel<Club>
{
    private string _name;
    public string Name
    {
        get { return _name; }
        private set { _name = value; NotifyPropertyChanged(); }
    }

    private string _country;
    public string Country
    {
        get { return _country; }
        private set { _country = value; NotifyPropertyChanged(); }
    }

    public override void Initialize(Club parameter)
    {
        Name = parameter.Name;
        Country = parameter.Country;
    }
}

<?xml version="1.0" encoding="UTF-8"?>
<pages:MvvmNanoContentPage xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:pages="clr-namespace:MvvmNano.Forms"
    xmlns:vm="clr-namespace:MvvmNanoDemo"
    x:Class="MvvmNanoDemo.ClubPage"
    x:TypeArguments="vm:ClubViewModel"
    Title="{Binding Name}">
    <ContentPage.Content>
        <StackLayout>
            <Label Text="{Binding Country}" />
        </StackLayout>
    </ContentPage.Content>
</pages:MvvmNanoContentPage>