Всплывающее меню оболочки Xamarin.FormsXamarin.Forms Shell Flyout

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

Всплывающее меню выполняет роль главного меню для приложения оболочки. Его можно вызвать специальным значком или жестом пальцем от края экрана.The flyout is the root menu for a Shell application, and is accessible through an icon or by swiping from the side of the screen. Всплывающее меню состоит из необязательного заголовка, вложенных элементов всплывающего меню и необязательных пунктов меню.The flyout consists of an optional header, flyout items, and optional menu items:

Снимок экрана со всплывающим меню и заметками в оболочкеScreenshot of a Shell annotated flyout

При необходимости вы можете задать для фона всплывающего меню цвет Color, используя привязываемое свойство Shell.FlyoutBackgroundColor.If required, the background color of the flyout can be set to a Color through the Shell.FlyoutBackgroundColor bindable property. Это свойство также можно задать из каскадной таблицы стилей (CSS).This property can also be set from a Cascading Style Sheet (CSS). Подробные сведения см. в статье об особых свойствах оболочки Xamarin.Forms.For more information, see Xamarin.Forms Shell specific properties.

Значок всплывающего менюFlyout icon

По умолчанию приложения оболочки оснащаются значком "гамбургера", при нажатии которого открывается всплывающее меню.By default, Shell applications have a hamburger icon which, when pressed, opens the flyout. Вы можете изменить этот значок, присвоив привязываемому свойству Shell.FlyoutIcon с типом ImageSource значение, соответствующее нужному значку:This icon can be changed by setting the Shell.FlyoutIcon bindable property, of type ImageSource, to an appropriate icon:

<Shell ...
       FlyoutIcon="flyouticon.png">
    ...       
</Shell>

Поведение всплывающего менюFlyout behavior

Всплывающее меню отображается, если нажать кнопку "гамбургер" или провести пальцем от края экрана.The flyout can be accessed through the hamburger icon or by swiping from the side of the screen. Но вы можете изменить это поведение, задав в присоединенном свойстве Shell.FlyoutBehavior один из членов перечисления FlyoutBehavior:However, this behavior can be changed by setting the Shell.FlyoutBehavior attached property to one of the FlyoutBehavior enumeration members:

  • Disabled указывает, что пользователь не может открывать всплывающее меню;Disabled – indicates that the flyout can't be opened by the user.
  • Flyout указывает, что пользователь может открывать и закрывать всплывающее меню.Flyout – indicates that the flyout can be opened and closed by the user. Это значение по умолчанию для свойства FlyoutBehavior;This is the default value for the FlyoutBehavior property.
  • Locked указывает, что пользователь не может закрыть всплывающее меню, и это меню не перекрывает содержимое.Locked – indicates that the flyout can't be closed by the user, and that it doesn't overlap content.

В следующем примере показано, как отключить всплывающее меню.The following example shows how to disable the flyout:

<Shell ...
       FlyoutBehavior="Disabled">
    ...
</Shell>

Примечание

Присоединенному свойству FlyoutBehavior можно присвоить значение Shell, FlyoutItem, ShellContent или объект страницы, чтобы переопределить поведение всплывающего меню по умолчанию.The FlyoutBehavior attached property can be set on Shell, FlyoutItem, ShellContent, and page objects, to override the default flyout behavior.

Кроме того, всплывающее меню можно открывать и закрывать программным образом, задавая привязываемому свойству Shell.FlyoutIsPresented значение boolean, которое определяет видимость всплывающего меню на текущий момент:In addition, the flyout can be programmatically opened and closed by setting the Shell.FlyoutIsPresented bindable property to a boolean value that indicates whether the flyout is currently visible:

Shell.Current.FlyoutIsPresented = false;

Заголовок всплывающего менюFlyout header

Заголовок всплывающего меню — это содержимое, которое при необходимости отображается в верхней части панели; его внешний вид, определяемый object, можно задать с помощью значения свойства Shell.FlyoutHeader:The flyout header is the content that optionally appears at the top of the flyout, with its appearance being defined by an object that can be set through the Shell.FlyoutHeader property value:

