Страницы оболочки Xamarin.Forms

  • Статья

Download Sample Скачайте пример

Объект ShellContent представляет объект ContentPage для каждого FlyoutItem или Tab. Если Tab содержит более одного объекта ShellContent, перемещение по объектам ContentPage осуществляется с помощью верхней панели вкладок. На странице можно перемещаться по дополнительным объектам ContentPage, называемым страницами сведений.

Кроме того, класс Shell определяет присоединенные свойства, с помощью которых можно настраивать внешний вид страниц в приложениях оболочки Xamarin.Forms. Сюда относится настройка цветов страниц, установка режима презентации страницы, отключение панели навигации, отключение панели вкладок и отображение представлений на панели навигации.

Отображение страниц

В приложениях оболочки Xamarin.Forms страницы обычно создаются по запросу в ответ на навигацию. Это достигается с помощью расширения разметки DataTemplate для задания свойства ContentTemplate каждого объекта ShellContent в соответствии с объектом 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>
       <ShellContent Title="Cats"
                     Icon="cat.png"
                     ContentTemplate="{DataTemplate views:CatsPage}" />
       <ShellContent Title="Dogs"
                     Icon="dog.png"
                     ContentTemplate="{DataTemplate views:DogsPage}" />
       <ShellContent Title="Monkeys"
                     Icon="monkey.png"
                     ContentTemplate="{DataTemplate views:MonkeysPage}" />
    </TabBar>
</Shell>

В этом примере для удаления объектов Tab из визуальной иерархии используются неявные операторы преобразования оболочки. Однако каждый объект ShellContent отображается на вкладке:

Screenshot of a Shell app with three pages, on iOS and Android

Примечание.

BindingContext каждого объекта ShellContent наследуется от родительского объекта Tab.

В каждом объекте ContentPage можно перейти к дополнительным объектам ContentPage. Дополнительные сведения о навигации см. в разделе Навигация по оболочке Xamarin.Forms.

Загрузка страниц при запуске приложения

В приложении оболочки каждый объект ContentPage обычно создается по запросу в ответ на навигацию. Однако можно также создавать объекты ContentPage при запуске приложения.

Предупреждение

Объекты ContentPage, создаваемые при запуске приложения, могут привести к неудачному запуску.

Объекты ContentPage можно создавать при запуске приложения, присвоив свойства ShellContent.Content объектам 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>
     <ShellContent Title="Cats"
                   Icon="cat.png">
         <views:CatsPage />
     </ShellContent>
     <ShellContent Title="Dogs"
                   Icon="dog.png">
         <views:DogsPage />
     </ShellContent>
     <ShellContent Title="Monkeys"
                   Icon="monkey.png">
         <views:MonkeysPage />
     </ShellContent>
    </TabBar>
</Shell>

В этом примере CatsPage, DogsPage и MonkeysPage создаются при запуске приложения, а не по запросу в ответ на навигацию.

Примечание.

Content — это свойство содержимого класса ShellContent. Поэтому его не нужно задавать явно.

Настройка цветов страницы

Класс Shell определяет следующие присоединенные свойства, с помощью которых можно настраивать цвета страницы в приложении оболочки:

  • BackgroundColor с типом Color определяет цвет фона для хрома оболочки. Этот цвет не применяется под содержимым оболочки.
  • DisabledColor с типом Color определяет цвет затененного текста и отключенных значков.
  • ForegroundColor с типом Color определяет цвет затененного текста и значков.
  • TitleColor с типом Color определяет цвет заголовка активной страницы.
  • UnselectedColor с типом Color определяет цвет невыделенного текста и значков для хрома оболочки.

Все эти свойства поддерживаются объектами BindableProperty, то есть их можно указывать в качестве целевых для привязок данных, а также оформлять их, используя стили XAML. Кроме того, эти свойства можно задавать с помощью каскадных таблиц стилей (CSS). Подробные сведения см. в разделе Особые свойства оболочки Xamarin.Forms.

Примечание.

Есть также свойства, которые позволяют определить цвета вкладки. Дополнительные сведения см. в разделе Внешний вид вкладок.

В следующем примере XAML показано, как задать свойства цвета в производном классе Shell:

<Shell xmlns="http://xamarin.com/schemas/2014/forms"
       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
       x:Class="Xaminals.AppShell"
       BackgroundColor="#455A64"
       ForegroundColor="White"
       TitleColor="White"
       DisabledColor="#B4FFFFFF"
       UnselectedColor="#95FFFFFF">

</Shell>

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

Так как свойства цвета являются присоединенными свойствами, их можно также задавать для отдельных страниц, чтобы соответствующим образом определять цвета:

<ContentPage ...
             Shell.BackgroundColor="Gray"
             Shell.ForegroundColor="White"
             Shell.TitleColor="Blue"
             Shell.DisabledColor="#95FFFFFF"
             Shell.UnselectedColor="#B4FFFFFF">

