TabView with NavigationPage

[Laerte Alexi]

How i can use Tabview with a NavigationPage? 

Exemple: First tab is a menu that opens other pages. The second tab is a simple view.

Is it possible to do that?

[Sakthivel Palaniyappan]

Hi Laerte,

Greetings from Syncfusion.

We have analyzed your query and you can fulfil your requirement by creating TabItem content as ContentView and using that view we can Navigate to other page as like below code snippet.

XAML:

 

<ContentPage.BindingContext> 

        <local:ViewModel/> 

    </ContentPage.BindingContext> 

 

    <tabView:SfTabView Items="{Binding Items}"/> 

 

ViewModel:

 

public class ViewModel : INotifyPropertyChanged 

    { 

        private TabItemCollection items; 

 

        public TabItemCollection Items 

        { 

            get { return items; } 

            set 

            { 

                items = value; 

            } 

        } 

        public ViewModel() 

        { 

            Items = new TabItemCollection(); 

            Items.Add(new SfTabItem { Content = new Page1(), Title = "Page1" }); 

            Items.Add(new SfTabItem { Content = new Page2(), Title = "Page2" }); 

            Items.Add(new SfTabItem { Content = new Page3(), Title = "Page3" }); 

        } 

    } 

 

TabItemContent:

XAML:

 

<ContentView 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:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 

             mc:Ignorable="d" 

             x:Class="TabViewSample.Page1"> 

    <ContentView.Content> 

        <Button    

                        WidthRequest="150" 

                        HeightRequest="150" 

                        FontAttributes="Bold" 

                        HorizontalOptions="Center" 

                        VerticalOptions="Center" 

                        Clicked="Button_Clicked" 

                        Text="Home"/> 

    </ContentView.Content> 

</ContentView> 

 

C#:

 

void Button_Clicked(object sender, EventArgs e) 

        { 

            await Navigation.PushAsync(new NextPage()); 

        } 

 

We have created sample based on this please find the sample from below.

Sample:
https://www.syncfusion.com/downloads/support/directtrac/general/ze/TabViewSample-1096119260.zip

Please let us know if you have any other queries.

Regards,
Sakthivel P. 

[Harsh Shah]

Hi, Refer  this microsoft doc's article :

https://docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/navigation/tabbed-page

Hope it helps you.

[Sakthivel Palaniyappan]

Hi Harsh,

Thanks for the suggestion.

Regards,
Sakthivel P. 

[Louis]

Is it possible to have a NavigationPage inside an SfTabItem, so that navigating inside the tab pushes a new page only inside the tab item, not replacing the app's entire current page?

[Suganya Sethuraman]

Hi Louis,

Greetings from Syncfusion,

Query: “Is it possible to have a NavigationPage inside an SfTabItem, so that navigating inside the tab pushes a new page only inside the tab item, not replacing the app's entire current page?”

We have analyzed your query. But we don't currently have direct support to meet your requirement. We have achieved your requirement by using the SelectionChanged event. From this event, we can get the SelectedIndex. Based on this SelectedIndex, we could set the content of the new page to the content of the TabItem as in the code snippet, and it works as expected.

Code snippet: 

 private void TabView_SelectionChanged(object sender, Syncfusion.XForms.TabView.SelectionChangedEventArgs e) 

{ 

    if (e.Index == 0) 

    { 

        FirstPage firstPage = new FirstPage(); 

        tab1.Content = firstPage.Content; 

    } 

    else if (e.Index == 1) 

    { 

        SecondPage secondPage = new SecondPage(); 

        tab2.Content = secondPage.Content; 

    } 

    else 

    { 

        ThirdPage thirdPage = new ThirdPage(); 

        tab3.Content = thirdPage.Content; 

    } 

} 

 

 
Please have the sample from the following link,

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/TabviewSwipe_2965627667

Please check the sample if it meets your requirements and let us know if you have any concerns.

Regards,
Suganya Sethuraman.