SideDrawer on TabbedPage possible?

6 posts, 0 answers
  1. VincentH
    VincentH avatar
    8 posts
    Member since:
    Sep 2016

    Posted 26 Oct 2016 Link to this post

    I need to add a side drawer to an app that has a Xamarin Forms TabbedPage as it's main page - I am aiming for the same navigation as e.g. the Twitter app on Android.

    However the MainContent property of the RadSideDrawer is of type View instead of Page so I cannot set it to a TabbedPage instance.

    -> Is it possible to use a TabbedPage with RadSideDrawer? If yes, how?

    If this is not possible, would the standard Xamarin Forms MasterDetailPage, offer an alternative?
    It has Master and Detail properties of type Page and it is used to create a side drawer in e.g. the Hanselman.Forms app (although not on a TabbedPage).

  2. VincentH
    VincentH avatar
    8 posts
    Member since:
    Sep 2016

    Posted 28 Oct 2016 in reply to VincentH Link to this post

    PS When I create a single header instance and return that each time in the GroupHeaderTemplate (see code below), the header looks OK but I still wonder whether this invoke twice behaviour is by design or a bug?

    var header = new Label { HorizontalTextAlignment = TextAlignment.Center, Text = "Welcome to Xamarin Forms!" };
    GroupHeaderTemplate = new DataTemplate(() => {
      return header; // This is called twice instead of once so do not create new view instances here
    });


  3. VincentH
    VincentH avatar
    8 posts
    Member since:
    Sep 2016

    Posted 31 Oct 2016 in reply to VincentH Link to this post

    Pls ignore my above reply; it belongs to another question

    I would still like to see my question on SideDrawer answered!

  4. Ves
    Admin
    Ves avatar
    2916 posts

    Posted 31 Oct 2016 Link to this post

    Hi Vincent

    One possible approach here would be to place RadSideDrawer within a page and use it as Master in a MasterDetailPage and use a TabbedPage as Detail. Alternatively, you can use only TabbedPage, but you will need to place one RadSideDrawer control within every child page.

    Best regards,
    Ves
    Telerik by Progress
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  5. EHG
    EHG avatar
    1 posts
    Member since:
    May 2012

    Posted 12 Nov in reply to Ves Link to this post

    Hi,

    Can you provide some sample code to implement the possible way that you described.

    Thank you,

  6. Lance | Tech Support Engineer, Sr.
    Admin
    Lance | Tech Support Engineer, Sr. avatar
    457 posts

    Posted 4 days and 22 hours ago Link to this post

    Hi Emaar,

    I'm assuming you mean this part of Vesselin's response?

    "place RadSideDrawer within a page and use it as Master in a MasterDetailPage and use a TabbedPage as Detail"

    Demo

    Start with the Xamarin Master Detail Page template:




    Put the RadSideDrawer in the MasterPage

    <ContentPage ...
        x:Class="MasterDetailPlacement.Portable.Views.MasterDetailPage1Master"
        Title="Master">
     
        <primitives:RadSideDrawer x:Name="drawer" DrawerLength="200">
            <primitives:RadSideDrawer.DrawerContent>
                <ListView  ItemsSource="{Binding MenuItems}">
                </ListView>
            </primitives:RadSideDrawer.DrawerContent>
        </primitives:RadSideDrawer>
         
    </ContentPage>


    DetailPage

                xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                x:Class="MasterDetailPlacement.Portable.Views.MasterDetailPage1Detail"
                Title="Detail">
        <!--Pages can be added as references or inline-->
        <ContentPage Title="Tab 1" />
        <ContentPage Title="Tab 2" />
        <ContentPage Title="Tab 3" />
    </TabbedPage>


    and here's the MasterDetail root:

    <MasterDetailPage xmlns="http://xamarin.com/schemas/2014/forms"
                 xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                 x:Class="MasterDetailPlacement.Portable.Views.MasterDetailPage1"
                 xmlns:pages="clr-namespace:MasterDetailPlacement.Portable.Views">
      <MasterDetailPage.Master>
        <pages:MasterDetailPage1Master x:Name="MasterPage" />
      </MasterDetailPage.Master>
      <MasterDetailPage.Detail>
        <NavigationPage>
          <x:Arguments>
            <pages:MasterDetailPage1Detail />
          </x:Arguments>
        </NavigationPage>
      </MasterDetailPage.Detail>
    </MasterDetailPage>


    Finally, you'll of course have to wire up the navigation a little differently because the Master Detail template uses a NavigationPage instead of a Tabbed page, but that's trivial.  Here is the documentaiton on how to use a TabbedPage, there is also a full demo here.

    In a nutshell, you can get the index of the selected item from the ListView in the SideDrawer and then use that index to select the item on the TabbedPage

    public partial class MasterDetailPage1 : MasterDetailPage
    {
        public MasterDetailPage1()
        {
            InitializeComponent();
            MasterPage.ListView.ItemSelected += ListView_ItemSelected;
        }
     
        private void ListView_ItemSelected(object sender, SelectedItemChangedEventArgs e)
        {
            // UPDATED for use with TabbedPage as Detail
            if (e.SelectedItem is MasterDetailPage1MenuItem item)
            {
                // get the index of the selected item
                var vm = MasterPage.BindingContext as MasterDetailPage1Master.MasterDetailPage1MasterViewModel;
                var index = vm?.MenuItems.IndexOf(item);
     
                if (index == null) return;
     
                if ((Detail as NavigationPage)?.CurrentPage is TabbedPage tabbedPage)
                {
                    tabbedPage.SelectedItem = tabbedPage.Children[(int)index];
                }
     
                IsPresented = false;
                MasterPage.ListView.SelectedItem = null;
            }
        }
    }


    Summary

    Ultimately, the RadSideDrawer was not designed for Page navigation as the SideDrawer's MainContent is of type View, and does not work for content of type Page. The above approach may cause more problems than just using the MasterPage as is (with just a ListView/RadListView).

    For an alternate solution to Page navigation, take a look at our Tagit example for inspiration.

    Regards,
    Lance | Tech Support Engineer, Sr.
    Progress Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top