Tabbed Page in Xamarin Forms XAML

The TabbedPage page is a bit like a navigation page in that it is a collection of other pages. However instead of a navigation bar you are shown a collection of tabs. Each tab has a title and may have an icon. Create a new content page using File > Add new, and then change the XAML to this (making sure your x:Class and xmlns:local are correct for your project) and also change the base class in the code behind to TabbedPage:

<?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:NogginXamarinFormSample;assembly=NogginXamarinFormSample"
	x:Class="NogginXamarinFormSample.MyTabbedPage">
	<TabbedPage.Children>
		<local:MyPage Icon="icon1.png" />
		<ContentPage Title="Page 2" Icon="icon2.png" />
		<ContentPage Title="Page 3" Icon="icon3.png" />
	</TabbedPage.Children>
</TabbedPage>

You can add an icon to each page that will be shown on the tab. To include the images in your app see this guide on working with images in Xamarin forms.

This example also shows how to include pages or controls you've declared in other files. You need to add a xml namespace attribute to the TabbedPage tag giving this namespace a prefix name. This needs to be in the format shown above including the namespace and assembly name relevant to your project. In the example above we declare a local namespace and then add MyPage using its full name local:MyPage.

No code is required to make a TabbedPage work.

Other Page Controls

No Comments