</ContentPage>

Свойства цвета можно также задавать с помощью стиля XAML:

<Style x:Key="DomesticShell"
       TargetType="Element" >
    <Setter Property="Shell.BackgroundColor"
            Value="#039BE6" />
    <Setter Property="Shell.ForegroundColor"
            Value="White" />
    <Setter Property="Shell.TitleColor"
            Value="White" />
    <Setter Property="Shell.DisabledColor"
            Value="#B4FFFFFF" />
    <Setter Property="Shell.UnselectedColor"
            Value="#95FFFFFF" />
</Style>

Дополнительные сведения о стилях XAML см. в руководстве по оформлению приложений Xamarin.Forms с использованием стилей XAML.

Установка режима презентации страницы

По умолчанию происходит анимация навигации при переходе на страницу с помощью метода GoToAsync. Но вы можете изменить это поведение, задав в присоединенном свойстве Shell.PresentationMode для ContentPage один из элементов перечисления PresentationMode:

  • NotAnimated указывает, что страница будет отображаться без анимации навигации.
  • Animated указывает, что страница будет отображаться с анимацией навигации. Это значение по умолчанию для присоединенного свойства Shell.PresentationMode.
  • Modal указывает, что страница будет отображаться в виде модальной страницы.
  • ModalAnimated указывает, что страница будет отображаться в виде модальной страницы с анимацией навигации.
  • ModalNotAnimated указывает, что страница будет отображаться в виде модальной страницы без анимации навигации.

Внимание

Тип PresentationMode является перечислением флагов. Это означает, что сочетание элементов перечисления может быть применено в коде. Но для простоты использования в XAML элемент ModalAnimated является сочетанием элементов Animated и Modal, а элемент ModalNotAnimated — сочетанием NotAnimated и Modal. Дополнительные сведения о перечислении флагов см. в этом разделе.

Следующий пример XAML задает присоединенное свойство Shell.PresentationMode для ContentPage:

<ContentPage ...
             Shell.PresentationMode="Modal">
    ...             
</ContentPage>

В этом примере ContentPage задается как модальная страница при переходе на нее с помощью метода GoToAsync.

включение тени панели навигации

Присоединенное свойство Shell.NavBarHasShadow с типом bool определяет, будет ли панель навигации иметь тень. По умолчанию для этого свойства задано значение false в iOS и значение true в Android.

Хотя это свойство можно задать в производном объекте Shell, оно обычно устанавливается на любой странице, на которой нужно включить тень панели навигации. Так, в следующем примере XAML показано, как включить тень панели навигации из ContentPage:

<ContentPage ...
             Shell.NavBarHasShadow="true">
    ...
</ContentPage>

Это приведет к включению тени панели навигации.

Отключение панели навигации

Присоединенное свойство Shell.NavBarIsVisible с типом bool определяет, будет ли видна панель навигации при отображении страницы. По умолчанию этому свойству задано значение true.

Хотя это свойство можно задать в производном объекте Shell, оно обычно устанавливается на любой странице, на которой нужно скрыть панель навигации. Так, в следующем примере XAML показано, как отключить панель навигации из ContentPage:

<ContentPage ...
             Shell.NavBarIsVisible="false">
    ...
</ContentPage>

В результате панель навигации становится скрытой, когда отображается страница:

Screenshot of Shell page with an invisible navigation bar, on iOS and Android

Отображение представлений на панели навигации

Присоединенное свойство Shell.TitleView с типом View служит для отображения на панели навигации всех View.

Хотя это свойство можно задать в производном объекте Shell, оно обычно устанавливается на любой странице, на которой нужно отобразить представление на панели навигации. Так, в следующем примере XAML показано, как отобразить Image на панели навигации для ContentPage:

<ContentPage ...>
    <Shell.TitleView>
        <Image Source="xamarin_logo.png"
               HorizontalOptions="Center"
               VerticalOptions="Center" />
    </Shell.TitleView>
    ...
</ContentPage>

В результате изображение отображается на панели навигации на странице:

Screenshot of Shell page with a title view, on iOS and Android

Внимание

Если панель навигации скрыта с помощью присоединенного свойства NavBarIsVisible, представление названия не будет отображаться.

Представления не будут отображаться на панели навигации, если не указан размер представления с помощью свойств WidthRequest и HeightRequest или не указано расположение представления с помощью свойств HorizontalOptions и VerticalOptions.

Так как класс Layout является производным от класса View, присоединенное свойство TitleView можно настроить для отображения класса макета, содержащего несколько представлений. Аналогичным образом, так как класс ContentView является итоговым производным от класса View, присоединенное свойство TitleView можно настроить для отображения ContentView с единым представлением.

Видимость страницы

Оболочка учитывает видимость страницы, которая задается с помощью свойства IsVisible. Поэтому, если у свойства IsVisible страницы значение false, она не будет отображаться в приложении оболочки и на нее невозможно будет перейти.