<Shell.FlyoutHeader>
    <controls:FlyoutHeader />
</Shell.FlyoutHeader>

Тип FlyoutHeader показан в примере ниже.The FlyoutHeader type is shown in the following example:

<ContentView xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="Xaminals.Controls.FlyoutHeader"
             HeightRequest="200">
    <Grid BackgroundColor="Black">
        <Image Aspect="AspectFill"
               Source="xamarinstore.jpg"
               Opacity="0.6" />
        <Label Text="Animals"
               TextColor="White"
               FontAttributes="Bold"
               HorizontalTextAlignment="Center"
               VerticalTextAlignment="Center" />
    </Grid>
</ContentView>

Вот результат его применения к заголовку всплывающего меню:This results in the following flyout header:

Снимок экрана с заголовком всплывающего менюScreenshot of the flyout header

Кроме того, вид заголовка всплывающего меню можно определить через свойство Shell.FlyoutHeaderTemplate, присвоив ему значение DataTemplate:Alternatively, the flyout header appearance can be defined by setting the Shell.FlyoutHeaderTemplate property to a DataTemplate:

<Shell.FlyoutHeaderTemplate>
    <DataTemplate>
        <Grid BackgroundColor="Black"
              HeightRequest="200">
            <Image Aspect="AspectFill"
                   Source="xamarinstore.jpg"
                   Opacity="0.6" />
            <Label Text="Animals"
                   TextColor="White"
                   FontAttributes="Bold"
                   HorizontalTextAlignment="Center"
                   VerticalTextAlignment="Center" />
        </Grid>            
    </DataTemplate>
</Shell.FlyoutHeaderTemplate>

По умолчанию заголовок всплывающего меню будет зафиксирован во всплывающем элементе, хотя приведенное ниже его содержимое прокручивается в том случае, если элементов много.By default, the flyout header will be fixed in the flyout while the content below will scroll if there are enough items. Тем не менее, это поведение можно изменить, задав в привязываемом свойстве Shell.FlyoutHeaderBehavior один из членов перечисления FlyoutHeaderBehavior:However, this behavior can be changed by setting the Shell.FlyoutHeaderBehavior bindable property to one of the FlyoutHeaderBehavior enumeration members:

  • Default означает, что для полос прокрутки будет использоваться поведение, установленное для платформы по умолчанию.Default – indicates that the default behavior for the platform will be used. Это значение по умолчанию для свойства FlyoutHeaderBehavior.This is the default value of the FlyoutHeaderBehavior property.
  • Fixed означает, что заголовок всплывающего меню все время остается видимым и не изменяется.Fixed – indicates that the flyout header remains visible and unchanged at all times.
  • Scroll указывает, что заголовок всплывающего меню пропадает с экрана, прокручиваясь вместе с другими элементами.Scroll – indicates that the flyout header scrolls out of view as the user scrolls the items.
  • CollapseOnScroll указывает, что заголовок всплывающего меню сворачивается до заглавия во время прокрутки элементов.CollapseOnScroll – indicates that the flyout header collapses to a title only, as the user scrolls the items.

В следующем примере показано, как свернуть заголовок всплывающего меню при прокрутке пользователем:The following example shows how to collapse the flyout header as the user scrolls:

<Shell ...
       FlyoutHeaderBehavior="CollapseOnScroll">
    ...
</Shell>

Элементы всплывающего менюFlyout items

Если шаблон навигации по приложению включает всплывающее меню, производный объект Shell должен содержать один или несколько объектов FlyoutItem, где каждый объект FlyoutItem представляет один такой элемент.When the navigation pattern for an application includes a flyout, the subclassed Shell object must contain one or more FlyoutItem objects, with each FlyoutItem object representing an item on the flyout. Каждый объект FlyoutItem должен быть дочерним для объекта Shell.Each FlyoutItem object should be a child of the Shell object.

Следующий пример создает всплывающее меню с заголовком и двумя элементами:The following example creates a flyout containing a flyout header and two flyout items:

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

