Replace fragments in viewpager Mvvmcross

Question

tldr: How can I replace fragments in viewpager using MvvmCross?

I have tried to replace a fragment in a viewpager using the approach described at How to replace fragments within a Viewpager. The idea is that within the view pager a "RootFragment" is shown. However, it is replaced by a first fragment. If needed, it can also be replaced by a second fragment, third fragment and so on. As more fragments are added, they are added to the backstack as well.

So this would be a snippet of the code for the "RootFragment"

public class RootView : MvxFragment
    {
        public override void OnCreate(Bundle savedInstanceState)
        {
            base.OnCreate(savedInstanceState);
        }

    public override View OnCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)
    {
        var view = inflater.Inflate(Resource.Layout.root_fragment, container, false);

        var transaction = FragmentManager.BeginTransaction();
        var fragment = FirstView.NewInstance();
        transaction.Replace(Resource.Id.root_frame, fragment);

        transaction.Commit();

        return view;
    }


}

Then, a snippet for the "First fragment" would be

[MvxFragmentPresentation(typeof(MainViewModel), 
Resource.Id.root_frame, true)]
    public class ScoringView : MvxFragment<FirstViewModel>
    {
        public override void OnCreate(Bundle savedInstanceState)
        {
            base.OnCreate(savedInstanceState);

            // Create your fragment here
        }

        public override View OnCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)
        {
            base.OnCreateView(inflater, container, savedInstanceState);
            return this.BindingInflate(Resource.Layout.first_fragment, null);
        }

    }

The layout for "RootFragment" is:

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:background="#000"
    android:layout_height="match_parent"
    android:id="@+id/root_frame" />

The code for "FirstViewModel" would be:

public class FirstViewModel: MvxViewModel
    {
        private IMvxAsyncCommand _openPreguntasCommand;
        private IMvxNavigationService _navigationService;

        public IMvxAsyncCommand OpenSecondCommand { get => _openSecondCommand?? (new MvxAsyncCommand(async () =>
                                                                  {
                                                                      await _navigationService
                                                                          .Navigate<SecondViewModel>();
                                                                  }));  }

        public FirstViewModel(IMvxNavigationService navigationService)
        {
            _navigationService = navigationService;
        }


    }

I have tried to accomplish this task using a PresentationHint. I modified the code used in How to clear entire Backstack using viewmodel(navigation service) to suit my needs to no avail. So perhaps a custom presenter could be an option. I could override one "OnBeforeFragmentChanging" or some other related method. What I ended up doing was that used the MvxFragmentPresentation attribute and I set the fragmentContentId to the Id of the placeholder in the "RootFragment" layout. However, it seems to me that there has to be a better way.

 [MvxFragmentPresentation(typeof(MainViewModel), Resource.Id.root_frame, true)] 

Answer 1

Did you try the Playground example that comes with the MvvmCross source code? There is a good implementation of fragments