Страница с вкладками Xamarin.FormsXamarin.Forms Tabbed Page

Скачать пример Скачать примерDownload Sample Download the sample

Xamarin.Forms TabbedPage состоит из списка вкладок и большой области сведений, где каждая вкладка загружает содержимое в область сведений. В этой статье демонстрируется использование TabbedPage для перехода по коллекции страниц.The Xamarin.Forms TabbedPage consists of a list of tabs and a larger detail area, with each tab loading content into the detail area. This article demonstrates how to use a TabbedPage to navigate through a collection of pages.

ОбзорOverview

На следующих снимках экрана показана страница TabbedPage для каждой платформы:The following screenshots show a TabbedPage on each platform:

На следующих снимках экрана показан формат вкладок для каждой платформы:The following screenshots focus on the tab format on each platform:

Макет TabbedPage и его вкладки зависят от платформы:The layout of a TabbedPage, and its tabs, is dependent on the platform:

  • В iOS список вкладок отображается в нижней части экрана, а также в области данных сверху.On iOS, the list of tabs appears at the bottom of the screen, and the detail area is above. Каждая вкладка содержит изображение значка, которое должно иметь формат PNG с прозрачностью и размер 30x30 для обычного разрешения, размер 60x60 для высокого разрешения и размер 90x90 для разрешения iPhone 6 Plus.Each tab also has an icon image which should be a 30x30 PNG with transparency for normal resolution, 60x60 for high resolution, and 90x90 for iPhone 6 Plus resolution. При наличии более пяти вкладок появляется вкладка Дополнительно, используемая для доступа к дополнительным вкладкам.If there are more than five tabs, a More tab will appear, which can be used to access the additional tabs. Дополнительные сведения о загрузке изображений в приложении Xamarin.Forms см. в разделе Работа с изображениями.For more information about loading images in a Xamarin.Forms application, see Working with Images. Дополнительные сведения о требованиях к значкам см. в разделе Создание приложений с вкладками.For more information about icon requirements, see Creating Tabbed Applications.

    Примечание

    Обратите внимание, что TabbedRenderer для iOS имеет переопределяемый метод GetIcon, который может использоваться для загрузки значков вкладок из указанного источника.Note that the TabbedRenderer for iOS has an overridable GetIcon method that can be used to load tab icons from a specified source. Это переопределение позволяет использовать изображения SVG в виде значков в TabbedPage.This override makes it possible to use SVG images as icons on a TabbedPage. Кроме того, можно предоставить варианты значка в выбранном и невыбранном состоянии.In addition, selected and unselected versions of an icon can be provided.

  • В Android список вкладок по умолчанию отображается в верхней части экрана, а также в области данных ниже.On Android, the list of tabs appears at the top of the screen by default, and the detail area is below. Однако этот список вкладок можно переместить в нижнюю часть экрана с учетом конкретной платформы.However, the tab list can be moved to the bottom of the screen with a platform-specific. Дополнительные сведения см. в разделе Настройка цвета и расположения панели инструментов TabbedPage.For more information, see Setting TabbedPage Toolbar Placement and Color.

    Примечание

    Обратите внимание, что при использовании AppCompat в Android для каждой вкладки отображается значок.Note that when using AppCompat on Android, each tab will also display an icon. Кроме того, TabbedPageRenderer для Android AppCompat имеет переопределяемый метод GetIconDrawable, который может использоваться для загрузки значков вкладок из настраиваемого Drawable.In addition, the TabbedPageRenderer for Android AppCompat has an overridable GetIconDrawable method that can be used to load tab icons from a custom Drawable. Это переопределение позволяет использовать изображения SVG в виде значков в TabbedPage и работает как для верхних, так и для нижних панелей вкладок.This override makes it possible to use SVG images as icons on a TabbedPage, and works with both top and bottom tab bars. Кроме того, можно использовать переопределяемый метод SetTabIcon для загрузки значков вкладок из настраиваемого Drawable для верхних панелей вкладок.Alternatively, the overridable SetTabIcon method can be used to load tab icons from a custom Drawable for top tab bars.

  • В форм-факторах планшетов Windows вкладки видны не всегда, и пользователю требуется провести вниз (или щелкнуть правой кнопкой мыши, если подключена мышь), чтобы просмотреть вкладки в TabbedPage (как показано ниже).On Windows tablet form-factors, the tabs aren't always visible and users need to swipe-down (or right-click, if they have a mouse attached) to view the tabs in a TabbedPage (as shown below).

Создание TabbedPageCreating a TabbedPage

TabbedPage определяет следующие свойства:TabbedPage defines the following properties:

Все эти свойства поддерживаются объектами BindableProperty, то есть к ним можно применить стиль и их можно указывать в качестве целевых для привязки данных.All of these properties are backed by BindableProperty objects, which means that they can be styled, and the properties can be the targets of data bindings.