В этом примере каждый ContentPage доступен только через элементы всплывающего меню:In this example, each ContentPage can only be accessed through flyout items:

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

Примечание

Если заголовок всплывающего меню отсутствует, элементы всплывающего меню отображаются от самого верха всплывающего меню.When a flyout header isn't present, flyout items appear at the top of the flyout. В противном случае они отображаются под заголовком всплывающего меню.Otherwise, they appear below the flyout header.

Оболочка содержит операторы неявного преобразования, которые позволяют упростить визуальную иерархию оболочки без добавления новых представлений в визуальное дерево.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. Эти операторы неявного преобразования позволяют удалить из предыдущего примера объекты FlyoutItem, Tab и ShellContent:These implicit conversion operators can be used to remove the FlyoutItem, 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:controls="clr-namespace:Xaminals.Controls"
       xmlns:views="clr-namespace:Xaminals.Views"
       x:Class="Xaminals.AppShell">
    <Shell.FlyoutHeader>
        <controls:FlyoutHeader />
    </Shell.FlyoutHeader>
    <views:CatsPage IconImageSource="cat.png" />
    <views:DogsPage IconImageSource="dog.png" />
</Shell>

Это неявное преобразование автоматически заключает каждый объект ContentPage в объекты ShellContent, которые заключаются в объекты Tab, которые заключаются в объекты FlyoutItem.This implicit conversion automatically wraps each ContentPage object in ShellContent objects, which are wrapped in Tab objects, which are wrapped in FlyoutItem objects.

Важно!

В приложении оболочки каждый 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. Дополнительные сведения см. в разделе об эффективности загрузки страниц в руководстве по вкладкам оболочки Xamarin.Forms.For more information, see Efficient page loading in the Xamarin.Forms Shell Tabs guide.

Класс FlyoutItemFlyoutItem class

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

  • FlyoutDisplayOptions с типом FlyoutDisplayOptions определяет, как этот элемент и его дочерние элементы отображаются во всплывающем меню.FlyoutDisplayOptions, of type FlyoutDisplayOptions, defines how the item and its children are displayed in the flyout. Значение по умолчанию — AsSingleItem.The default value is AsSingleItem.
  • CurrentItem с типом Tab обозначает выбранный элемент.CurrentItem, of type Tab, the selected item.
  • Items с типом IList<Tab> определяет все вкладки в FlyoutItem.Items, of type IList<Tab>, defines all of the tabs within a FlyoutItem.
  • FlyoutIcon с типом ImageSource — значок, который используется для элемента.FlyoutIcon, of type ImageSource, the icon to use for the item. Если это свойство не установлено, по умолчанию ему присваивается значение свойства Icon.If this property is unset, it will fallback to using the Icon property value.
  • Icon с типом ImageSource определяет значок, который отображается в частях хрома, не относящихся к всплывающему меню.Icon, of type ImageSource, defines the icon to display in parts of the chrome that 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 указывает, включается ли FlyoutItem в навигацию по клавише TAB.IsTabStop, of type bool, indicates whether a FlyoutItem is included in tab navigation. Значение по умолчанию — true, а если оно равно false, элемент FlyoutItem игнорируется инфраструктурой навигации по клавише TAB, независимо от значения TabIndex.Its default value is true, and when its value is false the FlyoutItem is ignored by the tab-navigation infrastructure, irrespective if a TabIndex is set.
  • TabIndex с типом int обозначает порядок, в котором объекты FlyoutItem получают фокус при переходе пользователя между элементами посредством нажатия клавиши TAB.TabIndex, of type int, indicates the order in which FlyoutItem 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 in the UI.
  • Route с типом string — строка, используемая для адресации элемента.Route, of type string, the string used to address the item.

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

Примечание

Все объекты FlyoutItem в подклассах объекта Shell добавляются в коллекцию Shell.Items, которая определяет список элементов, отображаемых во всплывающем меню.All FlyoutItem objects in a subclassed Shell object are added to the Shell.Items collection, which defines the list of items that will be shown in the flyout.

