Display several pages at once without MasterDetailPage?

Is there any way to display more than one page at once without using a MasterDetailPage?

What I'm looking for is something like this:

<StackLayout Spacing="10" x:Name="layout" Orientation="Horizontal">
        <v:ContentPageBlueView/>
        <v:ContentPageRedView/>
      </StackLayout>

But this gives me an ArgumentException because I can only add views to a StackLayout:

'TabbedPageSample.Views.ContentPageBlueView' cannot be converted to type 'Xamarin.Forms.View'.

I've also tried to use a Grid instead of a StackLayout, but it gave me the same result.

I've attached an image of how I want to show two pages next to each other.

Answers

  • DKurkinDKurkin GBMember ✭✭

    Use ContentView instance to imbed n number of views in the page

    https://developer.xamarin.com/api/type/Xamarin.Forms.ContentView/

  • DerProgrammiererDerProgrammierer DEMember ✭✭✭

    @DKurkin said:
    Use ContentView instance to imbed n number of views in the page

    https://developer.xamarin.com/api/type/Xamarin.Forms.ContentView/

    As far as I understand my problem, it doesn't work because I want to add pages, not views. my approach with a StackLayout or Grid works with views, but that's not what I want.

  • DKurkinDKurkin GBMember ✭✭
    edited October 2016

    In that case you need to re-think what are you doing: The Page is watewer you are showing on the screen. When initiating the page you set its content as : Content = yourView. So - You cannot have 2 pages on one screen - only 2 views.

    Want to ask - why you need pages over views?

  • JohnHardmanJohnHardman GBUniversity mod
    edited October 2016

    @DerProgrammierer - If you create ContentPages as if one were going to be displayed at a time, you can simply grab the ContentView and then embed that View value into your composite page. Doing it that way allows you to switch between a single page and multiple pages whenever you want.

    Create as many ContentPages as you want and then combine them that way. That is easily done. What takes more effort is routing what would have been overridden methods such as OnAppearing, OnDisappearing, through to the corresponding views in the composite page, as well as handling toolbars, back button etc.

    The attached screenshot is from an incomplete implementation of this (excuse the diagnostics in the title bar and the nasty toolbars!)

  • DerProgrammiererDerProgrammierer DEMember ✭✭✭
    edited October 2016

    @DKurkin said:
    In that case you need to re-think what are you doing: The Page is watewer you are showing on the screen. When initiating the page you set its content as : Content = yourView. So - You cannot have 2 pages on one screen - only 2 views.

    Want to ask - why you need pages over views?

    I don't need pages over views, but now I have pages instead of views available. I'm new on this team and I'm implementing the UWP version of this app. I'm displaying only one page at once in phone mode. But in tablet mode (or UWP: Desktop mode), I want to show two pages next to each other because it makes sense in my app when I have more space (which is the case on a tablet). This also works on iOS and Android when using MasterDetailPage, but for some reason there are strange things going on when I'm using the same implementation on UWP.

    So far I spend a lot of time trying to fix this but I just couldn't come up with a solution, so now I'm trying to find another solution for UWP.

    It's basically the same like WhatsApp: On phone, you see the list with chats and if you click a chat you are on the page with the messages. But when using Web.Whatsapp, you see the chats on the left side and the messages of the selected chat on the right side. Perfectly fine for MasterDetailPage, I know! But it just doesn't work and I need to find another solution now :(

  • DKurkinDKurkin GBMember ✭✭

    @DerProgrammierer I probably wasn't as clear as JohnHardman - his solution is same as I've tryed to offer as an option. I did the same - where have 3 views on one page (iPad version) where every View is individually scrollable

  • AlessandroCaliaroAlessandroCaliaro ITMember ✭✭✭✭✭

    I think you can use content view for phone and tablet. On phone you can hide and show one contentview at a time. In tablet you can show two contentview at a time.

  • DKurkinDKurkin GBMember ✭✭

    @DerProgrammierer also as it differernt behaviour you need to separate code for mobile and ipad:

        if(Device.Idiom == TargetIdiom.Phone)
            do show contentPageMobile with one view
        else
            show 2 views as part of contentPageTablet
    
  • DerProgrammiererDerProgrammierer DEMember ✭✭✭

    @DKurkin said:
    @DerProgrammierer also as it differernt behaviour you need to separate code for mobile and ipad:

      if(Device.Idiom == TargetIdiom.Phone)
          do show contentPageMobile with one view
      else
          show 2 views as part of contentPageTablet
    

    I thought about this and I would like to keep the code as it is for phone now for two reasons:
    1. It's working for phone and iOS/Android tablet
    2. My coworker told me to not change any code for iOS and Android and only find an adaption for UWP

    So I would most likely go with something like this:

    if (Device.OS == TargetPlatform.Windows && (Device.Idiom == TargetIdiom.Tablet || Device.Idiom == TargetIdiom.Desktop)) // Windows Desktop/Tablet // Show ContentPage with 2 views else if (Device.Idiom == TargetIdiom.Tablet || Device.Idiom == TargetIdiom.Desktop) // iOS/Android Tablet // Show MasterDetailPage which contains 2 pages else // Phone // Show ContentPage with 1 view

    Seing your answers, it's exactly what I'm trying to achieve but I just don't know how to achieve it. How can I make sure the ContentView instead of the ContentPage is used as a parameter? Do you have any sample code so I can change my code?

    Thank you for your help.

  • DKurkinDKurkin GBMember ✭✭

    @DerProgrammierer I dont know how masterpage is behaving on Windows, but from what you posted you using masterpage for iOS and Android. Why not to use it for WP too?
    in the link there is an app done by one of xamarin guys and masterPage there behave same as for Android and iOS
    https://blog.xamarin.com/bringing-xamarin-forms-apps-to-tablets/

    if you insist on having ContentPages over MasterDetailPage the easiest but not elegant option would be to have instances of Pages and instances of ContentViews and use one or another when needed. It is clearly the repetition of code - but i cant think of only this at the moment.

  • DerProgrammiererDerProgrammierer DEMember ✭✭✭
    edited October 2016

    @DKurkin I have tried a lot to use MasterDetailPage for UWP, but I never got it working. If you are truly interested in it, here is a topic about my issues with MasterDetailPage: http://forums.xamarin.com/discussion/comment/228470

    People seem to have different results even with the sample project I provided, so I assume there is a bug somewhere in MasterDetailpage or possibly Prism, but so far no one could figure out what exactly the problem is.

  • DerProgrammiererDerProgrammierer DEMember ✭✭✭

    The workaround is also not working because the "Content" I need to display on the left side of my StackLayout/Grid is a TabbedPage :disappointed: This whole issue is driving me crazy!

  • MelbourneDeveloperMelbourneDeveloper AUMember ✭✭✭

    @DerProgrammierer , I have this exact same issue.

    We have a paging system that currently works well. It just so happens that on desktop, I have plenty of horizontal real estate, so I want to slap two pages side by side. Unfortunately, I can't because of XF's object model design.

    XF should never have bifurcated View/Page in the first place. A piece of UI is a piece of UI. None of the other platforms like UWP, Silverlight, WPF etc. have this bifurcation, or enforce it strictly.

    As mentioned above, we can have two views on screen, but that means breaking the content of all our existing pages out in to views which will waste a tonne of time. We just want two pages side by side. Why is that so hard?

Sign In or Register to comment.