In some App’s is required to navigate within the same screen throughout different sections with their own design and information, each one independent of the other. To do it, we have a page type named: TabbedPage. Let’s learn how to implement it.
What is a tabbed page?
It’s a page that contains different tabs or sections that make possible the navigation between them in the same screen.
Defining the sections
To start, we have to define the different sections that our TabbedPage will contain. In this case for the example shown below, we have the following sections: Software, Design and Database.
We just have to add as many pages of ContentPage type as sections are needed. For the example, let’s add three pages.
There are some attributes that we would like to keep in mind to add them to the Tabbed page such as:
◽ The title: Each section must have a Title attribute which will identify the page in the tabbedpage. (Mandatory)
◽ The Icon: To add an Icon add the Icon attribute to the page and done!
Inherit from the TabbedPage class in your code behind:
Creating the Tabbed Page and adding the child sections.
2⃣ Add the page created for the section inside the <TabbedPage.Children> tags:
3⃣ Finally, you must have your code like this:
That’s all, thank you for reading this article! 😊