Кроме того, класс FlyoutItem предоставляет следующие переопределяемые методы:In addition, the FlyoutItem class exposes the following overridable methods:

  • OnTabIndexPropertyChanged вызывается при изменении свойства TabIndex;OnTabIndexPropertyChanged, that's called whenever the TabIndex property changes.
  • OnTabStopPropertyChanged вызывается при изменении свойства IsTabStop;OnTabStopPropertyChanged, that's called whenever the IsTabStop property changes.
  • TabIndexDefaultValueCreator возвращает int и позволяет задать значение по умолчанию для свойства TabIndex;TabIndexDefaultValueCreator, returns an int, and is called to set the default value of the TabIndex property.
  • TabStopDefaultValueCreator возвращает bool и позволяет задать значение по умолчанию для свойства TabStop.TabStopDefaultValueCreator, returns a bool, and is called to set the default value of the TabStop property.

Параметры отображения всплывающего менюFlyout display options

Перечисление FlyoutDisplayOptions определяет следующие члены:The FlyoutDisplayOptions enumeration defines the following members:

  • AsSingleItem указывает, будет ли элемент отображаться как один элемент;AsSingleItem, indicates that the item will be visible as a single item.
  • AsMultipleItems указывает, что сам элемент и его дочерние элементы будут отображаться во всплывающем меню как группа элементов.AsMultipleItems, indicates that the item and its children will be visible in the flyout as a group of items.

Если вы установите для свойства FlyoutItem.FlyoutDisplayOptions значение AsMultipleItems, будет создан элемент всплывающего меню для каждого Tab в FlyoutItem:By setting the FlyoutItem.FlyoutDisplayOptions property to AsMultipleItems, a flyout item for each Tab within a FlyoutItem will be created:

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

    <Shell.FlyoutHeader>
        <controls:FlyoutHeader />
    </Shell.FlyoutHeader>

    <FlyoutItem Title="Animals"
                FlyoutDisplayOptions="AsMultipleItems">
        <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}" />
        <ShellContent Title="Elephants"
                      Icon="elephant.png"
                      ContentTemplate="{DataTemplate views:ElephantsPage}" />  
        <ShellContent Title="Bears"
                      Icon="bear.png"
                      ContentTemplate="{DataTemplate views:BearsPage}" />
    </FlyoutItem>

    <ShellContent Title="About"
                  Icon="info.png"
                  ContentTemplate="{DataTemplate views:AboutPage}" />    
</Shell>

В этом примере элементы всплывающего меню создаются для объекта Tab, производного от объекта FlyoutItem, и объектов ShellContent, производных от объекта FlyoutItem.In this example, flyout items are created for the Tab object that's a child of the FlyoutItem object, and the ShellContent objects that are children of the FlyoutItem object. Это связано с тем, что каждый объект ShellContent, производный от объекта FlyoutItem, автоматически упаковывается в объект Tab.This occurs because each ShellContent object that's a child of the FlyoutItem object is automatically wrapped in a Tab object. Кроме того, элемент всплывающего меню создается для последнего объекта ShellContent, который упаковывается в объект Tab, а затем в объект FlyoutItem.In addition, a flyout item is created for the final ShellContent object, which is wrapped in a Tab object, and then in a FlyoutItem object.

Все это создает такие элементы всплывающего меню:This results in the following flyout items:

Снимок экрана всплывающего меню с объектами FlyoutItem для iOS и AndroidScreenshot of flyout containing FlyoutItem objects, on iOS and Android

Определение внешнего вида FlyoutItemDefine FlyoutItem appearance

Внешний вид каждого объекта FlyoutItem можно настроить, присвоив присоединенному свойству Shell.ItemTemplate значение DataTemplate:The appearance of each FlyoutItem can be customized by setting the Shell.ItemTemplate attached property to a DataTemplate:

<Shell ...>
    ...
    <Shell.ItemTemplate>
        <DataTemplate>
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="0.2*" />
                    <ColumnDefinition Width="0.8*" />
                </Grid.ColumnDefinitions>
                <Image Source="{Binding FlyoutIcon}"
                       Margin="5"
                       HeightRequest="45" />
                <Label Grid.Column="1"
                       Text="{Binding Title}"
                       FontAttributes="Italic"
                       VerticalTextAlignment="Center" />
            </Grid>
        </DataTemplate>
    </Shell.ItemTemplate>
</Shell>

Этот пример отображает заголовок каждого объекта FlyoutItem курсивом:This example displays the title of each FlyoutItem object in italics:

Снимок экрана шаблонных объектов FlyoutItem для iOS и AndroidScreenshot of templated FlyoutItem objects, on iOS and Android

Примечание

Оболочка предоставляет свойства Title и FlyoutIcon для BindingContext в ItemTemplate.Shell provides the Title and FlyoutIcon properties to the BindingContext of the ItemTemplate.

Последовательность табуляции для FlyoutItemFlyoutItem tab order

По умолчанию последовательность табуляции для объектов FlyoutItem соответствует порядку, в котором они перечислены в XAML или программно добавлены в дочернюю коллекцию.By default, the tab order of FlyoutItem objects is the same order in which they are listed in XAML, or programmatically added to a child collection. Этот порядок определяет порядок навигации по элементам FlyoutItem с клавиатуры, и часто порядок по умолчанию является оптимальным.This order is the order in which the FlyoutItem objects will be navigated through with a keyboard, and often this default order is the best order.

Вы можете изменить установленную по умолчанию последовательность табуляции, установив свойство FlyoutItem.TabIndex. Оно обозначает порядок, в котором объекты FlyoutItem будут получать фокус при переходе пользователя между элементами путем нажатия клавиши TAB.The default tab order can be changed by setting the FlyoutItem.TabIndex property, which indicates the order in which FlyoutItem objects receive focus when the user navigates through items by pressing the Tab key. По умолчанию свойство равно 0, при этом оно может принимать любое значение int.The default value of the property is 0, and it can be set to any int value.

Следующие правила применяются при использовании последовательности табуляции по умолчанию или задании свойства TabIndex:The following rules apply when using the default tab order, or setting the TabIndex property:

  • Объекты FlyoutItem со значением 0 для свойства TabIndex добавляются в последовательность табуляции в том порядке, в котором они объявлены в XAML или дочерних коллекциях.FlyoutItem objects with a TabIndex equal to 0 are added to the tab order based on their declaration order in XAML or child collections.
  • Объекты FlyoutItem со значением TabIndex больше 0 добавляются в последовательность табуляции с учетом значений TabIndex.FlyoutItem objects with a TabIndex greater than 0 are added to the tab order based on their TabIndex value.
  • Объекты FlyoutItem со значением TabIndex меньше 0 добавляются в последовательность табуляции и отображаются раньше, чем любой объект с нулевым значением.FlyoutItem objects with a TabIndex less than 0 are added to the tab order and appear before any zero value.
  • Конфликты для TabIndex, устраняемые в порядке объявления.Conflicts on a TabIndex are resolved by declaration order.

Когда последовательность табуляции определена, нажатие клавиши TAB переключает фокус между объектами FlyoutItem в порядке возрастания значений TabIndex, а после достижения конечного элемента управления возвращает фокус в начало.After defining a tab order, pressing the Tab key will cycle the focus through FlyoutItem objects in ascending TabIndex order, wrapping around to the beginning once the final object is reached.

Кроме настройки последовательности табуляции для объектов FlyoutItem, может потребоваться исключить из этой последовательности некоторые объекты.In addition to setting the tab order of FlyoutItem objects, it may be necessary to exclude some objects from the tab order. Это можно сделать с помощью свойства FlyoutItem.IsTabStop, которое указывает, включается ли FlyoutItem в навигацию по клавише TAB.This can be achieved with the FlyoutItem.IsTabStop property, which indicates whether a FlyoutItem is included in tab navigation. Значение по умолчанию — true, а если оно равно false, элемент FlyoutItem игнорируется инфраструктурой навигации по клавише TAB, независимо от значения TabIndex.Its default value is true, and when its value is false the FlyoutItem is ignored by the tab-navigation infrastructure, irrespective if a TabIndex is set.

