Вкладки оболочки Xamarin.FormsXamarin.Forms Shell Tabs

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

Когда шаблон навигации для приложения предусматривает всплывающее меню, следующим уровнем навигации в приложении будет нижняя панель вкладок.When the navigation pattern for an application includes a flyout, the next level of navigation in the application is the bottom tab bar. Кроме того, когда всплывающее меню закрыто, верхним уровнем навигации в приложении будет нижняя панель вкладок.In addition, when the flyout is closed the bottom tab bar can be considered to be the top level of navigation.

Или же навигация по приложению может начинаться с нижней панели вкладок без использования всплывающего меню.Alternatively, the navigation pattern for an application can begin with bottom tabs and make no use of a flyout. В этом случае дочерний элемент объекта Shell должен быть объектом TabBar, представляющим нижнюю панель вкладок.In this scenario, the child of the Shell object should be a TabBar object, which represents the bottom tab bar.

Примечание

Тип TabBar отключает всплывающее меню.The TabBar type disables the flyout.

Каждый объект FlyoutItem или TabBar может содержать один или несколько объектов Tab, где каждый объект Tab представляет вкладку на нижней панели.Each FlyoutItem or TabBar object can contain one or more Tab objects, with each Tab object representing a tab on the bottom tab bar. Каждый объект Tab может содержать один или несколько объектов ShellContent, где каждый объект ShellContent отображает один объект ContentPage.Each Tab object can contain one or more ShellContent objects, and each ShellContent object will display a single ContentPage object. Если Tab содержит более одного объекта ShellContent, перемещение по объектам ContentPage осуществляется с помощью верхней панели вкладок.When more than one ShellContent object is present in a Tab object, the ContentPage objects will be navigable by top tabs.

В каждом объекте ContentPage можно перейти к дополнительным объектам ContentPage.Within each ContentPage object, additional ContentPage objects can be navigated to. Дополнительные сведения о навигации, см. в статье о навигации в оболочке Xamarin.Forms.For more information about navigation, see Xamarin.Forms Shell Navigation.

Одностраничное приложениеSingle page application

Простейшее приложение оболочки содержит одну страницу, и для его создания достаточно добавить один объект Tab в объект TabBar.The simplest Shell application is a single page application, which can be created by adding a single Tab object to a TabBar object. В объекте Tab следует присвоить объекту ShellContent значение объекта ContentPage:Within the Tab object, a ShellContent object should be set to a ContentPage object:

<Shell xmlns="http://xamarin.com/schemas/2014/forms"
       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
       xmlns:views="clr-namespace:Xaminals.Views"
       x:Class="Xaminals.AppShell">
    <TabBar>
        <Tab>
            <ShellContent>
                <views:CatsPage />
            </ShellContent>
        </Tab>
    </TabBar>
</Shell>

Этот код создаст такую структуру одностраничного приложения:This code example results in the following single page application:

Снимок экрана с одностраничным приложением оболочки для iOS и AndroidScreenshot of a Shell single page app, on iOS and Android

Примечание

При необходимости панель навигации можно спрятать, присвоив присоединенному свойству Shell.NavBarIsVisible в объекте ContentPage значение false.The navigation bar can be hidden, if required, by setting the Shell.NavBarIsVisible attached property to false on the ContentPage object.

Оболочка содержит операторы неявного преобразования, которые позволяют упростить визуальную иерархию оболочки без добавления новых представлений в визуальное дерево.Shell has implicit conversion operators that enable the Shell visual hierarchy to be simplified, without introducing additional views into the visual tree. Это возможно, так как производный объект Shell может содержать только объекты FlyoutItem или объект TabBar, которые могут содержать только объекты Tab, которые, в свою очередь, могут содержать только объекты ShellContent.This is possible because a subclassed Shell object can only ever contain FlyoutItem objects or a TabBar object, which can only ever contain Tab objects, which can only ever contain ShellContent objects. Эти операторы неявного преобразования позволяют удалить из предыдущего примера объекты TabBar, Tab и ShellContent:These implicit conversion operators can be used to remove the TabBar, Tab, and ShellContent objects from the previous example:

<Shell xmlns="http://xamarin.com/schemas/2014/forms"
       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
       xmlns:views="clr-namespace:Xaminals.Views"
       x:Class="Xaminals.AppShell"
       FlyoutBehavior="Disabled">
    <views:CatsPage />
</Shell>

Это неявное преобразование автоматически заключает объект ContentPage в объект ShellContent, который заключается в объект Tab, который заключается в объект FlyoutItem.This implicit conversion automatically wraps the ContentPage object in a ShellContent object, which is wrapped in a Tab object, which is wrapped in a FlyoutItem object. В одностраничном приложении всплывающий элемент не нужен, поэтому свойство Shell.FlyoutBehavior получает значение Disabled.A flyout is unnecessary in a single page application, and therefore the Shell.FlyoutBehavior property is set to Disabled.

Важно!

В приложении оболочки каждый ContentPage, который является дочерним элементом объекта ShellContent, создается во время запуска приложения.In a Shell application, each ContentPage that's a child of a ShellContent object is created during application startup. Такой метод добавления объектов ShellContent приводит к созданию дополнительных страниц во время запуска приложения, что может замедлять запуск.Adding additional ShellContent objects using this approach will result in additional pages being created during application startup, which can lead to a poor startup experience. Но оболочка может создавать страницы и по требованию, реагируя на переходы.However, Shell is also capable of creating pages on demand, in response to navigation. Подробные сведения см. в разделе об эффективной загрузке страниц.For more information, see Efficient page loading.

Нижние вкладкиBottom tabs

Объекты Tab отображаются в виде нижних вкладок, если существует несколько объектов Tab в одном объекте TabBar:Tab objects are rendered as bottom tabs, provided that there are multiple Tab objects in a single TabBar object:

<Shell xmlns="http://xamarin.com/schemas/2014/forms"
       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
       xmlns:views="clr-namespace:Xaminals.Views"
       x:Class="Xaminals.AppShell">
    <TabBar>
        <Tab Title="Cats"
             Icon="cat.png">
            <ShellContent>
                <views:CatsPage />
            </ShellContent>
        </Tab>
        <Tab Title="Dogs"
             Icon="dog.png">
            <ShellContent>
                <views:DogsPage />
            </ShellContent>
        </Tab>
    </TabBar>
</Shell>

Заголовки и значки для вкладок задаются отдельно для каждого объекта Tab и отображаются на нижних вкладках:Tab titles and icons are set on each Tab object, and displayed on the bottom tabs:

Снимок экрана двухстраничного приложения оболочки с нижними вкладками для iOS и AndroidScreenshot of a Shell two page app with bottom tabs, on iOS and Android

Вы также можете использовать операторы неявного преобразования оболочки для удаления объектов ShellContent и Tab из предыдущего примера:Alternatively, Shell's implicit conversion operators can be used to remove the ShellContent and Tab objects from the previous example:

<Shell xmlns="http://xamarin.com/schemas/2014/forms"
       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
       xmlns:views="clr-namespace:Xaminals.Views"
       x:Class="Xaminals.AppShell">
    <TabBar>
        <views:CatsPage IconImageSource="cat.png" />
        <views:DogsPage IconImageSource="dog.png" />
    </TabBar>
</Shell>

Это неявное преобразование автоматически заключает объект ContentPage в объект ShellContent, а затем оба этих объекта — в объект Tab.This implicit conversion automatically wraps each ContentPage object in a ShellContent object, which are then both wrapped in a Tab object.

Важно!

В приложении оболочки каждый ContentPage, который является дочерним элементом объекта ShellContent, создается во время запуска приложения.In a Shell application, each ContentPage that's a child of a ShellContent object is created during application startup. Такой метод добавления объектов ShellContent приводит к созданию дополнительных страниц во время запуска приложения, что может замедлять запуск.Adding additional ShellContent objects using this approach will result in additional pages being created during application startup, which can lead to a poor startup experience. Но оболочка может создавать страницы и по требованию, реагируя на переходы.However, Shell is also capable of creating pages on demand, in response to navigation. Подробные сведения см. в разделе об эффективной загрузке страниц.For more information, see Efficient page loading.

