Exrin MasterDetailPage

Question

I'm using a MasterDetailPage in exrin this is my ViewContainer public class MainViewContainer : Exrin.Framework.ViewContainer, IMasterDetailContainer { private readonly MasterDetailPage r_MasterPage;

    public MainViewContainer(MenuStack i_MenuStack, MainStack i_MainStack)
        : base(eContainer.Main.ToString())
    {
        r_MasterPage = new MasterDetailPage();
        MasterDetailProxy masterProxy = new MasterDetailProxy(r_MasterPage);
        NativeView = masterProxy.View;
        Proxy = masterProxy;
        DetailStack = i_MainStack;
        MasterStack = i_MenuStack;
        RegionMapping.Add(eRegions.Menu, ContainerType.Master);
        RegionMapping.Add(eRegions.Main, ContainerType.Detail);
    }

    public IHolder MasterStack { get; set; }

    public IHolder DetailStack { get; set; }

    public IMasterDetailProxy Proxy { get; set; }

    public bool IsPresented
    {
        get
        {
            return r_MasterPage.IsPresented;
        }

        set
        {
            r_MasterPage.IsPresented = value;
        }
    }

    public void SetStack(ContainerType i_ContainerType, object i_Page)
    {
        switch (i_ContainerType)
        {
            case ContainerType.Detail:
                r_MasterPage.Detail = i_Page as Page;
                break;
            case ContainerType.Master:
                r_MasterPage.Master = i_Page as Page;
                break;
        }
    }
}

and this is my IMasterDetailProxy public class MasterDetailProxy : IMasterDetailProxy { private readonly MasterDetailPage r_MasterPage;

    public MasterDetailProxy(MasterDetailPage i_MasterPage)
    {
        View = i_MasterPage;
        r_MasterPage = i_MasterPage;
    }

    public object DetailNativeView
    {
        get
        {
            return r_MasterPage.Detail;
        }

        set
        {
            r_MasterPage.Detail = value as Page;
        }
    }

    public object MasterNativeView
    {
        get
        {
            return r_MasterPage.Master;
        }

        set
        {
            Page page = value as Page;
            if(string.IsNullOrEmpty(page.Title))
            {
                page.Title = "Please set your MasterPage Title";
            }

            r_MasterPage.Master = page;
        }
    }

    public object View { get; set; }
}

I'm using it show a menu on the master and the pages on the Detail part. my menu view is

<base:PageProxy xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:base="clr-namespace:Exrin.Base;assembly=Exrin.Base"
             xmlns:controls="clr-namespace:ImageCircle.Forms.Plugin.Abstractions;assembly=ImageCircle.Forms.Plugin.Abstractions"
             xmlns:control="clr-namespace:BeAttend.Control;assembly=BeAttend"
             x:Class="BeAttend.View.MenuView" Title="Menu">
  <base:PageProxy.Icon>
      <OnPlatform x:TypeArguments="FileImageSource">
          <On Platform="iOS" >Icon-Small.png</On>
      </OnPlatform>
  </base:PageProxy.Icon>
  <ContentPage.Content>
    <Grid BackgroundColor="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition Height="200" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <Grid>
            <Image Source="menubg.jpg" Aspect="AspectFill" />
            <StackLayout Padding="0,20,0,0" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" >
                <controls:CircleImage BorderColor="White" BorderThickness="2" Source="{Binding VisualState.User.Picture}" Aspect="AspectFit" WidthRequest="100" HeightRequest="100" />
                <Label Text="{Binding VisualState.User.Name}" TextColor="White" FontSize="Large" />
            </StackLayout>
        </Grid>
        <StackLayout Margin="20,20,20,0" Grid.Row="1" Spacing="15">
            <control:NavigationItem Text="Dashboard" Icon="fa-archive" Command="{Binding NavigationCommand}" CommandParameter="Dashboard" />
            <ContentView HeightRequest="1" BackgroundColor="Gray" />
            <control:NavigationItem Text="Beacons" Icon="fa-archive" Command="{Binding NavigationCommand}" CommandParameter="Beacons" />
            <ContentView HeightRequest="1" BackgroundColor="Gray" />
            <control:NavigationItem Text="Create event" Icon="fa-archive" Command="{Binding NavigationCommand}" CommandParameter="CreateEvent" />
            <ContentView HeightRequest="1" BackgroundColor="Gray" />
            <control:NavigationItem Text="My events" Icon="fa-archive" Command="{Binding NavigationCommand}" CommandParameter="MyEvents" />
            <ContentView HeightRequest="1" BackgroundColor="Gray" />
            <control:NavigationItem Text="Registered events" Icon="fa-archive" Command="{Binding NavigationCommand}" CommandParameter="RegisteredEvents" />
            <ContentView HeightRequest="1" BackgroundColor="Gray" />
            <control:NavigationItem Text="Attendance QR" Icon="fa-archive" Command="{Binding NavigationCommand}" CommandParameter="AttendanceQr" />
            <ContentView HeightRequest="1" BackgroundColor="Gray" />
            <control:NavigationItem Text="Join Event" Icon="fa-archive" Command="{Binding NavigationCommand}" CommandParameter="JoinEvent" />
            <ContentView HeightRequest="1" BackgroundColor="Gray" />
            <control:NavigationItem Text="Logout" Icon="fa-arrow-circle-left" Command="{Binding LogoutCommand}" />
        </StackLayout>
    </Grid>
  </ContentPage.Content>
