visual studio xamarin forms mvvm

Question

I'm starting a new project, and id like to use MVVM - I really like this pattern, and I have been using it in all my windows phone 8.1 apps. But moving to xamarin is a jungle! I usually use mvvm light, and I have a nice basic implementation I use every time a create a new project - but I can't find a really good sample that shows exactly what I need. What I want to do is make a xamarin shared (or portable) project, that shares the views across all platforms. I want to write create the view using code-behind - so no xaml. Does anyone have experience with this and can point me to a good sample? I'm also wondering if I need to use a thirtyparty framework afterall, since navigating seems pretty easy.

Answer 1

There are many samples on to be found. My favorite site for Xamarin.Forms samples is Xamarin Forms in Anger.

Let's take a look at the Jobbberr sample:

using System;
using Xamarin.Forms;

namespace InAnger.Jobbberr
{
    public class SettingsPage : ContentPage
    {
        public SettingsPage ()
        {
            Style = AppStyle.SettingsPageStyle;

            var pageTitle = new Frame () {
                Style = AppStyle.PageTitleLabelFrameStyle,
                Padding = new Thickness(0,Device.OnPlatform(15,0,0),0,10),
                Content = new Label { 
                    Style = AppStyle.PageTitleLabelStyle,
                    Text = "Settings",
                }
            };

            var signoutButton = new Button () {
                VerticalOptions = LayoutOptions.EndAndExpand,
                HorizontalOptions = LayoutOptions.Center,
                Text = "Sign Out",
                TextColor = AppStyle.DarkLabelColor,
            };

            Content = new StackLayout {
                VerticalOptions = LayoutOptions.FillAndExpand,
                Padding = new Thickness (20),
                Children = {
                    pageTitle,
                    new BoxView() {
                        HeightRequest = 1,
                        BackgroundColor = AppStyle.DarkLabelColor,
                    },
                    new SettingsUserView(),
                    new SyncView (),
                    new SettingsSwitchView ("GPS"),
                    new SettingsSwitchView ("Jobs Alert"),
                    signoutButton,
                    new StatusBarView()
                }
            };
        }
    }
}

What do you see here?

The new class SettingsPage derives from ContentPage. The controls pageTitle and signoutButton are created in its constructor. In the end you see how a StackLayout is being created, filled with the controls and set as content of the page. That's how to create a Page in code.

How to apply MVVM?

1. Set BindingContext = ViewModel in the first row of the constructor (create a new view model or locate it by via a ViewModelLocator or anything).

2. Let's say for example you want to bind the Text and Command property of signoutButton to the view model's properties SignOutButtonText and SignoutCommand. You would change the creation of the button to this:

   var signoutButton = new Button () {
       VerticalOptions = LayoutOptions.EndAndExpand,
       HorizontalOptions = LayoutOptions.Center,
       TextColor = AppStyle.DarkLabelColor,
   };
   
   signoutButton.SetBinding(Button.TextProperty, "SignOutButtonText");
   signoutButton.SetBinding(Button.CommandProperty, "SignoutCommand");