Класс TabTab class

Класс Tab включает следующие свойства, которые определяют внешний вид и поведение вкладки:The Tab class includes the following properties that control tab appearance and behavior:

  • CurrentItem с типом ShellContent обозначает выбранный элемент.CurrentItem, of type ShellContent, the selected item.
  • FlyoutDisplayOptions с типом FlyoutDisplayOptions определяет, как этот элемент и его дочерние элементы отображаются во всплывающем меню.FlyoutDisplayOptions, of type FlyoutDisplayOptions, defines how the item and its children are displayed in the flyout. Значение по умолчанию — AsSingleItem.The default value is AsSingleItem.
  • FlyoutIcon с типом ImageSource определяет значок, который отображается во всплывающем элементе.FlyoutIcon, of type ImageSource, defines the icon that will be displayed in the flyout.
  • Icon с типом ImageSource определяет значок, который отображается в частях хрома, не являющихся всплывающими элементами.Icon, of type ImageSource, defines the icon to display in parts of the chrome which are not the flyout.
  • IsChecked с типом boolean определяет, выделен ли этот элемент во всплывающем элементе в настоящий момент.IsChecked, of type boolean, defines if the item is currently highlighted in the flyout.
  • IsEnabled с типом boolean определяет, можно ли выбрать элемент в хроме.IsEnabled, of type boolean, defines if the item is selectable in the chrome.
  • IsTabStop с типом bool указывает, включается ли Tab в навигацию по клавише TAB.IsTabStop, of type bool, indicates whether a Tab is included in tab navigation. Значение по умолчанию — true, а если оно равно false, элемент Tab игнорируется инфраструктурой навигации по клавише TAB, независимо от значения TabIndex.Its default value is true, and when its value is false the Tab is ignored by the tab-navigation infrastructure, irrespective if a TabIndex is set.
  • Items с типом IList<ShellContent> определяет все содержимое в Tab.Items, of type IList<ShellContent>, defines all the content within a Tab.
  • TabIndex с типом int обозначает порядок, в котором объекты Tab получают фокус при переходе пользователя между элементами посредством нажатия клавиши TAB.TabIndex, of type int, indicates the order in which Tab objects receive focus when the user navigates through items by pressing the Tab key. Это свойство по умолчанию имеет значение 0.The default value of the property is 0.
  • Title с типом string определяет заголовок, отображаемый на вкладке в пользовательском интерфейсе.Title, of type string, the title to display on the tab in the UI.

Содержимое оболочкиShell content

Дочерним элементом каждого объекта Tab является объект ShellContent, для свойства Content которого задается значение ContentPage:The child of every Tab object is a ShellContent object, whose Content property is set to a ContentPage:

<Shell xmlns="http://xamarin.com/schemas/2014/forms"
       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
       xmlns:views="clr-namespace:Xaminals.Views"
       x:Class="Xaminals.AppShell">
    <TabBar>
        <Tab Title="Cats"
             Icon="cat.png">
            <ShellContent>
                <views:CatsPage />
            </ShellContent>
        </Tab>
        <Tab Title="Dogs"
             Icon="dog.png">
            <ShellContent>
                <views:DogsPage />
            </ShellContent>
        </Tab>
    </TabBar>
</Shell>

В каждом объекте ContentPage можно перейти к дополнительным объектам ContentPage.Within each ContentPage object, additional ContentPage objects can be navigated to. Дополнительные сведения о навигации, см. в статье о навигации в оболочке Xamarin.Forms.For more information about navigation, see Xamarin.Forms Shell Navigation.

Класс ShellContentShellContent class

