Типы страниц

TabbedPage. Страница с вкладками

Применение класса TabbedPage в Xamarin Forms позволяет создать страницу с вкладками, где в роли каждой вкладки выступает отдельная страница.

Для примера возьмем проект и вначале добавим в него три обычных однотипных страницы, которые назовем Page1, Page2, Page3. Для добавления страниц можно выбрать шаблон Content Page:

Например, визуальный интерфейс страницы Page1 будет следующим:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="HelloApp.Page1" 
			 Title="Page 1">
  <Label Text="Page1" VerticalOptions="Center" HorizontalOptions="Center" />
</ContentPage>

В данном случае надо отметить, что в качестве заголовка вкладки будет выступать свойство Title у каждой страницы. Поэтому здесь указывается атрибут Title.

Код страницы Page2:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="HelloApp.Page2" 
			 Title="Page 2">
  <Label Text="Page2" VerticalOptions="Center" HorizontalOptions="Center" />
</ContentPage>

Код страницы Page3:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="HelloApp.Page3" 
			 Title="Page 3">
  <Label Text="Page3" VerticalOptions="Center" HorizontalOptions="Center" />
</ContentPage>

Код c# у каждой страницы остается тот, который был по умолчанию.

По умолчанию главная страница проекта MainPage представляет тип ContentPage. Изменим его на TabbedPage и определим внутри страницы с помощью коллекции Children набор страниц, которые будут представлять вкладки:

<?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:HelloApp;assembly=HelloApp"
             x:Class="HelloApp.MainPage">
    <TabbedPage.Children>
      <local:Page1 />
      <local:Page2 />
      <local:Page3 />
    </TabbedPage.Children>
</TabbedPage>

Также изменим в коде страницы ее тип с ContentPage на TabbedPage:

using Xamarin.Forms;

namespace HelloApp
{
    public partial class MainPage : TabbedPage
    {
        public MainPage()
        {
            InitializeComponent();
        }
    }
}

И после запуска главная страница будет представлять набор вкладок: