AppBar

Панель приложения состоит из панели инструментов и, возможно, других представлений. Разоблачение одного или нескольких действий.

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

• Пользовательская высота панели приложения.
• Включайте любой контент без ограничений и ограничений (поля, размер и т. д.).
• Прозрачная панель приложений.
• И т.п.

ПРИМЕЧАНИЕ. AppBar — это кросс-платформенное представление , которое вступает в силу, когда нативная панель навигации достигает своих пределов, таких как добавление пользовательского контента, позиционирование с помощью макетов и т. д.

В Xamarin.Forms панель приложения обычно используется в свойстве Shell.AppBar , которое размещает панель приложения в виде виджета фиксированной высоты в верхней части экрана.

API

Далее список со свойствами и событиями AppBar.

Характеристики

| Недвижимость | Тип | Описание |
|----------|:--------------:|:-------------:|
| Размещение | AppBarPlacement | Расположение AppBar (сверху или снизу). |
| БарВысота | двойной | Определите высоту панели приложения. |
| БарФон | Кисть | Кисть, создающая фон. |
| Барфоновое изображение | Источник изображения | ImageSource, предоставляющий фон. |
| Цвет Бартекста | Цвет | Цвет, используемый в текстах (заголовок и т. д.). |
| Значок навигации | Источник изображения | ImageSource, предоставляющий значок навигации (кнопка «Назад» и т. д.). |
| НазадКнопкаНазвание | строка | Определите заголовок кнопки «Назад» на панели приложений. |
| Цвет границы | Цвет | Цвет границы панели приложения. |
| Толщина границы | Толщина | Ширина границы панели приложения с каждой стороны. |
| Семья шрифтов | строка | Семейство шрифтов, используемое в текстах панели приложения. |
| Атрибуты шрифта | Атрибуты шрифта | Атрибуты шрифта, используемые в текстах панели приложения. |
| Размер шрифта | двойной | Размер шрифта, используемый в текстах панели приложения. |
| Заголовок | Посмотреть | Отображение любого представления Xamarin.Forms на панели приложения. |
| НазадКоманда | ICommand | Команда выполнена для перехода назад. |
| Параметр НазадКоманды | объект | Параметр команды, используемый для перехода назад. |

События

| Событие | Описание |
|----------|:--------------:|
| BackTapped | Событие, которое возникает, когда пользователь возвращается назад. |

Сценарии

Давайте посмотрим на некоторые примеры, охватывающие распространенные сценарии.

Простая панель приложений

Давайте посмотрим на базовый пример:

<Shell>
     <Shell.AppBar>
         <AppBar />
     </Shell.AppBar>
    ...
</Shell>

Пользовательская панель приложений

Настройка внешнего вида с помощью прозрачной панели с пользовательской высотой и пользовательским содержимым (TitleView).

<Shell>
     <Shell.AppBar>
        <AppBar  
            BarHeight="120"
            BarBackgroundColor="Transparent">
            <AppBar.TitleView>
            ...
            </AppBar.TitleView>
        </AppBar>
     </Shell.AppBar>
    ...
</Shell>

Размещение

Верхняя панель приложения (местоположение по умолчанию) отображает навигацию и действия в верхней части мобильных экранов.

<Shell>
     <Shell.AppBar
          Placement="Top">
         <AppBar />
     </Shell.AppBar>
    ...
</Shell>

Нижняя панель приложения отображает навигацию и действия в нижней части мобильных экранов.

<Shell>
     <Shell.AppBar
          Placement="Bottom">
         <AppBar />
     </Shell.AppBar>
    ...
</Shell>

Использование стилей

Можно настроить внешний вид содержимого вкладки, полосы вкладок, элемента вкладки и т. д. с помощью стилей XAML или CSS .

Использование XAML:

<Style
    x:Key="AppBarStyle"
    TargetType="AppBar">
    <Setter
        Property="BarHeight"
        Value="120" />
    <Setter
        Property="BarBackgroundColor"
        Value="Transparent" />
</Style>

Использование CSS:

.appBarStyle {
  background: transparent;
  height: 120px;
}

Уровень сложности: средний

Больше информации

На основе https://github.com/xamarin/Xamarin.Forms/issues/10774