Xamarin C# - is using navigation page or ListView in the TabbedPage

Question

image

refer to the above image. It is a TabbedPage with 4 tab page. May I know how can we perform this action. When user click the list, it will navigate to a new page (outside of the tabbedpage). Then, it can go back to the TabbedPage when back button clicked. Is it using ListView or navigation page? Please advise. thank you.

Answer 1

1.create a Tabbed Page and set it as mainPage of app.

in App.xaml.cs

public App()
{
   InitializeComponent();

   MainPage = new NavigationPage(new MyTabbedPage());
}

2.Put the contentPage in the Tabbed Page which contain the listview.

For example ,I put the listview in MainPage.

<?xml version="1.0" encoding="utf-8" ?>
<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
        xmlns:local="clr-namespace:App8"
         x:Class="App8.MyTabbedPage">
<!--Pages can be added as references or inline-->
  <ContentPage Title="Tab 1" Icon="xxx.png"/> //set the title and icon of toolbar item
  <local:MainPage Title="Tab 1" Icon="xxx.png"/>
  <ContentPage Title="Tab 1" Icon="xxx.png"/>
</TabbedPage>

in MainPage.xaml

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
         xmlns:local="clr-namespace:App8"
         x:Class="App8.MainPage">

<ListView  x:Name="listView" ItemTapped="ListView_ItemTapped" >
    <ListView.ItemTemplate>
        <DataTemplate>
            <ViewCell Height="30">
               ...
            </ViewCell>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

</ContentPage>

3.When you click the item of listview navigate to a new contentPage which contain your other listview

in MainPage.xaml.cs

private void ListView_ItemTapped(object sender, ItemTappedEventArgs e)
{
  Navigation.PushAsync(new xxxContentPage(),true);
}