CODEWITHSUNDEEP
c#xamarinxamarin.formsmvvmcross
tuke307
tuke307

Reputation: 430

xamarin mvvmcross TabbedPage inside TabbedPage

How do I easily implement a tabbed page inside a tabbed page in xamarin forms with mvvmcross?

enter image description here

TabbedPage1;

 [MvxTabbedPagePresentationAttribute(Position = TabbedPosition.Root, WrapInNavigationPage = true, NoHistory = false)]
    public partial class TabbedPage1: MvxTabbedPage<ViewModels.TabbedPage1ViewModel>
    {
        public TabbedPage1()
        {
            InitializeComponent();
        }
    }

TempPage;

 [MvxTabbedPagePresentationAttribute(Position = TabbedPosition.Tab, Icon = "map_outline", WrapInNavigationPage = true, NoHistory = false)]
        public partial class TempPage: MvxContentPage<ViewModels.TempPageViewModel>
        {
            public TempPage()
            {
                InitializeComponent();
            }
        }

TabbedPage2;

 [MvxTabbedPagePresentationAttribute(Position = TabbedPosition.Root, WrapInNavigationPage = true, NoHistory = false)]
    public partial class TabbedPage2 : MvxTabbedPage<ViewModels.TabbedPage2ViewModel>
    {
        public TabbedPage2 ()
        {
            InitializeComponent();
        }
    }

my current situation is, that the tabbedpage2 shows like a modal page.

Upvotes: 2

Views: 766

Answers (1)

Wendy Zang - MSFT
Wendy Zang - MSFT

Reputation: 10938

You could nest a TabView in Tabbed page. Install Xam.Plugin.TabView via NuGet. https://www.nuget.org/packages/Xam.Plugin.TabView

Create three tab pages in views folder.

Tabbed Page:

<?xml version="1.0" encoding="utf-8" ?>
<TabbedPage
x:Class="TabbedPageDemo.MainPage"
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:Views="clr-namespace:TabbedPageDemo.Views"
xmlns:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
BarBackgroundColor="Blue"
BarTextColor="White"
mc:Ignorable="d">

<Views:Tab1_Page Title="TAB1" />
<Views:Tab2_Page Title="TAB2" />
<Views:Tab3_Page Title="TAB3" />

</TabbedPage>

And then use TabView in you tab1 page.

Tab1_Page:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage
x:Class="TabbedPageDemo.Views.Tab1_Page"
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:local="clr-namespace:Xam.Plugin.TabView;assembly=Xam.Plugin.TabView"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<ContentPage.Content>
    <local:TabViewControl>
        <local:TabViewControl.ItemSource>
            <local:TabItem HeaderText="SUBTAB1">
                <StackLayout VerticalOptions="Start" Padding="10">
                    <Button
                    BackgroundColor="White"                    
                    Text="List Item"
                    TextColor="Black"/>
                </StackLayout>                                                
            </local:TabItem>
            <local:TabItem HeaderText="SUBTAB2">
                <Image Source="pink.jpg" />
            </local:TabItem>
        </local:TabViewControl.ItemSource>
    </local:TabViewControl>
</ContentPage.Content>
</ContentPage>

Please note, if you want to make the tabs in tabbed page in the bottom. Add the code below in your MainPage.

 On<Android>().SetToolbarPlacement(ToolbarPlacement.Bottom);

enter image description here

You could download the code sample from GitHub in TabbedPage_NestedTabView/TabbedPageDemo https://github.com/WendyZang/Test.git

Upvotes: 2

Related Questions