Класс ShellContent включает следующие свойства, которые определяют внешний вид и поведение содержимого вкладки:The ShellContent class includes the following properties that control tab content appearance and behavior:

  • Content с типом object определяет содержимое из ShellContent.Content, of type object, the content of the ShellContent.
  • ContentTemplate с типом DataTemplate определяет шаблон, на основе которого динамически оформляется содержимое ShellContent.ContentTemplate, of type DataTemplate, the template used to dynamically inflate the content of the ShellContent.
  • FlyoutIcon с типом ImageSource определяет значок, который отображается во всплывающем элементе.FlyoutIcon, of type ImageSource, defines the icon that will be displayed in the flyout.
  • Icon с типом ImageSource определяет значок, который отображается в частях хрома, не являющихся всплывающими элементами.Icon, of type ImageSource, defines the icon to display in parts of the chrome which are not the flyout.
  • IsChecked с типом boolean определяет, выделен ли этот элемент во всплывающем элементе в настоящий момент.IsChecked, of type boolean, defines if the item is currently highlighted in the flyout.
  • IsEnabled с типом boolean определяет, можно ли выбрать элемент в хроме.IsEnabled, of type boolean, defines if the item is selectable in the chrome.
  • MenuItems с типом MenuItemCollection обозначает элементы меню, которые отображаются во всплывающем элементе, если этот ShellContent является отображаемой страницей.MenuItems, of type MenuItemCollection, the menu items to display in the flyout when this ShellContent is the presented page.
  • Title с типом string определяет заголовок, отображаемый на вкладке в пользовательском интерфейсе.Title, of type string, the title to display in the UI.

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

Нижние и верхние вкладкиBottom and top tabs

Если Tab содержит более одного объекта ShellContent, вверху добавляется еще одна панель вкладок, с помощью которой осуществляется перемещение по объектам ContentPage:When more than one ShellContent object is present in a Tab object, a top tab bar is added to the bottom tab, through which the ContentPage objects are navigable:

<Shell xmlns="http://xamarin.com/schemas/2014/forms"
       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
       xmlns:views="clr-namespace:Xaminals.Views"
       x:Class="Xaminals.AppShell">
    <TabBar>
        <Tab Title="Domestic"
             Icon="domestic.png">
            <ShellContent>
                <views:CatsPage />
            </ShellContent>
            <ShellContent>
                <views:DogsPage />
            </ShellContent>
        </Tab>
        <Tab Title="Monkeys"
             Icon="monkey.png">
            <ShellContent>
                <views:MonkeysPage />
            </ShellContent>
        </Tab>
    </TabBar>
</Shell>

В результате создается такой макет, как показано на следующих снимках экрана:This results in the layout shown in the following screenshots:

Снимок экрана двухстраничного приложения оболочки с верхними и нижними вкладками для iOS и AndroidScreenshot of a Shell two page app with top and bottom tabs, on iOS and Android

Также вы можете использовать операторы неявного преобразования оболочки для удаления объектов ShellContent и второго объекта Tab из предыдущего примера:Alternatively, Shell's implicit conversion operators can be used to remove the ShellContent objects, and the second Tab object from the previous example:

<Shell xmlns="http://xamarin.com/schemas/2014/forms"
       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
       xmlns:views="clr-namespace:Xaminals.Views"
       x:Class="Xaminals.AppShell">
    <TabBar>
        <Tab Title="Domestic"
             Icon="domestic.png">
            <views:CatsPage />
            <views:DogsPage />
        </Tab>
        <views:MonkeysPage IconImageSource="monkey.png" />
    </TabBar>
</Shell>

Это неявное преобразование автоматически заключает MonkeysPage в объект ShellContent, а его — в объект Tab.This implicit conversion automatically wraps MonkeysPage in a ShellContent object, which is then wrapped in a Tab object. Кроме того, CatsPage и DogsPage неявным образом заключаются в объекты ShellContent.In addition, CatsPage and DogsPage are implicitly wrapped in ShellContent objects.

Эффективная загрузка страницEfficient page loading

В приложении оболочки каждый объект ContentPage в объекте ShellContent создается во время запуска приложения, что может замедлять запуск.In a Shell application, every ContentPage object in a ShellContent object is created during application startup, which can lead to a poor startup experience. Но оболочка позволяет создавать страницы по требованию, реагируя на переходы.However, Shell also allows pages to be created on demand, in response to navigation. Для этого следует применить расширение разметки DataTemplate, чтобы преобразовать каждый ContentPage в DataTemplate и сохранить полученный результат в свойстве ShellContent.ContentTemplate:This can be accomplished by using the DataTemplate markup extension to convert each ContentPage into a DataTemplate, and then setting the result as the ShellContent.ContentTemplate property value:

<Shell xmlns="http://xamarin.com/schemas/2014/forms"
       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
       xmlns:views="clr-namespace:Xaminals.Views"
       x:Class="Xaminals.AppShell">    
    <TabBar>
        <Tab Title="Domestic"
             Icon="paw.png">
            <ShellContent Title="Cats"
                          Icon="cat.png"
                          ContentTemplate="{DataTemplate views:CatsPage}" />
            <ShellContent Title="Dogs"
                          Icon="dog.png"
                          ContentTemplate="{DataTemplate views:DogsPage}" />
        </Tab>
        <ShellContent Title="Monkeys"
                      Icon="monkey.png"
                      ContentTemplate="{DataTemplate views:MonkeysPage}" />
    </TabBar>    
</Shell>

Этот XAML создает и отображает CatsPage, то есть первый элемент содержимого, объявленный в производном объекте Shell.This XAML creates and displays CatsPage, because it's the first item of content declared in the subclassed Shell object. Переход между CatsPage и MonkeysPage осуществляется через нижние вкладки, и эти страницы создаются только тогда, когда пользователь переходит к ним.CatsPage and MonkeysPage can be navigated to via bottom tabs, and these pages are only created when the user navigates to them. Преимуществом этого подхода является ускорение запуска приложения, ведь теперь страницы создаются только по запросу в ответ на действия навигации, а не сразу при запуске приложения.The advantage of this approach is that the poor startup experience is avoided, as pages are created on demand in response to navigation, rather than at application startup.

Внешний вид вкладокTab appearance

Класс Shell предоставляет следующие присоединенные свойства, которые определяют внешний вид вкладок:The Shell class defines the following attached properties that control the appearance of tabs:

  • TabBarBackgroundColor с типом Color определяет цвет фона для панели вкладок.TabBarBackgroundColor, of type Color, that defines the background color for the tab bar. Если это свойство не задано, используется значение свойства BackgroundColor.If the property is unset, the BackgroundColor property value is used.
  • TabBarDisabledColor с типом Color определяет цвет отключенных вкладок на панели.TabBarDisabledColor, of type Color, that defines the disabled color for the tab bar. Если это свойство не задано, используется значение свойства DisabledColor.If the property is unset, the DisabledColor property value is used.
  • TabBarForegroundColor с типом Color определяет цвет переднего плана для панели вкладок.TabBarForegroundColor, of type Color, that defines the foreground color for the tab bar. Если это свойство не задано, используется значение свойства ForegroundColor.If the property is unset, the ForegroundColor property value is used.
  • TabBarTitleColor с типом Color определяет цвет заголовков для панели вкладок.TabBarTitleColor, of type Color, that defines the title color for the tab bar. Если это свойство не задано, используется значение свойства TitleColor.If the property is unset, the TitleColor property value will be used.
  • TabBarUnselectedColor с типом Color определяет цвет невыбранных вкладок на панели.TabBarUnselectedColor, of type Color, that defines the unselected color for the tab bar. Если это свойство не задано, используется значение свойства UnselectedColor.If the property is unset, the UnselectedColor property value is used.

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

В следующем примере показан стиль XAML, который задает разные свойства для цветов вкладки:The following example shows a XAML style that sets different tab color properties:

<Style x:Key="BaseStyle"
       TargetType="Element">
    <Setter Property="Shell.TabBarBackgroundColor"
            Value="#3498DB" />
    <Setter Property="Shell.TabBarTitleColor"
            Value="White" />
    <Setter Property="Shell.TabBarUnselectedColor"
            Value="#B4FFFFFF" />
</Style>

Кроме того, стиль вкладок можно задать с помощью каскадных таблиц стилей (CSS).In addition, tabs can also be styled using Cascading Style Sheets (CSS). Подробные сведения см. в статье об особых свойствах оболочки Xamarin.Forms.For more information, see Xamarin.Forms Shell specific properties.