Настройка текущего FlyoutItemSet the current FlyoutItem

Класс Shell имеет привязываемое свойство с именем CurrentItem и типом FlyoutItem, которое представляет выбранный в данный момент FlyoutItem.The Shell class has a bindable property named CurrentItem, of type FlyoutItem, that represents the currently selected FlyoutItem. При первом запуске приложения оболочки это свойство принимает значение первого FlyoutItem в производном объекте Shell.When a Shell application is first run, this property will be set to the first FlyoutItem in the subclassed Shell object. Но этому свойству можно присвоить значение другого FlyoutItem, как показано в следующем примере:However, the property can be set to another FlyoutItem, as shown in the following example:

<Shell ...
       CurrentItem="{x:Reference aboutItem}">
    <FlyoutItem Title="Animals"
                FlyoutDisplayOptions="AsMultipleItems">
        ...
    </FlyoutItem>
    <ShellContent x:Name="aboutItem"
                  Title="About"
                  Icon="info.png"
                  ContentTemplate="{DataTemplate views:AboutPage}" />
</Shell>

Этот код задает объект ShellContent с именем aboutItem в качестве значения свойства CurrentItem, что приводит к его отображению.This code sets the ShellContent object named aboutItem as the CurrentItem property, resulting in it being displayed. В нашем примере используется неявное преобразование для помещения объекта ShellContent в объект Tab, который упаковывается в объект FlyoutItem.In this example, an implicit conversion is used to wrap the ShellContent object in a Tab object, which is wrapped in a FlyoutItem object.

Эквивалентный код на C# выглядит так:The equivalent C# code is:

Shell.Current.CurrentItem = aboutItem;

Во всплывающее меню можно при необходимости добавлять пункты меню, каждый из которых представлен объектом MenuItem.Menu items can be optionally added to the flyout, and each menu item is represented by a MenuItem object. Положение объектов MenuItem во всплывающем меню определяется порядком их объявления в визуальной иерархии оболочки.The position of MenuItem objects on the flyout is dependent upon their declaration order in the Shell visual hierarchy. Таким образом, любые объекты MenuItem, объявленные перед объектами FlyoutItem, отображаются в верхней части всплывающего меню, а любые объекты MenuItem, объявленные после объектов FlyoutItem, — в его нижней части.Therefore, any MenuItem objects declared before FlyoutItem objects will appear at the top of the flyout, and any MenuItem objects declared after FlyoutItem objects will appear at the bottom of the flyout.

Примечание

Класс MenuItem имеет событие Clicked и свойство Command.The MenuItem class has a Clicked event, and a Command property. Это означает, что объекты MenuItem позволяют выполнять действия в ответ на касание MenuItem.Therefore, MenuItem objects enable scenarios that execute an action in response to the MenuItem being tapped. Сюда относятся такие сценарии, как навигация и открытие веб-браузера на определенной веб-странице.These scenarios include performing navigation, and opening a web browser on a specific web page.

Объекты MenuItem можно добавить в всплывающее окно, как показано в следующем примере:MenuItem objects can be added to the flyout as shown in the following example:

<Shell ...>
    ...            
    <MenuItem Text="Random"
              IconImageSource="random.png"
              Command="{Binding RandomPageCommand}" />
    <MenuItem Text="Help"
              IconImageSource="help.png"
              Command="{Binding HelpCommand}"
              CommandParameter="https://docs.microsoft.com/xamarin/xamarin-forms/app-fundamentals/shell" />    
</Shell>

Этот код добавляет во всплывающее меню два объекта MenuItem под всеми его пунктами:This code adds two MenuItem objects to the flyout, beneath all flyout items:

Снимок экрана всплывающего меню с объектами MenuItem для iOS и AndroidScreenshot of flyout containing MenuItem objects, on iOS and Android