Создать TabbedPage можно двумя способами:Two approaches can be used to create a TabbedPage:

При обоих подходах TabbedPage отображает каждую страницу при выборе пользователем каждой из вкладок.With both approaches, the TabbedPage will display each page as the user selects each tab.

Примечание

Рекомендуется заполнять TabbedPage только экземплярами NavigationPage и ContentPage.It's recommended that a TabbedPage should be populated with NavigationPage and ContentPage instances only. Это позволит обеспечить согласованность пользовательского интерфейса на всех платформах.This will help to ensure a consistent user experience across all platforms.

Заполнение TabbedPage коллекцией страницPopulating a TabbedPage with a Page Collection

В следующем примере кода XAML показан TabbedPage, создаваемый заполнением коллекцией дочерних объектов Page:The following XAML code example shows a TabbedPage constructed by populating it with a collection of child Page objects:

<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
            xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
            xmlns:local="clr-namespace:TabbedPageWithNavigationPage;assembly=TabbedPageWithNavigationPage"
            x:Class="TabbedPageWithNavigationPage.MainPage">
    <local:TodayPage />
    <NavigationPage Title="Schedule" IconImageSource="schedule.png">
        <x:Arguments>
            <local:SchedulePage />
        </x:Arguments>
    </NavigationPage>
</TabbedPage>

В следующем примере кода создается эквивалентный объект TabbedPage на языке C#:The following code example shows the equivalent TabbedPage created in C#:

public class MainPageCS : TabbedPage
{
  public MainPageCS ()
  {
    var navigationPage = new NavigationPage (new SchedulePageCS ());
    navigationPage.IconImageSource = "schedule.png";
    navigationPage.Title = "Schedule";

    Children.Add (new TodayPageCS ());
    Children.Add (navigationPage);
  }
}

TabbedPage заполняется двумя дочерними объектами Page.The TabbedPage is populated with two child Page objects. Первый дочерний объект является экземпляром ContentPage, а вторая вкладка — NavigationPage, содержащим экземпляр ContentPage.The first child is a ContentPage instance, and the second tab is a NavigationPage containing a ContentPage instance.

Примечание

TabbedPage не поддерживает виртуализацию пользовательского интерфейса.The TabbedPage does not support UI virtualization. Поэтому, если TabbedPage содержит слишком много дочерних элементов, производительность может снижаться.Therefore, performance may be affected if the TabbedPage contains too many child elements.

На следующих снимках экрана изображен экземпляр TodayPage ContentPage, отображаемый на вкладке Today (Сегодня):The following screenshots show the TodayPage ContentPage instance, which is shown on the Today tab:

При открытии вкладки Schedule (Расписание) отображается экземпляр SchedulePage ContentPage, который заключен в экземпляр NavigationPage и показан на следующем снимке экрана:Selecting the Schedule tab displays the SchedulePage ContentPage instance, which is wrapped in a NavigationPage instance, and is shown in the following screenshot:

Сведения о структуре NavigationPage см. в разделе Осуществление навигации.For information about the layout of a NavigationPage, see Performing Navigation.

Примечание

Хотя допустимо поместить NavigationPage в TabbedPage, мы не рекомендуем помечать TabbedPage в NavigationPage.While it's acceptable to place a NavigationPage into a TabbedPage, it's not recommended to place a TabbedPage into a NavigationPage. Это обусловлено тем, что в iOS UITabBarController всегда служит оболочкой для UINavigationController.This is because, on iOS, a UITabBarController always acts as a wrapper for the UINavigationController. Дополнительные сведения см. в разделе Комбинированные интерфейсы контроллера представления библиотеки разработчика iOS.For more information, see Combined View Controller Interfaces in the iOS Developer Library.

Навигация может осуществляться со второй вкладки посредством вызова метода PushAsync для свойства Navigation экземпляра ContentPage, как показано в следующем примере кода:Navigation can be performed from the second tab by invoking the PushAsync method on the Navigation property of the ContentPage instance, as demonstrated in the following code example:

async void OnUpcomingAppointmentsButtonClicked (object sender, EventArgs e)
{
  await Navigation.PushAsync (new UpcomingAppointmentsPage ());
}

В результате в стек навигации помещается экземпляр UpcomingAppointmentsPage, где он становится активной страницей.This causes the UpcomingAppointmentsPage instance to be pushed onto the navigation stack, where it becomes the active page. Эти действия показаны на следующих снимках экрана:This is shown in the following screenshots:

Дополнительные сведения об осуществлении навигации с помощью класса NavigationPage см. в статье Иерархическая навигация.For more information about performing navigation using the NavigationPage class, see Hierarchical Navigation.

Заполнение TabbedPage с помощью шаблонаPopulating a TabbedPage with a Template

В следующем примере кода XAML показан объект TabbedPage, сформированный путем присвоения DataTemplate свойству ItemTemplate для возврата страниц для объектов в коллекции:The following XAML code example shows a TabbedPage constructed by assigning a DataTemplate to the ItemTemplate property to return pages for objects in the collection:

<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            xmlns:local="clr-namespace:TabbedPageDemo;assembly=TabbedPageDemo"
            x:Class="TabbedPageDemo.TabbedPageDemoPage">
  <TabbedPage.Resources>
    <ResourceDictionary>
      <local:NonNullToBooleanConverter x:Key="booleanConverter" />
    </ResourceDictionary>
  </TabbedPage.Resources>
  <TabbedPage.ItemTemplate>
    <DataTemplate>
      <ContentPage Title="{Binding Name}" IconImageSource="monkeyicon.png">
        <StackLayout Padding="5, 25">
          <Label Text="{Binding Name}" Font="Bold,Large" HorizontalOptions="Center" />
          <Image Source="{Binding PhotoUrl}" WidthRequest="200" HeightRequest="200" />
          <StackLayout Padding="50, 10">
            <StackLayout Orientation="Horizontal">
              <Label Text="Family:" HorizontalOptions="FillAndExpand" />
              <Label Text="{Binding Family}" Font="Bold,Medium" />
            </StackLayout>
            ...
          </StackLayout>
        </StackLayout>
      </ContentPage>
    </DataTemplate>
  </TabbedPage.ItemTemplate>
</TabbedPage>

Объект TabbedPage заполняется данными путем задания свойства ItemsSource в конструкторе для файла кода программной части:The TabbedPage is populated with data by setting the ItemsSource property in the constructor for the code-behind file:

public TabbedPageDemoPage ()
{
  ...
  ItemsSource = MonkeyDataModel.All;
}

В следующем примере кода создается эквивалентный объект TabbedPage на языке C#:The following code example shows the equivalent TabbedPage created in C#:

public class TabbedPageDemoPageCS : TabbedPage
{
  public TabbedPageDemoPageCS ()
  {
    var booleanConverter = new NonNullToBooleanConverter ();

    ItemTemplate = new DataTemplate (() => {
      var nameLabel = new Label {
        FontSize = Device.GetNamedSize (NamedSize.Large, typeof(Label)),
        FontAttributes = FontAttributes.Bold,
        HorizontalOptions = LayoutOptions.Center
      };
      nameLabel.SetBinding (Label.TextProperty, "Name");

      var image = new Image { WidthRequest = 200, HeightRequest = 200 };
      image.SetBinding (Image.SourceProperty, "PhotoUrl");

      var familyLabel = new Label {
        FontSize = Device.GetNamedSize (NamedSize.Medium, typeof(Label)),
        FontAttributes = FontAttributes.Bold
      };
      familyLabel.SetBinding (Label.TextProperty, "Family");
      ...

      var contentPage = new ContentPage {
        IconImageSource = "monkeyicon.png",
        Content = new StackLayout {
          Padding = new Thickness (5, 25),
          Children = {
            nameLabel,
            image,
            new StackLayout {
              Padding = new Thickness (50, 10),
              Children = {
                new StackLayout {
                  Orientation = StackOrientation.Horizontal,
                  Children = {
                    new Label { Text = "Family:", HorizontalOptions = LayoutOptions.FillAndExpand },
                    familyLabel
                  }
                },
                ...
              }
            }
          }
        }
      };
      contentPage.SetBinding (TitleProperty, "Name");
      return contentPage;
    });
    ItemsSource = MonkeyDataModel.All;
  }
}

Каждая вкладка отображает ContentPage, использующий серии экземпляров StackLayout и Label, чтобы отобразить данные для вкладки. На следующих снимках экрана показано содержимое для вкладки Tamarin:Each tab displays a ContentPage that uses a series of StackLayout and Label instances to display data for the tab. The following screenshots show the content for the Tamarin tab:

Затем при выборе другой вкладки отображается содержимое для этой вкладки.Selecting another tab then displays content for that tab.

Примечание

TabbedPage не поддерживает виртуализацию пользовательского интерфейса.The TabbedPage does not support UI virtualization. Поэтому, если TabbedPage содержит слишком много дочерних элементов, производительность может снижаться.Therefore, performance may be affected if the TabbedPage contains too many child elements.

Дополнительные сведения о TabbedPage см. в главе 25 книги Xamarin.Forms Чарльза Петцольда (Charles Petzold).For more information about the TabbedPage, see Chapter 25 of Charles Petzold's Xamarin.Forms book.

СводкаSummary

В этой статье демонстрируется использование TabbedPage для перехода по коллекции страниц.This article demonstrated how to use a TabbedPage to navigate through a collection of pages. Xamarin.Forms TabbedPage состоит из списка вкладок и большой области сведений, где каждая вкладка загружает содержимое в область сведений.The Xamarin.Forms TabbedPage consists of a list of tabs and a larger detail area, with each tab loading content into the detail area.