Tabbed page as detail view of masterdetail page in Exrin

Question

In our app there is a master-detail container as main view container. We would like to have the tabbed page as the detail page of the master-detail container, so that the user is able to perform the navigation via both the menu and tab bar. Is there any way to achieve this with Exrin? As far as we can see, there is a support for master-detail page and for tabbed page separately. How to combine this pages together?

Answer 1

You will need to have Exrin 2.0.2 and higher for this to work.

First, you need to slightly update your Container, that holds the MasterDetailPage. The interface definition is slightly changed.

public class MainContainer : ViewContainer, IMasterDetailContainer
{
    private MasterDetailPage page;
    public MainContainer(TabbedViewContainer mainStack, MenuStack menuStack)
        : base(Containers.Main.ToString())
    {
        page = new MasterDetailPage();
        var mdp = new MasterDetailProxy(page);
        NativeView = mdp.View;
        Proxy = mdp;
        DetailStack = mainStack;
        MasterStack = menuStack;
        RegionMapping.Add(Regions.Menu, ContainerType.Master);
        RegionMapping.Add(Regions.Main, ContainerType.Detail);
    }

    private IHolder _detailStack;
    public IHolder DetailStack { get { return _detailStack; } set { _detailStack = value; if (_detailStack is ITabbedContainer container) ((ViewContainer)container).ParentContainer = this; } }

    private IHolder _masterStack;
    public IHolder MasterStack { get { return _masterStack; } set { _masterStack = value; if (_masterStack is ITabbedContainer container) ((ViewContainer)container).ParentContainer = this; } }

    public IMasterDetailProxy Proxy { get; set; }

    public bool IsPresented
    {
        get
        {
            return page.IsPresented;
        }
        set
        {
            page.IsPresented = value;
        }
    }

    public void SetStack(ContainerType type, object newPage)
    {
        switch (type)
        {
            case ContainerType.Detail:
                page.Detail = newPage as Page;
                break;
            case ContainerType.Master:
                page.Master = newPage as Page;
                break;
        }

    }
}

Second, notice that instead of a Stack in the Constructor, you pass through your TabbedViewContainer, and assign that as needed. Your TabbedViewContainer may look something like this.

public class TabbedViewContainer : Exrin.Framework.ViewContainer, ITabbedContainer
{

    public TabbedViewContainer(MainStack mainStack, SecondStack secondStack)
        : base(Containers.Tabbed.ToString(), null)
    {
        Children = new List<IStack>() { mainStack, secondStack };
        var tabbedPage = new Xamarin.Forms.TabbedPage();
        var tabbed = new TabbedProxy(tabbedPage);
        NativeView = tabbed.View;

        foreach (var child in Children)
        {
            tabbed.Children.Add(child.Proxy.NativeView);
        }
    }


    public IList<IStack> Children { get; set; }

}