Первый объект MenuItem выполняет ICommand с именем RandomPageCommand, который ведет на случайную страницу в приложении.The first MenuItem object executes an ICommand named RandomPageCommand, which navigates to a random page in the application. Второй объект MenuItem выполняет ICommand с именем HelpCommand, который открывает в веб-браузере URL-адрес, заданный свойством CommandParameter.The second MenuItem object executes an ICommand named HelpCommand, which opens the URL specified by the CommandParameter property in a web browser.

Примечание

BindingContext для каждого элемента MenuItem наследуется от производного объекта Shell.The BindingContext of each MenuItem is inherited from the subclassed Shell object.

Определение внешнего вида MenuItemDefine MenuItem appearance

Внешний вид каждого объекта MenuItem можно настроить, присвоив присоединенному свойству Shell.MenuItemTemplate значение DataTemplate:The appearance of each MenuItem can be customized by setting the Shell.MenuItemTemplate attached property to a DataTemplate:

<Shell ...>
    <Shell.MenuItemTemplate>
        <DataTemplate>
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="0.2*" />
                    <ColumnDefinition Width="0.8*" />
                </Grid.ColumnDefinitions>
                <Image Source="{Binding Icon}"
                       Margin="5"
                       HeightRequest="45" />
                <Label Grid.Column="1"
                       Text="{Binding Text}"
                       FontAttributes="Italic"
                       VerticalTextAlignment="Center" />
            </Grid>
        </DataTemplate>
    </Shell.MenuItemTemplate>
    ...
    <MenuItem Text="Random"
              IconImageSource="random.png"
              Command="{Binding RandomPageCommand}" />
    <MenuItem Text="Help"
              IconImageSource="help.png"
              Command="{Binding HelpCommand}"
              CommandParameter="https://docs.microsoft.com/xamarin/xamarin-forms/app-fundamentals/shell" />  
</Shell>

В этом примере MenuItemTemplate на уровне оболочки задается для каждого объекта MenuItem, чтобы заголовок каждого объекта MenuItem отображался курсивом:This example attaches the Shell-level MenuItemTemplate to each MenuItem object, displaying the title of each MenuItem object in italics:

Снимок экрана шаблонных объектов в MenuItem для iOS и AndroidScreenshot of templated MenuItem objects, on iOS and Android

Примечание

Оболочка предоставляет свойства Text и IconImageSource для BindingContext в MenuItemTemplate.Shell provides the Text and IconImageSource properties to the BindingContext of the MenuItemTemplate.`

Так как Shell.MenuItemTemplate является присоединенным свойством, для отдельных объектов MenuItem можно задавать разные шаблоны:Because Shell.MenuItemTemplate is an attached property, different templates can be attached to specific MenuItem objects:

<Shell ...>
    <Shell.MenuItemTemplate>
        <DataTemplate>
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="0.2*" />
                    <ColumnDefinition Width="0.8*" />
                </Grid.ColumnDefinitions>
                <Image Source="{Binding Icon}"
                       Margin="5"
                       HeightRequest="45" />
                <Label Grid.Column="1"
                       Text="{Binding Text}"
                       FontAttributes="Italic"
                       VerticalTextAlignment="Center" />
            </Grid>
        </DataTemplate>
    </Shell.MenuItemTemplate>
    ...
    <MenuItem Text="Random"
              IconImageSource="random.png"
              Command="{Binding RandomPageCommand}" />
    <MenuItem Text="Help"
              Icon="help.png"
              Command="{Binding HelpCommand}"
              CommandParameter="https://docs.microsoft.com/xamarin/xamarin-forms/app-fundamentals/shell">
        <Shell.MenuItemTemplate>
            <DataTemplate>
                ...
            </DataTemplate>
        </Shell.MenuItemTemplate>
    </MenuItem>
</Shell>

В этом примере MenuItemTemplate на уровне оболочки задается для первого объекта MenuItem, а для второго объекта MenuItem задается встроенный шаблон MenuItemTemplate.This example attaches the Shell-level MenuItemTemplate to the first MenuItem object, and attaches the inline MenuItemTemplate to the second MenuItem.