</base:PageProxy>

I have a couple of problems: 1. on Android I have the hamburger menu button automatically but on iOS I don't have any icon, I tried to set an icon for the menu view for iOS using

<base:PageProxy.Icon>
      <OnPlatform x:TypeArguments="FileImageSource">
          <On Platform="iOS" >Icon-Small.png</On>
      </OnPlatform>
  </base:PageProxy.Icon>

on the menu view but it doesn't work. 2. On iOS the page title is "Please set your MasterPage Title" (The proxy sets it if the page title is empty) but you can see on the menu view that I set the title for the page, this happens only on iOS. https://drive.google.com/file/d/0B3YFjr58f7_OMC04Y0FreVRvVlE/view?usp=sharing

3. when pressing a link on the menu I want the master page to disappear it currently stays on and hides part of the Detail page until I press on the Detail page.

4. On the Detail page I have a back button, so if I want to navigate to another page I have to first press back and then I can see the the menu icon to show the mater page and select another link. How can I replace the back button to always show the hamburger menu button? this is my stack

   public class MainStack : BaseStack { public MainStack(IViewService i_ViewService) : base(new NavigationProxy(new NavigationPage()), i_ViewService, eStack.Main, nameof(Views.eMain.Dashboard)) { ShowNavigationBar = true; }

       protected override void Map()
       {
           NavigationMap<DashboardView, DashboardViewModel>(nameof(Views.eMain.Dashboard));
           NavigationMap<BeaconsView, BeaconsViewModel>(nameof(Views.eMain.Beacons));
           NavigationMap<BeaconAddView, BeaconAddViewModel>(nameof(Views.eMain.AddBeacon));
           NavigationMap<BeaconEditView, BeaconEditViewModel>(nameof(Views.eMain.EditBeacon));
           NavigationMap<EventCreateView, EventCreateViewModel>(nameof(Views.eMain.CreateEvent));
           NavigationMap<EventsCreatedView, EventsCreatedViewModel>(nameof(Views.eMain.MyEvents));
           NavigationMap<EventsRegisteredView, EventsRegisteredViewModel>(nameof(Views.eMain.RegisteredEvents));
           NavigationMap<EventEditView, EventEditViewModel>(nameof(Views.eMain.EditEvent));
           NavigationMap<EventView, EventViewModel>(nameof(Views.eMain.ViewEvent));
           NavigationMap<AttendanceQrView, AttendanceQrViewModel>(nameof(Views.eMain.AttendanceQr));
           NavigationMap<JoinEventView, JoinEventViewModel>(nameof(Views.eMain.JoinEvent));
       }
   }
   

Answer 1

1. If you want to remove the Master page when you click a link, you will find that in your IMasterDetailContainer, there is a property called IsPresented. Set this to true or false, to manually show or hide the page.

2. If you set the Title of your ContentPages, this will replace any default title being set.

3. Ensure the Icon is in your Resources folder. Also if it's still not shown in iOS, set the icon to the Detail, Navigation or ContentPage. I can't remember which one you are meant to set it to. But if you try that, you can find out which one works.